Этот урок связан с проектом Работа с SVG

Работа с SVG. Вставляем SVG на веб страницу

В этом уроке мы рассмотрим способы вставки SVG на веб страницы. Сравним различные варианты и браузерную поддержку:

Через тег <img />

Самый простой способ вставить SVG - воспользоваться тегом <img />:

<img src="assets/svg/twitter-icon.svg" alt="Twitter" style="width: 300px; height: 300px;">

Заметка: размеры изображения можно задать в самом SVG документе; Увеличивать можно до любого размера без потери качества, ведь это векторная графика. Так же, данный элемент можно оформлять через CSS.

Браузерная поддержка:

Через CSS

Так же SVG можно вставить на страницу через CSS: через свойство background-image:

header { background: url(assets/svg/columns.svg); }

Браузерная поддержка:

Если в SVG присутствует какой-то скрипт, интерактивность и ссылки, то они будут игнорированы.

Через тег SVG

В HTML5 есть возможность прямой вставки SVG через одноимённый тег:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 page with SVG Content</title>
</head>
<body>
<p>This is the markup of an ordinary HTML5 page.</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="400px" height="400px">
<path fill="#5DD7FC" d="M0.5… /> <!—SVG document
</svg>
</body>
</html>

Браузерная поддержка:

Данный способ сохраняет все скрипты, ссылки и прочий интерактив.

Через теги <object>, <iframe> и <embed>

Ещё несколько способов:

<object type="image/svg+xml" data="twitter-icon.svg">
Плохая поддержка в старых браузерах
</object>
<embed type="image/svg+xml" src="twitter-icon.svg"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<iframe src="twitter-icon.svg">
Плохая поддержка в старых браузерах
</object>

Наилучшая совместимость с IE и сохранение основных особенностей SVG.

Браузерная поддержка:

Как шрифт через @font-face

Поскольку любой шрифт это ни что иное, как набор векторных фигур, то SVG можно вставить на страницу через свойство @font-face:

@font-face {
font-family: GabbaGrabba; url('gabbagabba.otf’) format('opentype’),
url('gabbagabba.svg#gabba’) format('svg’);
}

Браузерная поддержка:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/428/Using-SVG-In-Web-Pages
Перевел: Станислав Протасевич
Урок создан: 25 Декабря 2014
Просмотров: 89646
Правила перепечатки

5 последних уроков рубрики "HTML5"

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

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

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

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

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

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

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

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

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

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

^ Наверх ^