Metric ConverterMetricConverter

Scalable Vector Graphics

SVG (Scalable Vector Graphics) — масштабируемая векторная графика

Что такое SVG?

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

История формата началась в конце 1990-х годов. В 1998 году консорциум W3C начал работу над спецификацией, и в 2001 году была опубликована версия SVG 1.0 как официальная рекомендация W3C. В 2003 году вышла версия SVG 1.1, которая до сих пор является наиболее широко поддерживаемой. В 2011 году появилась SVG 1.1 Second Edition с уточнениями и исправлениями, а работа над SVG 2.0 продолжается по сей день. Сегодня формат поддерживается всеми современными браузерами и является неотъемлемой частью веб-разработки.

Технические характеристики

SVG-файл представляет собой текстовый документ в формате XML, что делает его читаемым для человека и легко редактируемым в любом текстовом редакторе. Ниже перечислены ключевые технические особенности формата:

  • Основа формата: XML (Extensible Markup Language) — SVG описывает графические элементы через теги и атрибуты, аналогично HTML.
  • Разрешение: Формат не зависит от разрешения. Изображение одинаково чётко отображается как на экране смартфона, так и при печати в формате A0.
  • Цветовая глубина: SVG поддерживает полный спектр цветовых моделей: RGB, RGBA (с поддержкой прозрачности), HSL, а также именованные цвета CSS. Поддерживается градиентная заливка и паттерны.
  • Сжатие: SVG-файлы могут быть сжаты с помощью алгоритма GZIP, в результате чего получается формат SVGZ. Степень сжатия обычно составляет 60–80% от исходного размера.
  • Анимация: Формат поддерживает встроенную анимацию через SMIL (Synchronized Multimedia Integration Language) и CSS-анимации, а также манипуляции через JavaScript.
  • Интерактивность: Элементы SVG могут реагировать на события мыши и клавиатуры, поддерживают гиперссылки и сценарии.
  • Встраивание шрифтов и растровых изображений: В SVG можно встраивать растровую графику (через Base64) и ссылаться на внешние шрифты.
  • Фильтры и эффекты: Поддерживаются SVG-фильтры: размытие, тени, свечение, цветокоррекция и другие эффекты, описываемые декларативно.
  • MIME-тип: image/svg+xml
  • Расширение файла: .svg или .svgz (сжатая версия)

Сферы применения SVG

Благодаря своей гибкости и масштабируемости, формат SVG используется в самых разных областях:

  • Веб-дизайн и разработка: иконки, логотипы, иллюстрации, фоновые паттерны, кнопки и UI-элементы интерфейса.
  • Инфографика и визуализация данных: интерактивные графики, диаграммы и карты, созданные с помощью библиотек D3.js, Chart.js и других.
  • Брендинг и фирменный стиль: логотипы компаний, поскольку формат гарантирует чёткость на любом носителе — от визитки до рекламного щита.
  • Анимация и интерактивные элементы: анимированные иллюстрации для лендингов, интерактивные карты и обучающие материалы.
  • Печатная продукция: векторные иллюстрации для полиграфии, где важно качество при любом масштабе.
  • Картография: онлайн-карты и схемы, где требуется плавное масштабирование.
  • Технические чертежи и схемы: диаграммы архитектуры, технические иллюстрации и схемы подключения.

Преимущества и недостатки SVG

Преимущества Недостатки
Масштабирование без потери качества при любом размере Не подходит для хранения фотографий и сложных растровых изображений
Небольшой размер файла для простых изображений Файлы с очень сложной векторной графикой могут быть большими и медленно рендериться
Текстовый формат на основе XML — легко редактировать и индексировать Текстовая структура может раскрывать информацию о структуре дизайна
Поддержка анимации и интерактивности без дополнительных плагинов Сложная анимация может требовать значительных ресурсов процессора
Полная поддержка во всех современных браузерах Старые браузеры (IE 8 и ниже) имеют ограниченную или отсутствующую поддержку
SEO-дружелюбность: текст внутри SVG индексируется поисковиками Встроенные SVG могут создавать уязвимости XSS при неправильной санации
Открытый стандарт W3C, не зависит от производителя Рендеринг может незначительно отличаться в разных браузерах и приложениях

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

Существует множество программ и инструментов для просмотра и редактирования SVG-файлов:

  • Браузеры: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge — все современные браузеры открывают SVG-файлы напрямую.
  • Adobe Illustrator: профессиональный редактор векторной графики с полной поддержкой SVG.
  • Inkscape: бесплатный редактор векторной графики с открытым исходным кодом, использующий SVG как основной формат.
  • Figma: популярный онлайн-инструмент для UI/UX-дизайна с поддержкой импорта и экспорта SVG.
  • CorelDRAW: профессиональный пакет для работы с векторной графикой.
  • Affinity Designer: доступная альтернатива Adobe Illustrator с поддержкой SVG.
  • GIMP: бесплатный растровый редактор, поддерживающий открытие SVG с растеризацией.
  • Текстовые редакторы: VS Code, Notepad++, Sublime Text — для просмотра и редактирования XML-кода SVG.
  • Windows Explorer / macOS Finder: встроенные средства просмотра операционных систем поддерживают предпросмотр SVG.

Как конвертировать SVG-файлы онлайн

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

Для быстрой онлайн-конвертации без установки программ можно воспользоваться сервисом Metric Converter (metric-converter.com). Сервис поддерживает конвертацию SVG в PNG, JPG, PDF, WebP и ряд других форматов, а также обратное преобразование. Загрузка файла, выбор целевого формата и скачивание результата занимают считанные секунды — регистрация не требуется.

При конвертации SVG в растровые форматы рекомендуется заранее указать желаемое разрешение (DPI) или размеры в пикселях, чтобы получить изображение нужного качества.

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

В чём разница между SVG и PNG?

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

Можно ли использовать SVG на всех сайтах?

Да, SVG поддерживается всеми современными браузерами и может встраиваться в HTML напрямую через тег <img>, <object>, CSS-свойство background-image или непосредственно как inline-SVG внутри HTML-кода страницы. Единственное исключение — Internet Explorer 8 и более старые браузеры, для которых потребуется PNG-заглушка.

Безопасно ли открывать SVG-файлы из неизвестных источников?

С осторожностью. Поскольку SVG является XML-документом, он может содержать JavaScript-код. При открытии в браузере такой скрипт может выполниться, что создаёт риск XSS-атак. Рекомендуется открывать SVG-файлы из неизвестных источников только в специализированных редакторах (например, Inkscape) или предварительно проверять содержимое файла в текстовом редакторе.

Почему мой SVG-файл выглядит иначе в разных программах?

Разные приложения по-разному интерпретируют некоторые элементы SVG-спецификации, особенно касающиеся шрифтов, фильтров и анимации. Браузеры, как правило, следуют стандарту W3C наиболее точно. Если SVG создан в Illustrator, он может содержать нестандартные атрибуты Adobe, которые некорректно отображаются в других программах. Для максимальной совместимости рекомендуется очищать SVG от лишних метаданных с помощью инструментов вроде SVGO.