Графика в SVG

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

Особенности

Плюсы:
  • Размер. Как правило, иконки, шрифты, градиенты, схемы в векторе занимают меньше места, чем в растре;
  • Гибкость. Векторную графику гораздо легче редактировать, чем растровую;
  • Масштабируемость. Наглядно.
Минусы:
  • Ограничения векторной графики. Например, сомнительно использование svg для отображения пейзажа. Во-первых, могут возникнуть проблемы с переводом из растра в вектор, а во-вторых, очень быстро увеличивается размер файла и скорость его отрисовки браузером, если он состоит из большого количества мелких деталей;
  • Отсутствие поддержки старых браузеров. Данный минус легко обходится при помощи дублирования svg картинок растровыми, специально для недобраузеров.

Для работы с svg идеально подходит  Adobe Illustrator.

Варианты использования на сайте

Через <object>
<object type="image/svg+xml" data="image.svg">
  <img src="image.png">
</object>

Отличный вариант, который сразу включает в себя тег <img>, к которому перейдёт браузер не понимающий тег <object>.

Также этот вариант прекрасно работает с кешированием и имеет самую большую поддержку браузерами.

Минус — стили будут работать только внутри SVG файла.

Через <iframe>
<iframe src="image.svg">
  <img src="image.png">
</iframe>

Неплохой вариант, если нужно отделить SVG код от кода страницы.

Через <img>
<img src="image.svg">

Недостатки — отсутствует поддержка в старых браузерах, нет возможности использовать интерактивность (например, анимацию или ссылки) внутри SVG файла, кроме того некоторые браузеры не используют стили, которые определены в отдельном файле.

inline SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Embedded SVG</title>
</head>
<body>
<h1>Embedded SVG</h1>
 
<!-- SVG code -->
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" font-size="30">My SVG</text>
</svg>
 
</body>
</html>

Такой вариант возможен для небольших SVG изображений, т.к. «засоряет» HTML код страницы (банально, станет сложнее в нём ориентироваться), а также не поддерживает кэширование.

Как фоновое изображение
.AnyElement {
    background-image: url(image.svg);
}

Как и при использовании тега <img> SVG станет обычным статичным изображением, любая интерактивность в котором будет отключена.

Структура

Синтаксис
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

В некоторых случаях содержание объявления DOCTYPE может быть источником ошибок в Firefox. В этом случае можно использовать такой код:

<!DOCTYPE svg [ 
    <!-- опционально -->   ]>

Далее идет корневой тег, описывающий свойства SVG:

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="100%" height="100%">

После него располагаются теги, непосредственно описывающие элементы, находящиеся в файле.

Примеры фигур внутри тега <svg>:

<rect x="0" y="0" width="400" height="400" fill="none" stroke="black" stroke-width="5px"/>
<circle cx="200px" cy="200px" r="104px" fill="blue" />
<polygon points="99 154 40 185 51 119 4 73 69 64 99 3 128 64 194 73 147 119 158 185 "></polygon>

Стили можно применять, как внутри SVG файла, назначив id и class элементам (стили писать внутри тега <defs> который в свою очередь должен быть вложен в <svg>), так и вынести в отдельный файл, подключив файл стилей:

<?xml-stylesheet type="text/css" href="style-svg.css"?>

Завершается документ всегда закрытием корневого тега </svg>.

Как сохранять

В Adobe Illustrator лучше через Файл → Сохранить как…, чем через Файл → Экспорт. Будет такое окно:

Стили SVG

SVG 1.1 наиболее оптимален для web.

Шрифты

Чаще всего преобразуются в контур, но при значительном объеме текста лучше поставить тип SVG (в этом случае обычно применяются уже использующиеся на сайте шрифты, чтобы не подгружать новые).

Дополнительные параметры

В свойствах таблиц CSS вариант «Элементы стилей» предпочтителен, т.к. обеспечивает наиболее удобную работу со стилями в последствии.

Для простых значков обычно хватает качества «2», а если иллюстрация заметно исказилась, то стоит задуматься о правильности выбора формата — возможно, в данном случае лучше использовать растровую графику.