Технически все, что нужно для создания SVG графики — это текстовый редактор, но вы будете намного счастливее, если программа для работы с графикой выполнит необходимые действия вместо вас. К счастью, в программе Adobe Illustrator при сохранении документа в раскрывающемся списке Формат (Format) можно выбрать пункт SVG (svg) и получить файл SVG!
Если у вас нет программы Illustrator, загрузите редактор изображений Inkscape, который создан специально для работы с файлами в формате SVG (inkscape.org). Он работает в операционных системах Windows, OS X и Linux. Потребуется немного времени, чтобы вы к нему привыкли, но более выгодной цены вы не найдете (он бесплатный).
Добавление SVG-файлов на страницы.
Изображения SVG можно добавить на веб-страницы с помощью элементов object, embed, или iframe. Спецификация HTML5 позволяет добавлять элементы svg напрямую, как часть HTML-документа без элемента-контейнера. На сайте W3Schools представлено неплохое краткое описание различных вариантов вложения файлов svg, а также их преимущества и недостатки: www.w3schools.com/svg/svg_inhtml.asp. Этот материал быстро меняется, поэтому я рекомендую вам провести небольшое исследование последних достижений.
На момент написания статьи элемент object, указывающий на внешний файл .svg, поддерживался браузерами лучше всего, поэтому я использую этот метод в данном примере.
Дайте формату SVG шанс и посмотрите, на что он способен.
Атрибуты width и height необходимы элементу object, чтобы зарезервировать определенное пространство под изображение. Если пространства окажется слишком мало, изображение будет обрезано. И, во избежание путаницы, рекомендуется указать тип файла (image/svg+xml), чтобы браузеры знали, что делать. Наконец, атрибут data указывает на сам файл .svg.
Дополнительные возможности формата SVG.
В нашем примере показан файл SVG, используемый для статических иллюстраций, но формат SVG обладает большими возможностями. Анимация Формат SVG включает в себя функции преобразования и перехода (те же самые, что и в CSS3), поэтому любую часть изображения SVG можно анимировать, используя только синтаксис svg.
Приведенный ниже код заставляет черный прямоугольник сокращаться и расширяться на 50% в ходе двухсекундного цикла.
Использование сценариев.
Так как все части файлов svg написаны на языке XML и являются частью DOM (структурированного набора объектов в документе), можно использовать код jаvascript, чтобы добавить рисункам в формате SVG какое-то поведение, например анимацию. Также можно использовать jаvascript для динамической отрисовки изображений на основе пользовательского ввода в режиме реального времени, например для создания диаграммы или графика, реагирующего на значения, вводимые в форму.
Использование стилей.
Вы можете изменять внешний вид элементов в изображениях SVG с помощью CSS.
Доступность.
Содержимое изображения SVG указывается в XML-файле, так что оно потенциально более доступно, чем элемент canvas, существующий в виде абстрактной сетки пикселов. Кроме того, в элемент svg можно добавить теги title и description.