Что такое SVG? Руководство по векторному формату

SVG - формат изображений, который состоит не из пикселей, а из инструкций по рисованию. Когда логотип, иконку или диаграмму сохраняют в SVG, файл содержит команды вроде "проведи кривую от этой точки до той и залей ее этим цветом". Поэтому SVG остается четким при любом размере, часто весит совсем немного и открывается для правки в обычном текстовом редакторе. В этой статье расскажем о месте SVG среди стандартов W3C, об устройстве файла, о поддержке в браузерах и программах, о рисках безопасности и о том, как конвертировать SVG в PNG или JPG и обратно.

Что такое SVG?

SVG (Scalable Vector Graphics, масштабируемая векторная графика) - стандарт W3C на основе XML для описания двумерной векторной графики. Расширение файла .svg, MIME-тип image/svg+xml. Вариант, сжатый gzip, использует расширение .svgz.

Растровые форматы (JPG, PNG, WebP) хранят картинку как фиксированную сетку пикселей; если ее увеличить, пиксели становятся заметны. SVG описывает фигуры математически, и браузер или программа заново прорисовывает их в том разрешении, которое есть у экрана. Руководство MDN по форматам изображений называет SVG идеальным выбором для изображений, которые можно представить командами рисования, особенно когда размер показа неизвестен или меняется, и отмечает, что для фотографий он, как правило, не подходит.

История: SVG 1.0, 1.1 и SVG 2

• 4 сентября 2001 года: SVG 1.0 опубликован как Рекомендация W3C.
• 14 января 2003 года: Рекомендацией стал SVG 1.1. В версии 1.1 язык разделили на модули, что упростило описание подмножеств, например мобильных профилей.
• 16 августа 2011 года: вышло второе издание SVG 1.1 (Second Edition). Именно на эту стабильную версию сегодня опираются браузеры.
• SVG 2: согласно истории публикаций W3C, рабочие черновики появлялись с 2012 года, а первый снимок Candidate Recommendation вышел 15 сентября 2016 года. Последний снимок датирован 6 октября 2026 года; документ все еще находится на стадии Candidate Recommendation.

SVG 2 развивает второе издание 1.1 и нацелен на более тесную интеграцию с HTML и CSS. Часть тем, например фильтры, маски и шрифты, вынесена в отдельные модули CSS и FX. На практике браузеры реализуют SVG 2 лишь частично, поэтому не стоит рассчитывать, что каждая возможность работает везде.

Устройство SVG-файла

Простой SVG-файл выглядит так:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Система координат: viewBox, width и height

viewBox задает внутреннюю систему координат рисунка (здесь от 0 до 100). width и height определяют, сколько места рисунок занимает на странице. SVG с viewBox пропорционально масштабируется до любого размера, заданного в CSS. Файлы без viewBox при изменении размера могут обрезаться, и это одна из самых частых ошибок с логотипами.

Основные элементы

• Фигуры: rect, circle, ellipse, line, polyline, polygon и path, которым можно нарисовать что угодно.
• Текст: text и tspan. Текст остается выделяемым и доступным для поиска, но если на устройстве просмотра нет нужного шрифта, используется запасной.
• Группировка и повторное использование: g, defs, symbol, use. Наборы иконок часто собирают в один файл в виде элементов symbol.
• Заливка и обводка: сплошные цвета, линейные и радиальные градиенты, узоры, обтравочные контуры, маски и фильтры (размытие, тень).
• Стили и анимация: SVG можно оформлять через CSS; движение добавляют CSS-анимации и элементы анимации SMIL.
• Встроенное содержимое: image для растровых картинок, foreignObject для HTML и script для JavaScript.

Цвет, прозрачность, слои и страницы

Прозрачность в SVG встроена изначально: все, что не нарисовано, остается пустым, а полупрозрачность задают opacity и fill-opacity. Слои представлены группами g; так хранят свои слои Inkscape и Illustrator. По умолчанию цвета задаются в sRGB, а ограничения глубины цвета в привычном смысле нет, потому что цвета записываются числами. SVG не является многостраничным форматом документов; для многостраничных чертежей лучше подходит PDF.

Поддержка в браузерах, системах и программах

По данным MDN, SVG поддерживают Chrome, Edge, Firefox, Opera и Safari. Его можно использовать через <img>, как CSS-свойство background-image, встраивать прямо в HTML или подключать через <object> и <iframe>. Векторные редакторы, такие как Inkscape, Adobe Illustrator, Affinity Designer и Figma, читают и сохраняют SVG, а актуальные версии Microsoft Office позволяют вставлять SVG-графику.

В других местах поддержка слабее: многие социальные сети, почтовые клиенты, мессенджеры и формы загрузки отклоняют SVG или не показывают превью. Отчасти причина в риске безопасности, о котором речь ниже.

Безопасность: относитесь к SVG как к документу

SVG - это XML-документ, и он может содержать элемент script, атрибуты событий (например, onload) и внешние ссылки. На странице MDN "SVG as an image" объясняется, что когда SVG используется через <img> или как фон в CSS, браузеры отключают JavaScript и не загружают внешние ресурсы, например изображения или таблицы стилей. Эти ограничения не действуют, если файл открыт напрямую или встроен через <iframe>, <object> или <embed>.

Практическое следствие: если сайт позволяет пользователям загружать SVG и отдает эти файлы напрямую со своего домена, встроенный в файл скрипт может выполниться в контексте этого сайта (хранимая XSS). Типичные меры защиты:

• Пропускайте загруженные SVG через санитайзер, который удаляет script, атрибуты событий, foreignObject и внешние ссылки.
• Отдавайте пользовательские файлы с отдельного домена, со строгой Content-Security-Policy или как загрузку (Content-Disposition: attachment).
• Если вектор не нужен, конвертируйте загруженные SVG в PNG на сервере и публикуйте только растровую версию.

Типичные сферы применения

• Логотипы и фирменные материалы: один файл остается четким от визитки до билборда.
• Иконки интерфейса: их можно перекрашивать через CSS, и они не размываются на экранах высокой плотности.
• Графики, карты и схемы: библиотеки вроде D3.js рисуют данные прямо в SVG-элементы.
• Фавиконки: современные браузеры принимают SVG-фавиконки через <link rel="icon" type="image/svg+xml">.
• Резка и печать: лазерные и плоттерные резаки, а также вышивальные машины работают с векторными контурами.

Сильные и слабые стороны

Частые проблемы и их решение

Сайт или приложение не принимает SVG

Проще всего сделать копию в PNG. Наш конвертер SVG в PNG отрисовывает рисунок в прозрачный PNG прямо в браузере с выбранной вами шириной в пикселях. Файл не загружается на сервер и не покидает ваше устройство.

Текст отображается другим шрифтом

По умолчанию SVG не встраивает шрифты; если в системе просмотра нужного шрифта нет, используется запасной. В контексте изображения внешние шрифты тоже не загружаются. Преобразуйте текст в кривые в графическом редакторе или встройте шрифт.

SVG на странице неправильного размера или обрезан

Без viewBox или с фиксированными width/height масштабирование работает не так, как ожидается. Добавьте корневому элементу svg viewBox, охватывающий весь рисунок, и задавайте размер в CSS.

Файл больше, чем ожидалось

Графические редакторы записывают в SVG служебные метаданные, лишние знаки после запятой и скрытые слои. Оптимизатор вроде SVGO их удаляет. Сжатие gzip или Brotli на сервере дополнительно уменьшает текстовый SVG.

Мне нужен мой логотип из PNG в формате SVG

Растровое изображение нельзя по-настоящему "конвертировать" в вектор; инструменты выполняют трассировку: находят фигуры и заново рисуют их контурами. Наши инструменты PNG в SVG и JPG в SVG трассируют изображение в 2-8 цветах. Для простых логотипов и рисунков результат хороший, для фотографий грубый. В этих инструментах файл загружается на наши серверы по защищенному соединению, трассируется там и удаляется не позднее чем через 30 минут.

Советы по конвертации

• Знайте целевой размер: при отрисовке SVG в PNG выбирайте самый большой размер, в котором изображение будет показываться, и удваивайте его для экранов высокой плотности. В нашем инструменте длинная сторона может достигать 4096 пикселей; если оставить ширину пустой, небольшие рисунки масштабируются так, чтобы длинная сторона составила 1024 пикселя.
• JPG для фотографического содержимого: если в SVG встроена фотография и прозрачность не нужна, JPG или WebP будут меньше PNG; полученный PNG можно затем конвертировать в конвертере изображений.
• Фавиконки: если ваш логотип в SVG, генератор фавиконок примет его и добавит в пакет icon.svg.
• Чистый исходник для трассировки: создавая SVG из PNG, начинайте с изображения высокого разрешения, с плоскими цветами и без шума.

Часто задаваемые вопросы

Чем SVG отличается от PNG?

PNG - это фиксированное количество пикселей, и при увеличении он размывается. SVG описывает фигуры и четко перерисовывается при любом размере. SVG подходит для логотипов и иконок, PNG или JPG для фотографий и скриншотов.

Может ли SVG-файл содержать вирус?

SVG не является исполняемой программой, но в него можно встроить JavaScript. Скрипты не выполняются, когда SVG показан как изображение (<img>), но могут выполниться, если открыть файл прямо в браузере. SVG из неизвестных источников лучше просматривать в программе просмотра или конвертировать в PNG, а не открывать напрямую.

Можно ли вставить SVG в Word или PowerPoint?

Актуальные версии Microsoft Office поддерживают вставку SVG. Для старых версий или если файл будет открываться в других программах надежнее копия в PNG.

Теряется ли качество при конвертации SVG в PNG?

PNG сжимает без потерь, но рисунок фиксируется в определенном размере в пикселях. Выберите достаточно большую ширину, и потерь вы не заметите; если позже увеличить PNG, он размоется.

Поддерживает ли SVG анимацию?

Да. Движение можно задать CSS-анимациями, элементами анимации SMIL и JavaScript. При конвертации в PNG вы получите один кадр.

Источники

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 publication history
• MDN: SVG as an image
• MDN: Image file type and format guide