Использование SVG. Что дизайнеру нужно знать о SVG: за и против

Подготовил: Евгений Рыжков Дата публикации: 27.08.2010

Последнее обновление: 17.11.2010

Задача

Отобразить SVG-изображение на HTML-странице.

Существует несколько способов это сделать, но не все из них кроссбраузерны.

SVG через iframe

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

SVG через object

Имеем: валидный чистый код, альтернативный текст, где можно снабдить пользователя инструкцией, что делать, если он не видит картинки (например, отправить на сайт нормального браузера или дать ссылку на плагин, установка которого ему поможет). Такое внедрение поддерживает прозрачность в SVG изображении (правда в IE тут проблема: прозрачные участки будут залиты белым). Из минусов: нет возможности влиять на изображения внешними скриптами (из HTML), только теми, которые находятся в самом SVG-файле.

Метод хорош для фоновых изображений или каких либо статичных картинок.

SVG через embed

Такой способ якобы позволяет взаимодействовать скриптам в HTML с содержимым SVG-файла (мне пока такого добиться не удалось). Для IE имеет атрибут wmode (), который поможет корректно отобразить прозрачные участки SVG-изображения. Атрибут pluginpage должен отправить пользователя, браузер которого не поддерживает SVG, на страницу плагина, который ему поможет. В реальности в чистом виде толку о этого атрибута ноль. Именно такой вариант рекомендует Adobe для корректной работы из SVG Viewer. Такой способ валидацию не пройдет.

Этот способ сейчас пользуется большой популярностью.

SVG в HTML коде

XHTML + SVG

следует обратить внимание на используемое пространство имен: xmlns:svg="http://www.w3.org/2000/svg"> ;
документ должен быть именно в xhtml формате (локально — это файл с расширением.xhtml)
с кроссбраузерностью у этого метода плохо. Особенно плоха реакция IE;
html код становится нереально грязным.

Сейчас этот метод лучше не использовать.

Заметка

IE, включая версии 8, не поддерживает SVG. В то время Microsoft активно продвигал свой формат — VML. Потому с этим браузером придется повозиться, чтобы увидеть и там SVG-изображение (об этом подробней в следующих статьях).

Светлое будущее

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

Поддержка масштабируемой векторной графики (SVG) превосходна работает во всех современных браузерах, формат изображения появляется в удивительных контекстах на многих различных веб-страницах. Но несмотря на то, что в течение почти двух десятилетий он был стандартом, SVG остается несколько новым форматом для некоторых дизайнеров и разработчиков, оставляя их в замешательстве относительно того, как он должен использоваться на сайте. Вот, некоторые причины, почему вы должны использовать SVG:

Крошечный размер файла

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

Масштабируемость

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

Взаимодействует с DOM

SVG иногда упоминается как «рисование с разметкой»: каждый элемент в SVG-изображении взаимодействует с DOM, это означает, что CSS и JavaScript могут манипулировать части SVG-документа. В отличие от растровой графики, каждая отдельная форма в SVG может иметь свой собственный идентификатор или класс.

Легко модифицировать и адаптировать

Качество компонентов SVG означает, что хорошо сформированные документы SVG можно легко модифицировать в любом текстовом редакторе без необходимости использования специализированных программ, требуемых для растровых изображений. И поскольку SVG взаимодействует с DOM, его элементы могут быть изменены с помощью CSS. Формат SVG отлично подойдет для отображения:

логотипов

иллюстраций и чертежей

Инструменты для работы с SVG

Хотя вы можете создать документ SVG с помощью любого текстового редактора, программы для векторной иллюстрации, например Adobe Illustrator или Inkscape, как правило, является лучшим выбором (хотя следует отметить, что другие приложения, включая 3D-программы, такие как Blender и серверные приложения, могут экспортировать SVG).

Независимо от того, что вы используете, вы должны знать, что создание SVG из приложений по-прежнему иногда оставляет желать лучшего: результирующий документ часто перекодирован и иногда плохо отформатирован. Файл.svg можно сделать меньшим, более компактным, обработав его с помощью оптимизатора, такого как SVGOMG . Иногда передача неверного документа.svg через валидатор W3C может помочь вам выявить проблемы.

Интеграция SVG

Существует три основных способа, которыми SVG можно использовать непосредственно на веб-странице:

Поскольку SVG основан на XML, его можно напрямую интегрировать в код на вашу страницу. SVG-код уменьшает время ожидания и общее время загрузки вашей страницы.

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

Вставляется как