Введение

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

SVG является рекомендацией W3C (то есть, стандартом), и явно спроектирован для работы с другими стандартами W3C, такими, как CSS и DOM.

Простейший код SVG рисунка выглядит следующим образом

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="4in" height="3in">

<g>

<title>Заголовок svg картинки</title>

<desc>

Описание svg файла.

</desc>

<!-- Тут должен располагаться код графики -->

</g>

</svg>

В нем присутствует свой DOCTYPE, так же должен быть открывающий и закрывающий тег svg, а учитывая, что фактически это код XML то любой тег должен закрываться. Можно заметить, что мы задали размеры для svg элемента атрибутами width и height, они в нашем случае равны 4 дюйма ширины и 3 дюйма высоты, но большинстве случаев размеры задаются в пикселях, обозначение которых по умолчанию опускается и оставляют только число. В дальнейшем мы будем использовать именно пиксели и почти всегда будем указывать размеры svg элемента, иначе некоторые браузеры просто не будут их отображать. Внутри тега svg располагается непосредственно сам код рисунка, а так же два дополнительных тега, title заголовок рисунка некий аналог атрибута alt тега img и тег desc в который можно записать текстовое описание картинки. Эти два тега не являются обязательными, но желательны для сложных иллюстраций. Они визуально не отображается, а текст из тега title браузер должен показывать в тултипе при наведении мышкой на картинку.

В чем же преимущества SVG и, что обеспечило ему популярность:

1. Масштабирование: в отличие от растровой графики, SVG не теряет в качестве при масштабировании, поэтому ее удобно использовать для разработки под retina.
2. Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.
3. Стайлинг и скриптинг: при помощи CSS можно менять параметры графики на сайте, например фон, прозрачность или границы.
4. Анимация и редактирование: при помощи javascript можно анимировать SVG, а также редактировать в текстовом или графическом редакторе (InkScape или Adobe Illustrator).
5. Малый размер: объекты SVG зачастую весят намного меньше растровых изображений.