Рабочий процесс с SVG Viewer для дизайн-систем
Дизайн-системы держатся на согласованности деталей. Одна плохо выровненная иконка или неверный viewBox могут запустить цепочку мелких проблем по всему продукту. SVG Viewer дает командам общую визуальную точку проверки перед передачей ресурсов от дизайна к коду. Ниже — простой и повторяемый процесс, который хорошо подходит командам с растущими библиотеками иконок.
1) Приемка: проверьте основы
Перед оптимизацией или конвертацией откройте актив в SVG Viewer и подтвердите эти основы:
- viewBox и размеры: убедитесь, что viewBox соответствует планируемому артборду, а width/height не содержат устаревших значений.
- Отступы и выравнивание: иконки должны находиться на согласованной сетке. Ищите формы, касающиеся краев, или лишнее пустое пространство.
- Толщина линий: особенно для контурных иконок, подтвердите согласованную толщину линий во всём наборе.
Эти проверки быстрые и наглядные: в просмотрщике их заметить проще, чем в сырой разметке.
2) Нормализуйте артборд
Если актив ощущается неправильно, нормализуйте артборд перед любой другой работой. Согласованный артборд значительно упрощает пакетный экспорт и изменение размера компонентов.
Практические шаги:
- Привяжите дизайн к сетке системы (например, 24×24 или 20×20).
- Переэкспортируйте с правильным размером viewBox.
- Снова откройте в SVG Viewer, чтобы подтвердить выравнивание с базовыми активами.
3) Очистите и оптимизируйте осознанно
Оптимизация — это не только размер файла; это предсказуемый вывод. Хорошее правило — удалить то, что вам никогда не понадобится:
- Метаданные и атрибуты, специфичные для редактора
- Неиспользуемые группы или пустые узлы
- Неиспользуемые ID
Используйте SVG Viewer, SVG Optimizer и SVG Sanitizer.
4) Согласованный экспорт
Экспорт — это момент, когда дизайн и разработка встречаются. Сделайте его согласованным:
- Выберите один формат (SVG или PNG для каждого размера).
- Придерживайтесь соглашений об именовании.
- Убедитесь, что вывод соответствует вводу.
Резюме
Это проверенный на практике процесс: приемка → проверка → нормализация → оптимизация → согласованный экспорт. А автоматические проверки в CI помогают поймать проблемы еще до того, как они дойдут до продакшена.