Работа с 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.