Формат файла SVG
SVG — это не картинка, а набор инструкций для рисования, записанных в XML, поэтому он остаётся идеально резким на любом размере и правится в текстовом редакторе.
или перетащите их сюда · изображения, видео, аудио и документы · до 2 ГБ
Что такое SVG?
SVG стал рекомендацией W3C в 2001 году и внутри представляет собой обычный текст. Вместо сетки пикселей он хранит фигуры: вот контур, вот толщина обводки, вот цвет заливки, вот координаты. Браузер выполняет эти инструкции в том размере, который требует вёрстка, — поэтому логотип в SVG безупречно чёток и на телефоне, и на 5K-мониторе, и на печатном плакате, оставаясь теми же несколькими килобайтами.
Текстовая природа даёт последствия не только в масштабировании. SVG аккуратно показывает различия в Git, поэтому изменения дизайна можно ревьюить построчно. Его элементы стилизуются через CSS и анимируются или изменяются скриптами так же, как любые узлы DOM. И сжимается он gzip настолько хорошо, что сложный набор иконок нередко обходится по трафику дешевле одного PNG-спрайта.
Та же открытость — источник рисков безопасности. Поскольку SVG может содержать элементы <script>, внешние ссылки и обработчики событий, файл, загруженный пользователем и отданный с вашего домена, становится вектором межсайтового скриптинга. Всё, что приходит извне, следует очищать санитайзером или отдавать с отдельного источника — предосторожность, которой не требует ни один растровый формат.
| Расширение | .svg |
|---|---|
| Категория | Изображение |
| MIME-тип | image/svg+xml |
| Год появления | 2001 |
| Разработчик | W3C |
| Сжатие | Вектор (без пиксельного сжатия) |
| Прозрачность | Да |
| Анимация | Да |
SVG: частые вопросы
- Почему в моём SVG не тот шрифт?
- Потому что файл ссылается на шрифт по имени и рассчитывает, что он есть у смотрящего. Если шрифта нет, отрисовщик подставляет другой и вёрстка съезжает. Переведите текст в кривые перед экспортом или встройте шрифт — и рисунок станет самодостаточным.
- Можно ли конвертировать JPEG или PNG в SVG?
- Только трассировкой, а это приближение, а не конвертация. Векторизаторы находят границы и подгоняют к ним кривые, что хорошо работает для логотипов и плоской штриховой графики. Фотографии превращаются в тысячи несовпадающих заплаток — крупнее оригинала и хуже на вид.
- Почему SVG не отображается в Photoshop или Word?
- Многие растровые редакторы и старые офисные пакеты либо растеризуют файл при импорте, либо отказываются от него вовсе, а поддержка фильтров, масок и встроенных шрифтов у них неровная. Экспорт PNG в нужном вам размере — надёжный способ передать векторную графику таким программам.
- Безопасно ли принимать SVG от пользователей?
- Без очистки — нет. SVG способен нести JavaScript, обработчики событий и внешние ссылки, поэтому вредоносный файл, отданный с вашего домена, выполнит скрипт в сессии ваших пользователей. Вырезайте скрипты санитайзером или отдавайте пользовательский контент с отдельного источника.
- Как уменьшить файл SVG?
- Прогоните его через оптимизатор вроде SVGO: редакторы оставляют скрытые слои, служебные метаданные, нелепую точность координат и неиспользуемые определения. Округление координат до одного-двух знаков и объединение контуров часто уполовинивают файл без видимых изменений, а остальное доделывает gzip на сервере.
- Иконки делать в SVG или PNG?
- Практически всегда в SVG. Один файл закрывает любую плотность экрана без отдельных экспортов @2x и @3x, цвета меняются через CSS, а весит он обычно меньше. PNG берите только там, где SVG не отрисовывается: почтовые клиенты и часть устаревших приложений.