Elysia Tools
Навигация
Workflow Playbook
Очистите утверждённые значки, выберите внутренние или внешние ссылки, проверьте идентификаторы и цвета на странице и экспортируйте отдельные растровые варианты.
Темы
Этот порядок помогает передать команде интерфейса повторно используемый набор значков. Сохраните отдельный утверждённый SVG каждого значка, его роль и небольшой целевой размер. Проверьте оригинал через svg-minifier-analyzer и сравните результат оптимизации. Разберите отсутствующие viewBox: прямоугольник из ширины и высоты может обрезать смещённый рисунок. Включите в список градиенты, маски и отсечения. Значки вкладки и манифесты относятся к svg-favicon-icon-workflows.
svg-sprite-generator объединяет до 30 файлов. Запишите созданные идентификаторы и удалённые дубликаты; сравнение использует viewBox и содержимое с нормализованными пробелами. Исходные имена могут измениться. Разные верхние идентификаторы не устраняют конфликты внутренних градиентов или отсечений. Сохраните цвета сложных рисунков. После удаления одноцветных атрибутов проверьте пустые области и задайте заливку или обводку у потребителя: удаление fill=none может залить прежде пустую часть.
В режиме symbol вставьте скачанный файл один раз и ссылайтесь на реальные идентификаторы. Для внешнего файла используйте окончательный путь и проверьте фактическую цель фрагмента или группы. Испытайте примеры со всеми значками, светлым и тёмным фоном и активными состояниями. Отдельный предпросмотр не доказывает работу размещённой ссылки. Удаление скриптов и событийных атрибутов не гарантирует полную очистку любого SVG; берите проверенные исходники. Элементам без текста нужны осмысленные доступные имена, декорациям отдельная обработка.
Если целевой среде нужны изображения, применяйте svg-to-png или svg-to-webp к каждому самостоятельному оригиналу. Скрытая коллекция символов не является видимым листом значков. Проверьте пиксельные размеры, альфа-канал и читаемость, затем передайте спрайт, карту идентификаторов, отдельные варианты и записи испытаний. Конфликты правил исследуйте в css-authoring-layout-and-cascade-workflows, полную доступность страницы в web-accessibility-audits.
Руководство по рабочему процессу
Проанализируйте SVG, сравните до и после и сохраните утверждённые геометрию, цвета и viewBox в восстанавливаемом оригинале.
Объедините файлы с выбранным режимом и префиксом, проверьте дубликаты, предупреждения viewBox и внутренние ссылки.
Адаптируйте примеры к размещённому пути и фактическим фрагментам; проверьте каждый значок, состояние и доступное имя в приложении.
Преобразуйте принятые оригиналы в PNG или WebP для целевой среды и проверьте размеры, альфа-канал и читаемость.
Используйте symbol для набора, вставленного один раз; для внешнего файла проверьте цель фрагмента и адрес в реальном приложении.
Сохраните многоцветные рисунки; удаляйте цвета только у проверенных одноцветных форм и задайте заливку или обводку, поскольку удаление fill=none меняет пустые области.
Экспортируйте PNG или WebP из принятого отдельного SVG, если цель не поддерживает спрайт; скрытый набор символов не является видимым изображением.