Формат SVG: спецификация и направления

Отсутствие viewBox — самая частая техническая ошибка в присланных файлах: без него браузер не знает пропорций области и не может вписать изображение в контейнер, поэтому картинка либо обрезается, либо занимает фиксированные width и height из корневого элемента. Второй источник проблем — текст, оставленный текстом: элемент text ссылается на семейство шрифтов по имени, и при отсутствии гарнитуры на устройстве подставляется системная, что меняет ширину строки и ломает композицию. Решение одно — перевод текста в контуры.

Не всё, что выглядит вектором в редакторе, экспортируется вектором. Тени, размытия и сложные режимы наложения из Illustrator и Figma реализуются фильтрами SVG, которые растеризуются при отрисовке, либо вставляются готовыми растровыми фрагментами в base64 — файл раздувается и перестаёт масштабироваться без потерь. Отдельно стоит помнить, что SVG допускает элементы script и внешние ссылки, поэтому файлы из непроверенных источников перед публикацией очищают.

При растеризации в PNG или JPEG задаётся целевая ширина в пикселях, и качество результата зависит только от неё: иконка, описанная как 24 × 24 единицы, отрисуется в любом размере без ступенек. Рабочие величины: 512 либо 1024 пикселя под веб-логотип и от 2048 — под печать и крупноформатные носители. Обратная операция, трассировка растра в кривые, корректно работает на контрастных двухцветных изображениях; фотография распадается на тысячи контуров и даёт файл тяжелее исходного.