SVG-графика: векторное сокровище в мире веба

Обновлено: июль 2026

SVG (Scalable Vector Graphics) — формат векторной графики, в котором изображение описано не пикселями, а разметкой: координатами, кривыми, заливками. Поэтому картинка масштабируется до любого размера без потери резкости, открывается прямо в браузере и правится в обычном текстовом редакторе. Используют его для логотипов, иконок, схем и инфографики.

• SVG — это XML-разметка, а не сетка пикселей: файл читается глазами и меняется руками.
• Для иконок, логотипов и схем формат SVG почти всегда лучше PNG; для фотографий он не годится.
• Вставить на страницу можно четырьмя способами, и от выбора зависит, будут ли работать CSS и JavaScript.
• SVG умеет содержать скрипты — это реальный риск при загрузке чужих файлов на сайт.
• Поддержка форматом браузеров сплошная: все актуальные версии Chrome, Edge, Firefox, Opera и Safari.

Что такое формат SVG и чем он отличается от растра

Формально SVG — «XML-based markup language for describing two-dimensional based vector graphics», язык разметки на базе XML для описания двумерной векторной графики (MDN Web Docs). MDN добавляет важное: это «text-based, open Web standard for describing images that can be rendered cleanly at any size» — текстовый открытый веб-стандарт, изображения которого чисто отрисовываются в любом размере.

Отсюда вся практическая разница. Растровые форматы — PNG, JPEG, WebP — хранят готовую сетку точек. Увеличили в четыре раза — получили мыло и лесенки на диагоналях. SVG хранит инструкцию: «круг с центром 50, 50 и радиусом 40, обводка чёрная, заливка красная». Браузер выполняет инструкцию заново под то разрешение, которое нужно прямо сейчас, поэтому логотип одинаково резкий и в подвале сайта, и на баннере во всю ширину экрана Retina.

Второе следствие текстовой природы: файл можно открыть в «Блокноте» и поменять цвет, не запуская графический редактор. И третье: разметку индексируют поисковики, её сжимает gzip на сервере, её видит система контроля версий — diff по SVG показывает, что именно изменилось, чего никогда не покажет diff по PNG.

MIME-тип формата — image/svg+xml, расширение — .svg (MDN, справочник форматов изображений).

Коротко: растр — это фотография результата, SVG — чертёж, по которому результат рисуется заново под каждый экран.

ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ

Нейросети DEEPSEEK И QWEN За 2 часа сделаем полный обзор новых мощных ИИ-моделей, которые бросают вызов нейросети ChatGPT

ТОП-подарки всем участникам лекции:

• Возможность получить Доступ в Нейроклуб на целый месяц
• Как ИИ ускоряет работу и приносит деньги
• За 2 часа вы получите четкий план, как начать работать с ИИ прямо сейчас!

Участвовать бесплатно

SVG или PNG, JPEG, WebP: какой формат выбрать под задачу

Спор «что лучше» бессмыслен без задачи. MDN формулирует границу так: SVG — «ideal choice for images which can be represented using a series of drawing commands», идеальный выбор для изображений, которые описываются набором команд рисования, «especially if the size at which the image will be rendered is unknown or may vary» — особенно когда размер отрисовки заранее неизвестен или меняется. И тут же ограничение: «It’s not generally useful for strictly bitmap or photographic images» — для строго растровых и фотографических изображений формат обычно бесполезен.

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

По совместимости MDN оставляет одну оговорку: «Although SVG support is good, it may be worth offering a PNG fallback for older browsers» — поддержка хорошая, но для старых браузеров имеет смысл держать PNG-запасной вариант.

Коротко: вектор — для того, что нарисовано; растр — для того, что снято.

Чем открыть и в чём создать файл в формате SVG

Самый быстрый способ посмотреть SVG — перетащить файл в окно браузера. Формат поддерживают все актуальные версии Chrome, Edge, Firefox, Opera и Safari (MDN, справочник форматов изображений), никаких плагинов не нужно.

Дальше по задачам:

• Посмотреть, что внутри, и быстро поправить цвет — любой текстовый редактор: «Блокнот», Notepad++, VS Code. Файл — обычная разметка, атрибут fill меняется руками за секунду.
• Нарисовать с нуля или перерисовать логотип — векторные редакторы: Adobe Illustrator, Inkscape (бесплатный, с открытым исходным кодом), CorelDRAW, Sketch.
• Взять иконку из макета — Figma и её аналоги отдают выделенный слой командой экспорта в SVG. Если Figma недоступна, посмотрите российский аналог Фигмы — экспорт вектора там тоже есть.

Логика создания не изменилась с прошлой версии этой статьи и остаётся верной: вы строите векторные объекты, задаёте им параметры — координаты опорных точек, радиусы, цвета — группируете элементы, чтобы ими было удобно управлять, и сохраняете результат в файл с расширением .svg.

Одна вещь, которую новички пропускают при экспорте, — атрибут viewBox. По спецификации он «defines the position and dimension, in user space, of an SVG viewport» и принимает четыре числа: min-x, min-y, width, height (MDN). Именно связка viewBox с preserveAspectRatio растягивает или ужимает содержимое под контейнер. Без viewBox картинка перестаёт тянуться по ширине блока и ведёт себя как растровая с фиксированным размером — типовая причина жалобы «SVG не масштабируется».

Простейший файл целиком выглядит так:

Пять строк, читаются вслух: круг с центром в точке 50, 50, радиус 40, обводка чёрная толщиной 3, заливка красная.

Коротко: посмотреть — браузер, поправить точечно — текстовый редактор, рисовать — Illustrator, Inkscape или Figma.

Как вставить SVG-формат на страницу: четыре способа и их цена

Это тот раздел, где чаще всего теряют время. Способ вставки определяет не внешний вид, а то, дотянутся ли до картинки CSS и JavaScript.

1. Тег img

MDN относит к плюсам привычный синтаксис с текстовой альтернативой в alt, лёгкое превращение картинки в ссылку через <a> и кеширование файла браузером — «faster loading times for any page that uses the image loaded in the future». Минусы там же перечислены прямо: «You cannot manipulate the image with JavaScript»; чтобы управлять содержимым через CSS, стили должны лежать внутри самого файла, потому что «external stylesheets invoked from the SVG file take no effect»; и псевдоклассы вроде :focus к такой картинке не применяются.

2. Инлайн-разметка прямо в HTML

Код <svg>…</svg> вставляется в тело страницы. По MDN это экономит HTTP-запрос, позволяет вешать на элементы class и id и стилизовать их обычным CSS, и это «the only approach that lets you use CSS interactions (like :focus) and CSS animations on your SVG image». Цена: разметка раздувает HTML, браузер не кеширует её как отдельный ресурс, а при использовании иконки в нескольких местах начинается дублирование — «duplication makes for resource-intensive maintenance».

3. Фон средствами CSS

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

4. iframe

Годится для тяжёлых самостоятельных схем. MDN предупреждает: если SVG и страница с разных источников, «you cannot use JavaScript on your main webpage to manipulate the SVG».

Коротко: нужна интерактивность или перекраска через CSS — только инлайн; нужен кеш, простота и alt — img.

Безопасность: почему SVG-формат — не просто картинка

Об этом молчат почти все статьи про формат SVG, а вопрос практический. Раз файл — это разметка, в нём могут лежать элемент script и обработчики событий вроде onclick. То есть загруженная пользователем «картинка» способна оказаться исполняемым кодом.

Спецификация W3C SVG 2 отвечает на это режимами обработки документа. В режимах secure static mode и secure animated mode выполнение скриптов и разрешение внешних ссылок отключены. Определение из спецификации дословно: «the execution of any SVG ‘script’ elements, script found in event attributes (such as ‘onclick’ on SVG elements), or any other script defined by other Web platform features used in the document… When script execution is disabled in an SVG document, no script in the document must be run».

Где какой режим применяется, спецификация тоже фиксирует: «The same processing modes are expected to be used for other cases where SVG is used in place of a raster image, such as an HTML ‘img’ element or in any CSS property that takes an <image> data type». Противоположность им — dynamic interactive mode, который «imposes no restrictions on any feature of the SVG language»: так обрабатывается SVG, открытый как самостоятельный документ по прямой ссылке.

Из этого следует конкретное правило для сайта, который принимает файлы от пользователей:

• Показывать чужой SVG через <img> или как CSS-фон — скрипты внутри в этих контекстах не исполняются.
• Не вставлять чужую разметку инлайн в страницу: там она попадает в общий DOM со всеми правами страницы.
• Не давать прямую ссылку на загруженный файл на своём домене — открытый как отдельный документ, он обрабатывается без ограничений.
• Чистить загружаемые файлы санитайзером и отдавать пользовательский контент с отдельного домена.

Свой SVG, экспортированный из Illustrator или Figma, ничего исполняемого не содержит. Риск возникает ровно там, где файл пришёл со стороны: от подрядчика, из стока, из формы загрузки аватара. Проверить пятисекундно — откройте файл текстовым редактором и поищите script и on-атрибуты.

Коротко: SVG — это код. Свой можно вставлять как угодно, чужой — только как картинку.

Как уменьшить вес файла в формате SVG

Экспорт из редактора почти всегда выдаёт файл тяжелее необходимого. Что убирать, не трогая картинку:

• Служебные данные редактора. Illustrator и Inkscape пишут в файл собственные пространства имён, комментарии и метаданные — на отрисовку они не влияют.
• Избыточную точность координат. Числа вида 12.4382719 округляются до одного-двух знаков без видимой разницы.
• Скрытые и пустые слои, ненужные группы, оставшиеся от работы в макете.
• Повторяющиеся атрибуты — вынести в общий класс или в родительский элемент.

И главное, что даёт больше всей ручной чистки: SVG — текст, поэтому к нему применяется обычное сжатие на сервере (gzip или brotli). Включённое сжатие статики в настройках веб-сервера сокращает передачу разметки в разы — это тот же механизм, что работает для HTML и CSS.

Отдельно про иконки. Когда одна и та же иконка встречается на странице десять раз, инлайн-дублирование разметки — худший вариант. Соберите набор в спрайт и подключайте элементом use: сама геометрия описана один раз.

Стилизация и анимация: что даёт формат SVG сверх картинки

Инлайн-вставка открывает то, ради чего вектор обычно и берут в интерфейсы. Атрибуты представления работают как свойства CSS — MDN формулирует это прямо: «you can use any SVG presentation attribute as a CSS property». Значит, иконка перекрашивается по :hover из общей темы сайта, а не пересобирается в трёх цветах на этапе экспорта.

Анимировать содержимое можно тремя путями: декларативно средствами SMIL (элементы animate, animateTransform, animateMotion), обычными CSS-анимациями по классам и через JavaScript, меняя атрибуты элементов из скрипта. Для интерфейсных мелочей — состояние кнопки, галочка после отправки формы, лоадер — CSS-путь самый дешёвый в поддержке. Если анимацию делает дизайнер в редакторе, а не разработчик руками, посмотрите, как устроен процесс подготовки графики в подборке нейросетей для дизайна.

Отдельный сценарий — генерация SVG на лету на сервере: динамические обложки, бейджи со счётчиками, диаграммы по данным. Разбор такого подхода есть в статье про генеративные обложки в Next.js.

Коротко: чистка разметки плюс gzip на сервере — и вопрос веса закрыт; инлайн даёт перекраску и анимацию без пересборки файла.

Где применяют формат SVG на практике

• Логотипы и иконки интерфейса. Один файл закрывает все плотности пикселей, включая экраны Retina.
• Схемы и инфографика. Подписи внутри остаются текстом: их можно выделить, скопировать, они не расплываются при увеличении.
• Иллюстрации в дизайн-системе. Цвета берутся из темы через CSS, а не зашиваются в файл.
• Карты и планы. Каждый регион — отдельный элемент разметки, к которому можно привязать всплывающую подсказку или обработчик клика.
• Печать. Одна и та же векторная эмблема идёт и в подвал сайта, и на вывеску.
• Презентации и документы. Слайд, увеличенный проектором, не рассыпается на квадраты.

Чек-лист работы с форматом SVG

• Картинка нарисована геометрией, а не снята камерой — берём SVG; фотография — WebP или JPEG.
• В файле есть viewBox, иначе картинка не потянется по ширине контейнера.
• Нужны перекраска через CSS, :hover или анимация — вставляем инлайн.
• Нужны кеш, alt и простота — вставляем через <img>.
• Файл пришёл со стороны — только <img> или CSS-фон, никакого инлайна и прямых ссылок.
• Перед выкладкой почищены метаданные редактора и лишняя точность координат.
• На сервере включено gzip- или brotli-сжатие статики.
• Иконка повторяется на странице — вынесена в спрайт с use.
• Для старых браузеров при необходимости положен PNG-запасной вариант.

Источники

• MDN Web Docs — SVG: определение формата, MIME-тип, поддержка браузерами, способы вставки и их ограничения.
• W3C, спецификация SVG 2, раздел о соответствии: режимы обработки документа и отключение выполнения скриптов.

Смежные материалы блога: как создать презентацию в Figma и как проверять интерфейсы с помощью AI.

Частые вопросы про формат SVG

Что за формат SVG и как расшифровывается аббревиатура?

Scalable Vector Graphics — масштабируемая векторная графика. По определению MDN это язык разметки на базе XML для описания двумерной векторной графики; изображение хранится как набор команд рисования, а не как сетка пикселей.

Чем открыть файл SVG?

Любым современным браузером — достаточно перетащить файл в окно. Для правок подойдут текстовый редактор (файл текстовый) и векторные редакторы: Adobe Illustrator, Inkscape, CorelDRAW, Figma.

Что лучше — SVG или PNG?

Зависит от картинки. Для логотипов, иконок и схем лучше SVG: масштабируется без потери качества. Для фотографий и сложных растровых изображений — PNG, JPEG или WebP; MDN прямо отмечает, что для фотографических изображений SVG обычно бесполезен.

Все ли браузеры поддерживают SVG?

По справочнику форматов MDN формат поддерживают все актуальные версии Chrome, Edge, Firefox, Opera и Safari. Для устаревших браузеров MDN советует при необходимости держать PNG-запасной вариант.

Опасны ли SVG-файлы?

Свои — нет. Чужие могут содержать скрипты, потому что формат допускает элемент script и обработчики событий. Спецификация W3C SVG 2 отключает выполнение скриптов в безопасных режимах обработки, которые применяются, когда SVG используется вместо растровой картинки — например, в теге img или в CSS-свойстве с типом <image>. Поэтому чужие файлы показывают только как картинку и не вставляют инлайн.

Почему SVG не масштабируется по ширине блока?

Чаще всего в файле нет атрибута viewBox. Он задаёт положение и размеры области просмотра в пользовательских координатах четырьмя числами — min-x, min-y, width, height — и вместе с preserveAspectRatio подгоняет содержимое под контейнер.

Можно ли анимировать SVG?

Да, тремя способами: декларативной анимацией SMIL внутри файла, CSS-анимациями и через JavaScript. Первые два варианта требуют, чтобы разметка была вставлена в страницу инлайн или чтобы стили лежали внутри самого файла.