Графический формат SVG и где он применяется. Знакомство с SVG-графикой Подключение SVG-файла с помощью тега iframe
Файлы в формате SVG это файлы масштабируемой векторной графики. Если быть более точным, то это язык описания двумерной графики. Основой послужил язык разметки XML.
Данный формат обладает рядом достоинств: будучи векторными изображениями, SVG изображение сохраняет качество независимо от того, как они масштабируются или изменяются. Изображения SVG поддерживают интерактивность и анимацию. SVG является стандартом W3C, а значит имеет хорошую и качественную поддержку. Создавать SVG файлы можно не только в графических редакторах, но и в любом текстовом редакторе.
SVG-изображения, основанные на XML, доступны для поиска, индексируются и могут быть написаны в скриптах и сжаты.
Прежде чем перейти к рисованию без рисования посмотрим на структуру пустого svg файла, достаточного для отображения в любой программе.
1.
2.
3.
4.
5.
Для удобства строки пронумерованы. В первой строке находится стандартное объявление XML документа.
Вторая строка- указание DTD-схемы документа. В третьей строке задается размер создаваемого документа 600 на 600 пикселей. Первый атрибут тега
Окружность.
Для создания окружности в наш пустой svg файл добавляем строку
Атрибутами являются координаты центра окружности (cx и cy) и ее радиус (r). При этом начало координат лежит в верхнем левом углу рабочего листа. Полностью svg файл:
Будет создана окружность точно по центру документа, радиусом в 100 пикселей. Так как никаких указаний о цвете заливки, обводки, слоях и других эффектов не было, то окружность рисуется без обводки и заливается черным цветом, что и в видим, открыв документ в inkscape. Обратите внимание, что в документе не будет и слоев.
Обозначения атрибутов cx, cy и r является стандартным. Давайте зададим обводку и заливку нашей окружности, а так же зададим толщину обводки равной 6 пикселям.
fill= «green» stroke= «yellow» stroke-width= «6» />
Выбрана заливка зеленым цветом, а обводка желтым.
Что интересно, если создать слой в этом документе, то можно увидеть, что рисунок окружности будет находится не на созданном слое, а где то там? Соответствующие атрибуты выделены красным. Если необходимо создать окружность без заливки или обводки значение соответствующего атрибута устанавливаем в none
stroke= «none»
Для изменения прозрачности заливки добавляем атрибут opacity , например opacity= «0.5» уменьшает прозрачность заливки в 2 раза, а для изменения прозрачности обводки добавляем атрибут stroke-opacity , например stroke-opacity= «0.5» уменьшает прозрачность обводки в 2 раза.
Прямоугольники, квадраты.
Задание прямоугольников выглядит так
Атрибутами прямоугольника (квадрата) rect указываем координаты верхнего левого угла, а так же ширину и высоту прямоугольника. Настройки заливки и обводки выглядят так же.
Ну и в финале окружность с квадратом
Для изменения прозрачности используем уже известный подход- добавляем атрибут opacity для заливки и атрибут stroke-opacity для обводки.
Продолжение следует.
Этот пост - первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.
Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года , а с 16 августа 2011 включена в рекомендации W3C . SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.
Преимущества SVG
- Масштабирование: в отличие от растровой графики, SVG не теряет в качестве при масштабировании, поэтому ее удобно использовать для разработки под retina.
- Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.
- Стайлинг и скриптинг: при помощи CSS можно менять параметры графики на сайте, например фон, прозрачность или границы.
- Анимация и редактирование: при помощи javascript можно анимировать SVG, а также редактировать в текстовом или графическом редакторе (InkScape или Adobe Illustrator).
- Малый размер: объекты SVG весят намного меньше растровых изображений.
Основные SVG-фигуры
Согласно официальной спецификации можно рисовать простые объекты с помощью SVG: прямоугольник, окружность, линию, эллипс, ломаную линию или многоугольник при помощи тега svg .Простая линия с помощью тега line с всего двумя параметрами - точками начала (x1 и x2) и конца (y1 и y2):
Также можно добавить атрибуты или стили stroke and stroke-width, чтобы задать цвет и ширину:
Style="stroke-width:1; stroke:rgb(0,0,0);"
Ломаная линия
Синтаксис аналогичен предыдущему, используется тег polyline , атрибут points задает точки:
Прямоугольник
Вызывается тегом rect, можно добавить некоторые атрибуты:
Окружность
Вызывается тегом circle , в примере с помощью атрибута r задаем радиус, cx и cy задают координаты центра:
Эллипс
Вызывается тегом ellipse , работает аналогично circle , но можно задать два радиуса - rx и ry :
Многоугольник
Вызывается тегом polygon , многоугольник может иметь разное количество сторон:
Использование редакторов
Как видно из примеров, рисование базовых SVG-фигур - это очень просто, но объекты могут быть намного сложнее. Для таких нужно использовать редакторы векторной графики, например Adobe Illustrator или Inkscape, где можно сохранять файлы в SVG-формате, а потом редактировать в текстовом редакторе. Вставлять на страницу SVG можно с помощью embed, iframe и object:
Пример - изображение айпода с сайта OpenClipArt.org .
Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью SVG (Scalable Vector Graphic - масштабируемая векторная графика) . В соответствии со спецификацией W3.org SVG определяется как:
Язык для описания двумерной графики в XML. SVG допускает использование трех типов объектов: векторные графические формы (наппример, пути, состоящие из прямых линий и кривых), изображения и текст.
Несмотря на то, с августа 2011 года SVG включено в рекомендации W3C , данная технология практически не используется в веб проектах, хотя и имеет перед растровыми изображениями ряд преимуществ. В данной серии уроков мы представим, как работать с SVG элементами на веб страницах.
Преимущества SVG
Независимость разрешения
Растровые изображения зависят от разрешения. Графика приобретает непрезентабельный вид при изменении размеров до определенных масштабов. С векторной графикой такая ситуация невозможна в принципе, так как все представляется математическими выражениями, которые автоматически пересчитываются при измении масштаба, и качество сохраняется в любых условиях.
Уменьшение количества запросов HTTP
SVG может быть встроено непосредственно в документ HTML с помощью тега svg , поэтому браузер не нуждается в запросах для обслуживания графики. Такой подход хорошо влияет на характеристики загрузки веб сайта.
Стили и скрипты
Встраивание с помощью тега svg также позволяет легко определять стили для графики с помощью CSS. Можно изменять свойства объекта, такие как цвет фона, прозрачность, рамки и так далее. Подобным же образом можно манипулировать графикой с помощью JavaScript.
Легко редактировать и анимировать
Объекты SVG можно анимировать с помощью CSS или JavaScript. Также объекты SVG можно модифицировать с помощью текстового редактора.
Меньший размер файла
SVG имеет меньший размер файла по сравнению с растровой графикой.
Базовые формы SVG
В соответствии со спецификацией мы можем рисовать несколько базовых форм: линия, полилиния, прямоугольник, круг, эллипс. Все элементы должны быть вставлены в тег . Рассмотрим базовые элементы подробно.
Линия
Для вывода линии в SVG используется элемент
Начало отрезка определяется атрибутами x1 и y1 , а конечная точка определяется координатами в атрибутах x2 and y2 .
Также имеется два других атрибута (stroke и stroke-width) которые используются для определения цвета и ширины линии соответственно.
Данный объект похож на
Элемент
Прямоугольник выводится с помощью элемента
Для вывода круга используем элемент
Первый два атрибута cx и cy определяют координаты центра. В выше приведенном примере мы установили значение 102 для обеих координат. По умолчанию используется значение 0.
Для вывода эллипса используем элемент
Элемент
Использование редактора для векторной графики
Вывод простых объектов SVG в HTML осуществляется просто. Однако, когда сложность объекта увеличивается, подобная практика может привести к большому объему нужной работы.
Но вы можете воспользоваться любым редактором для векторной графики (например, Adobe Illustrator или Inkscape ) для создания объектов. Если вы владеете подобным инструментом, рисовать в них нужные объекты существенно проще, чем кодировать графику в теге HTML.
Можно копировать команды для векторной графики из файла в документ HTML. Или можно встраивать файл.svg с помощью одного из следующих элементов: embed , iframe и object .
Результат будет одинаковым.
Поддержка в браузерах
SVG имеет хорошую поддержку в большинстве современных браузеров , за исключением IE версии 8 и более ранних. Но задачу можно решить с помощью библиотеки JavaScript . Для облегчения работы можно воспользоваться инструментом ReadySetRaphael.com для конвертации кода SVG в формат Raphael.
Сначала загружаем и включаем библиотеку в документ HTML. Затем загружаем файл.svg , копируем и вставляем полученный код в функцию после загрузки:
В теге body размещаем следующий элемент div с идентификатором rsr .
И все готово.
В следующем уроке серии мы рассмотрим, как определять стили для объектов SVG в CSS.
Оставим за скобками вопрос о целесообразности использования SVG на сайте. Каждый сам для себя должен определить полезность этой технологии. Тем более что эта тема поднималась уже неоднократно .
Сейчас мы рассмотрим методы встраивания SVG, их плюсы и минусы, а так же возможности манипулирования элементами SVG.
Статья рассчитана в первую очередь на тех, кто до сих пор не использует векторную графику на своих сайтах, но очень хочет быть одной ногой в будущем настоящем.
Для любопытных сразу приведу сводную таблицу:
1 Можно менять цвет, размер, выравнивание и прочее стили обычного текста
2 Стили должны быть прописаны или в самом SVG файле, или подключены внешним стилем в SVG в начале файла:
По правде говоря стили прописанные внутри SVG так же будут работать и при использовании тега IMG или background-image, но в этом нет никакого смысла.
Да, из SVG можно создать иконочный шрифт, более того есть свободно распространяемые иконочные шрифты. Но есть ряд серьезных ограничений. Как и любой символ шрифта SVG иконки в шрифте не могут иметь больше одного цвета.
Вот несколько сервисов, на которых можно скачать готовые наборы иконок, или загрузить свои, и создать собственный иконочный шрифт:
Нужно учесть что при создании собственного шрифта нужно преобразовать все объекты в пути. Тэги и атрибуты которые будут пропущены: circle, rect, stroke, stroke-width, fill, fill-rule.
При использовании иконочного шрифта все элементы SVG объекта объединяются в один символ, и взаимодействовать с ним через CSS и JS можно только как с символом шрифта: менять размер при помощи font-size, менять цвет при помощи color, анимировать при помощи CSS animation или JS и прочее.
+
иконка ведет себя как символ шрифта, и все параметры настраиваются так же через CSS (размер, цвет, выравнивание и прочее);
+
единственный способ работающий в IE 8 без дополнительных манипуляций;
–
все элементы SVG файла объединяются в один символ, поэтому управлять им при помощи CSS или JS можно только как единым целым;
–
поддерживаются только одноцветные иконки;
–
при сбое загрузки шрифта у пользователя либо не отобразятся иконки совсем, либо, при совпадении кодов иконок с символами юникода, отобразятся соответстующие символы.
SVG как OBJECT
К сожалению (или к счастью) codepen и jsfiddle блокируют загрузку внешних object в целях безопасности.
Встраивание выглядит следующим образом:
Объект встраивает элмемент атрибута data наподобие iframe, добавляя внутрь себя разметку подключаемого файла, поэтому к элементам можно обращаться при помощи JS, но не совсем обычным образом:
Var object = document.getElementById("’object’"); //получаем элмент object
var svgDocument = object.contentDocument; //получаем svg элемент внутри object
var svgElement = svgDocument.getElementById("some_id_in_svg"); //получаем любой элемент внутри svg
svgElement.setAttribute("fill", "black"); //меняем атрибуты выбранного элемента
Стоит отметить что в CSS стили для SVG элементов отличаются от стандартных, полный список стилей поддерживаемых SVG можно посмотреть .
SVG ведет себя не как обычное изображение, его нельзя непропорционально трансформировать, задавая ширину и высоту. Объект внутри будет занимать максимальную площадь и центрироваться в контейнере:
Но объект можно трансформировать используя CSS например так:
Transform: scale(2, 1);
IE 8 и ниже не поддерживают SVG от слова «совсем» поэтому, если среди пользователей вашего сайта есть эта специфичная аудитория стоит озаботиться проверкой и заменой svg на растровое изображение. Сделать это можно множеством способов, например используя Modernizr добавлять.no-svg класс для body:
If (!Modernizr.svg) {
$(body).addClass(“no-svg”);
}
.no-svg .icon {
width: 100px;
height: 100px;
background-image: url(“icon.png”);
}
Плюсы и минусы такого подхода:
+
можно использовать внешний CSS файл для управления стилями;
+
+
поддерживаются интерактивные анимации;
–
Оба способа встраивания чем-то похожи на встраивание при помощи тэга object, например нельзя менять пропорции изменением ширины и высоты контейнера, но имеют больше ограничений.
Подключаемые в SVG внешние стили не будут работать, обратиться к элементам через JS так же не получится. Интерактивные анимации в SVG тоже не сработают. А проблемы с IE 8 и ниже так же остаются.
Но SVG анимации будут работать, в обоих случаях.
В случае с IMG втраивание выглядит как обычная картинка:
В случае с background-image как обычный блок:
.icon { background-image: url("icon.svg"); width: 90px; height: 150px; }
Так же при помощи background-image можно использовать спрайты, как с png изображениями, а менять размер можно при помощи background-size:
Background-size: 90px 150px;
Учитывая что процент людей c экранами device-pixel-ratio которых выше 1 и их устройства не поддерживают svg стремится к нулю(если такие вообще есть), то можно использовать медиа выражения для подключения svg, только для них, а для остальных использовать png версию:
Icon {
background-image: url("icon.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icon {
background-image: url("icon.svg");
}
}
Плюсы и минусы этих подходов:
+
поддерживаются SVG анимации и фильтры;
+
в случае с background-image можно использовать SVG спрайты;
–
нельзя менять свойства элементов SVG через CSS или JS;
–
не поддерживаются интерактивные анимации;
–
для IE 8 и ниже необходима замена на растровое изображение.
В этом варианте SVG код, получить который можно открыв любой SVG файл текстовым документом, встраивается непосредственно в код страницы.
Несомненно такая конструкция ухудшает читаемость кода, и увеличивает его объем, но открываются новые возможности.
Например имея набор иконок в SVG файле, можно использовать их повторно простой конструкцией вида:
где some_svg_element_id
id элемента внутри исходного SVG файла.
К отдельно взятому элементу можно, например, применять SVG трансформации:
Но если внутри исходного SVG к элементу была применена интерактивная анимация, например по клику, как в демо выше, то при дублировании объекта анимация будет срабатывать на всех элементах одновременно.
SVG анимации и фильтры это тема для отдельной статьи, поэтому ограничусь лишь
SVG (Scalable Vector Graphics – масштабируемая векторная графика) – стандарт векторной графики , разработанный консорциумом W3C.
SVG – это язык разметки для описания двухмерных графических приложений и изображений, входящий в подмножество расширяемого языка разметки XML. Сюда относится также ряд связанных графических скриптов.
SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов. Некоторые функции, такие как SMIL анимации и SVG Fonts распространены не так широко.
Последней версией полной спецификации является SVG 1.1.
SVG 2 находится в стадии разработки. В нее будут добавлены новые, простые в использовании функции для SVG, а также идут работы по более тесной интеграции с HTML, CSS и DOM.
Достоинства SVG
- Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать. Таким образом векторные изображения масштабируются лучше, чем растровые.
- Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
- SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
- Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
- Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
- В SVG изображение можно добавить несколько ссылок.
- К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.
Вставка SVG на Web-страницу
SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу (при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить SVG-код в файле с расширением .svg .
Итак, способы вставки SVG-изображения на Web-страницу:
- прямая вставка кода в HTML-документ в контейнере ;
- использование SVG-файла в качестве фонового изображения;
- подключение SVG-файла в HTML-документ с помощью тегов img , embed , object и iframe ;
- подключение SVG-файла в PHP-документ с помощью функции include .
1. Прямая вставка SVG-кода в Web-документ
2. Использование SVG-файла в качестве фонового изображения
3. Подключение SVG-файла с помощью тега img
