HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

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

Теги title и desc

Теги title и desc повышают доступность SVG-документа:

<title>Star 1</title>

    <desc>Created with Sketch.</desc>

Эти теги могут использоваться для описания содержимого графики, когда его невозможно просмотреть. Но когда SVG-графика используется в качестве фоновой, эти теги можно убрать, чтобы уменьшить размер файла.

Тег defs

В нашем примере кода имеется пустой тег defs:

<defs></defs>

Хотя в данном примере этот элемент остался пустым, он играет весьма важную роль и используется для хранения определений любого повторно используемого содержимого, например градиентов, символов, путей и многого другого.

Элемент g

Элемент g используется для создания групп других элементов. Например, при создании SVG-изображения автомобиля тег g использован, чтобы собрать в группу все фигуры, изображающие колесо:

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-

rule="evenodd" sketch:type="MSPage">

В нашем g-теге можно увидеть повторное использование ранее определенного пространства имен редактора sketch. Оно поможет данному графическому приложению открыть эту графику еще раз, но при какой-либо привязке этого изображения никакой роли не играет.

Фигуры SVG

Самый внутренний узел в рассматриваемом примере представлен тегом много­угольника (polygon):

<polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C"

sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503994 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "></polygon>

В SVG имеется ряд уже готовых к использованию фигур (path, rect, circle, ellipse, line, polyline и polygon).

SVG-пути

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

Это важные составляющие SVG-файла, и, я надеюсь, вы хорошо себе представляете, о чем идет речь. Хотя некоторые и рады воспользоваться возможностью создания или редактирования кода SVG-файлов, все же основная масса людей склонна к созданию SVG-графики с помощью графических пакетов. Рассмотрим наиболее популярные из них.

Создание SVG-графики с помощью популярных пакетов и сервисов редактирования изображений

Хотя SVG-документы могут открываться, редактироваться и создаваться в текстовом редакторе, существует множество приложений, предлагающих графический интерфейс пользователя (Graphical User Interface (GUI)), облегчающий создание сложной SVG-графики при наличии соответствующего опыта работы по ее редактированию. Наверное, наиболее известным вариантом является использование приложения Illustrator (PC/Mac) от компании Adobe. Но для обычных пользователей у него слишком высокая цена, поэтому лично я предпочитаю приложение Sketch от Bohemian Coding (версию, предназначенную только для компьютеров Mac, можно найти по адресу http://bohemiancoding.com/sketch/). Оно само по себе недешевое (на данный момент продается по цене 99 долларов), но все же, если вы работаете на компьютере Mac, я хочу порекомендовать именно его.

Если вы пользуетесь Windows или Linux или же подыскиваете менее дорогой вариант, присмотритесь к бесплатному приложению с открытым кодом Inkscape (https://inkscape.org/en/). Конечно, это далеко не самый приятный для работы инструмент, но в нем имеются весьма впечатляющие функциональные возможности (в качестве доказательства можете просмотреть галерею Inkscape, находящуюся по адресу https://inkscape.org/en/community/gallery/).

И наконец, можно воспользоваться онлайн-редакторами. У Google есть редактор SVG-edit (http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html). Есть также редакторы Draw SVG (http://www.drawsvg.org) и Method Draw, последний из которых, возможно, является наиболее интересным средством SVG-редактирования (http://editor.method.ac/).

Экономия времени с использованием сервисов SVG-значков. Все ранее упомянутые приложения позволяют создавать SVG-графику с нуля. Но если вы интересуетесь значками, то загрузка их SVG-версий с соответствующего веб-сервиса позволит сэкономить массу времени (и, полагаю, исходя из ваших талантов, приведет к получению более качественных результатов). Лично я предпочитаю http://icomoon.io/.

Если хотите получить краткое представление о преимуществах использования веб-сервиса значков, то загруженное приложение icomoon.io предоставит вам соответствующую библиотеку с возможностью поиска (часть значков будет в свободном доступе, а за остальные придется платить).

Следует выбрать нужный значок и нажать кнопку загрузки. Получаемый в результате файл содержит значки в форматах SVG, PNG, а также SVG-символы для помещения в элемент defs (вспомним, что это контейнер элементов, предназначенных для многократного использования).

Чтобы увидеть все это своими глазами, откройте каталог example_07-02, в котором находятся файлы, полученные в результате загрузки по окончании выбора значков с сайта http://icomoon.io/.

Вставка SVG-графики в веб-страницы

В зависимости от используемого браузера с SVG-изображениями можно делать то, чего нельзя сделать с изображениями обычных форматов (JPEG, GIF, PNG). Диапазон возможностей сильно зависит от способа вставки SVG в страницу. Поэтому, прежде чем мы доберемся до возможностей SVG-графики, будут рассмотрены способы помещения ее на страницу.

Использование тега img

Наиболее простой способ использования SVG-графики совпадает со вставкой в HTML-документ любой графики. Для этого нужно воспользоваться хорошо известным тегом img:

<img src="mySconeVector.svg" alt="Amazing line art of a scone" />

При этом SVG-изображение ведет себя практически так же, как и любое другое изображение. И больше здесь сказать нечего.

Использование тега object

Тег object является контейнером, рекомендованным W3C для содержимого веб-страницы, не имеющего отношения к HTML (спецификацию на object можно найти по адресу http://www.w3.org/TR/html5/embedded-content-0.html). Мы можем воспользоваться им для вставки SVG-графики на нашу страницу:

<object data="img/svgfile.svg" type="image/svg+xml">

    <span class="fallback-info">Your browser doesn't support SVG</span>

</object>

Этому тегу требуется либо атрибут data, либо атрибут type, хотя я всегда буду рекомендовать добавление обоих атрибутов. С помощью атрибута data внешняя ссылка на SVG-ресурс осуществляется точно так же, как ссылка на любой другой ресурс. С помощью атрибута type дается описание MIME-типа (медиатипа Интернета), соответствующего содержимому. В данном случае image/svg+xml является MIME-типом, обозначающим данные в формате SVG. Если нужно ограничить размер SVG в пределах контейнера, можно также добавить атрибуты width и height.

SVG-графика, вставленная на страницу с помощью тега object, доступна также коду JavaScript, что является одним из аргументов в пользу этого способа вставки. Но дополнительным преимуществом использования тега object является предоставление им простого механизма действия в случае, если браузер не понимает типа данных. Например, если бы предыдущий элемент object просматривался в Internet Explorer 8 (в котором отсутствует поддержка SVG), то на экране просто было бы показано сообщение о том, что браузер не поддерживает SVG. Пространство, в котором обозначено сообщение, можно использовать для предоставления альтернативного изображения в теге img. Но при этом следует иметь в виду, что, по результатам моего экспресс-тестирования, браузер всегда будет загружать альтернативное изображение независимо от практической надобности в нем. Поэтому, если вы желаете, чтобы сайт загружался как можно быстрее (а я не сомневаюсь, что вы именно этого и хотите), данный вариант, наверное, будет не самым лучшим выходом из положения.

примечание

Если нужно работать с SVG-графикой, вставленной с помощью тега object, с использованием jQuery, то вам следует воспользоваться имеющимся в JavaScript свойством .contentDocument. Затем для внесения изменений, например для заполнения, можно будет воспользоваться jQuery-методом .attr.

Альтернативным вариантом может стать добавление фонового изображения с помощью CSS-свойства background-image. Например, в показанном ранее коде у нашего альтернативного span-контейнера имеется класс .fallback-info. Мы можем этим воспользоваться в CSS для ссылки на подходящее фоновое изображение. Тогда это изображение будет загружаться только в случае реальной надобности.

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

SVG-графика может использоваться в качестве фонового изображения в CSS примерно так же, как и изображение любого другого формата (PNG, JPG, GIF). В способе ссылки на него нет ничего необычного:

.item {

    background-image: url('image.svg');

}

Для устаревших браузеров, не поддерживающих SVG, может понадобиться включить альтернативное изображение в более широко поддерживаемом формате (обычно PNG). Одно из решений для Internet Explorer 8 и Android 2 (IE8 не поддерживает SVG или background-size, а Android 2.3 не поддерживает SVG и требует для background-size префикса производителя) выглядит следующим образом: