SVG: масштабируемая векторная графика

Масштабируемая векторная графика (SVG) — это язык разметки на основе XML для описания двухмерной векторной графики.

Таким образом, это текстовый открытый веб-стандарт для описания изображений, которые можно четко отображать в любом размере и которые специально разработаны для совместной работы с другими веб-стандартами, включая CSS, DOM, JavaScript и SMIL. По сути, SVG для графики — то же, что HTML для текста.

Изображения SVG и связанное с ними поведение задаются в текстовых файлах XML, а значит, их можно искать, индексировать, обрабатывать скриптами и сжимать. Кроме того, их можно создавать и редактировать в любом текстовом редакторе или графическом редакторе.

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

Разработкой SVG с 1999 года занимается Консорциум Всемирной паутины (W3C).

Учебные материалы

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

Знакомство с SVG с нуля

Этот материал призван объяснить внутреннее устройство SVG и содержит множество технических подробностей. Если вы просто хотите создавать красивые изображения, вам могут быть полезнее материалы на странице документации Inkscape. Еще одно хорошее введение в SVG — пособие по SVG от W3C. Также загляните в это руководство по SVG в формате адвент-календаря, которое поможет вам научиться создавать код для 25 праздничных изображений SVG.

Руководства

Руководства по SVG помогут вам работать с SVG в интернете и охватывают такие темы, как встраивание, MIME-типы (типы мультимедиа), работа со скриптами, анимация, фильтры и многое другое.

Применение эффектов SVG к содержимому HTML

Современные браузеры поддерживают использование SVG в стилях CSS для применения графических эффектов к содержимому HTML.

Типы содержимого

В SVG используется несколько типов данных. В этой статье перечислены эти типы, приведен их синтаксис и описано, для чего они предназначены.

Краткое введение в пространства имен

Пространства имен необходимы пользовательским агентам, поддерживающим несколько диалектов XML. Браузеры должны строго следовать правилам; если сейчас разобраться в пространствах имен, это избавит вас от проблем в будущем.

Скрипты

Существует несколько способов создавать и изменять SVG с помощью JavaScript. В этом документе описаны обработка событий, интерактивность и работа со встроенным содержимым SVG.

Анимация SVG с помощью SMIL

SMIL — язык на основе XML для создания интерактивных мультимедийных презентаций. Авторы могут использовать синтаксис SMIL в SVG, чтобы задавать время и расположение элементов анимации.

SVG в качестве изображения

SVG можно использовать в качестве формата изображения в HTML, CSS, некоторых элементах SVG и через Canvas API. На этой странице перечислены случаи, в которых SVG можно указать в качестве источника изображения.

Фильтры SVG

SVG поддерживает фильтры, позволяющие авторам применять такие эффекты, как тень или размытие, и даже объединять результаты разных фильтров.

Введение в SVG в HTML

В этой статье показано, как использовать встроенный SVG, и приведены примеры иллюстраций.

Справочник

Справочник по SVG содержит подробную информацию об элементах, атрибутах и интерфейсах DOM, а также список соответствующих спецификаций и документов со стандартами.

Элементы SVG

Элементы SVG, используемые для создания, отрисовки и компоновки векторной графики.

Атрибуты SVG

Атрибуты SVG, с помощью которых можно указать, как следует обрабатывать или отображать элемент.

Интерфейс SVG DOM

API SVG DOM для взаимодействия с SVG с помощью JavaScript.

Ресурсы

• Набор тестов SVG
• Валидатор разметки
• Рекомендации по созданию SVG
• Руководство по SVG
• Библиотека визуализации данных D3