Как вставить SVG в HTML

vladimir вс, 03/10/2013 – 18:47 HTML5

SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.

Для чего используют SVG

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

Создание SVG для дальнейшей работы

Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:

Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.

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

Самое интересное здесь то, что вы можете либо нажать ОК и сохранить файл, или нажать кнопку “SVG Code…” и откроется текстовый редактор с кодом SVG.

Оба способа могут оказаться полезными.

Используем SVG в виде тега img

Если сохранить SVG как обычный файл, то можно использовать его в обычном теге img:

В Illustrator наш холст получился 612px ✕ 502px.

Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:

Как сделать кроссбраузерный SVG

Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.

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

Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:

Если у вас нет опыта работы с Modernizr, почитайте статью “Что такое Modernizr и как с ним работать”

David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:

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

Использование SVG в качестве фона background-image

По аналогии с тегом img, SVG можно использовать в качестве фонового изображения:

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

Читать еще: Чем открыть dng формат

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

Modernizr может помочь нам здесь еще более эффективным способом, чем в случае с img. Дело в том, если заменить фоновое изображение с поддерживаемым форматом, то будет выполнен лишь один HTTP запрос вместо двух, как в случае с img. Modernizr добавляет имя класса “no-svg” к тегу HTML, если браузер не имеет поддержки SVG:

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

Использование “inline” SVG

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

Это может быть полезным, так как образ изображения приходит вместе с кодом в документ и при этом не осуществляется HTTP запрос. Другими словами, преимущества такие же, как при использовании данных Data URI. Однако, недостатки тоже есть. Из-за вставки вставки прямого кода SVG, документ начинает быть похож на большой раздутый кусок дерьма.

Также есть вариант для вставки SVG на стороне сервера:

Оптимизация SVG

Adobe Illustrator не производит по умолчанию действия по оптимизации получаемого SVG изображения. Он предоставляет DOCTYPE и заметки, и всё это по большому счёту мусор. SVG по умолчанию имеет довольно небольшой вес, но почему бы не сделать его ещё меньше? Peter Collingridge предоставил онлайн инструмент для оптимизации SVG Optimiser. С помощью этого сервиса вы можете закачать старый файл и получить оптимизированный новый.

Если хотите больше хардкора – без проблем, вот инструмент для оптимизации SVG с помощью серверного javascript Node JS tool https://github.com/svg/svgo

Стилевое оформление SVG

Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.

Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например :hover.

В SVG имеются забавные фильтры. Например размытие:

Затем вы можете при необходимости применить это в css:

Вот, что получилось:

Поддержка “inline” SVG браузерами

Список браузеров, поддерживающих данный режим отображения SVG можно посмотреть здесь http://caniuse.com/#feat=svg-html5. Опять же, поддержки нет в IE8 и Android 2.3.

Один из вариантов фолбэка для такого типа SVG:

Читать еще: Можно ли продать квартиру по доверенности

Затем снова используем Modernizr:

Использование SVG в качестве объекта object

Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:

Для кроссбраузерной поддержки используем Modernizr:

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

Data URI для SVG

Использование Data URI вялется способом уменьшения веса SVG. Mobilefish.com предоствляет онлайн инструмент оптимизации для этой цели. Достаточно вставить содержимое вашего SVG файла и заполнить форму, далее результат будет отображён в текстовом поле, который можно скопировать. Выглядит это так:

Вы можете использовать этот код где угодно! Нпример:

И кстати, если у вас есть встроенные style в SVG, который находится до base64, он будет работать, если вы используете его, как object!

Как вставить SVG в HTML

Данная рубрика заменит Вам полноценный «HTML5 учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML5.

Расширяем возможности HTML за счёт создания собственных тегов

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

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

HTML5 – глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

Создание форм с помощью Webix Framework — 4 практических примера

Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Отключение HTML5 валидации

Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.

5 устаревших фишек в HTML5

В этой статье мы рассмотрим пятёрку элементов HTML5, которые устарели и были удалены из спецификации.

Как вставить SVG иконку на сайт

Существует несколько способов, как вставить SVG иконку. Я не буду перечислять здесь все рабочие варианты, дабы не перегружать вас избыточной информацией. А остановлюсь, на двух принципиальных методах – с интерактивностью (взаимодействие с пользователем) и без неё.

Читать еще: Чем мыть варочную панель

Без поддержки интерактивности

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

// через HTML файл

С поддержкой интерактивности

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

Плюсы SVG формата

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

Как правило, SVG формат, применяют для сохранения иконок. Откуда же они берутся? Есть несколько вариантов.

создать в векторных программах
скачать бесплатно или купить

Зайдем на сайт flaticon.com и скачаем иконку автомобиля. Скачанный SVG файл, состоит из инструкций по построению прямых и кривых линий, в виде текстовой информации.

Как вставить иконку в HTML

Создадим два блока, для управления позиционированием и размерами иконки, на странице. Внутри блока с классом icon, вставим, ссылку на SVG иконку, посредством тега object.

CSS код

Разместим в центре, родительский блок с классом box.

.box <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
>

Дочерний блок с классом icon, выравниваем по центру, относительно родителя.

Как сделать SVG адаптивным

В коде файла sedan-car-front.svg, жестко заданы размеры, которые не позволят масштабировать икону.

Заменим пиксели на проценты. width=”30%” height=”30%”

Вот и все. Теперь при изменении размера экрана, размеры иконки, так же меняются.

Как изменить цвет SVG

Для изменения цвета, вместо свойства color, используют – атрибут fill. Изменить цвет, можно прямо в коде SVG, добавив, следующий код, между тегами svg.

Машина стала красной.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источники:

http://area53.ru/html5/kak-vstavit-svg-v-html.html
http://ruseller.com/lessons.php?rub=43&id=2199
http://myrusakov.ru/html-svg-icon.html

голоса

Рейтинг статьи