Основы svg. Знакомство с SVG-графикой. Что вы видите

Этот пост - первый из серии статей о 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-фигуры

Простая линия с помощью тега line с всего двумя параметрами - точками начала (x1 и x2) и конца (y1 и y2):

Также можно добавить атрибуты или стили stroke and stroke-width, чтобы задать цвет и ширину:

Style="stroke-width:1; stroke:rgb(0,0,0);"

Ломаная линия

Прямоугольник

Окружность

Эллипс

Многоугольник

Использование редакторов

Пример - изображение айпода с сайта OpenClipArt.org .

Этот пост - первый из серии статей о 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 поддерживается почти всеми современными браузерами за исключением Internet Explorer 8 и ниже. Но и это может быть исправлено использованием javascript-библиотеки Raphael.js . Конвертировать SVG-файл в формат этой библиотеки можно на сайте ReadySetRaphael.com.

Для начала необходимо подключить библиотеку Raphael.js на нужную страницу, затем загрузить SVG-файл, скопировать и вставить сгенерированный код в function:

Window.onload=function() { //сюда вставить код Raphael }

На странице вставить div с атрибутом rsr .

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

4. Подключение SVG-файла с помощью тега embed

5. Подключение SVG-файла с помощью тега object

6. Подключение SVG-файла с помощью тега iframe

7. Подключение SVG-файла с помощью функции include

Система координат

Размеры и координаты можно задавать в различных единицах (px, pt, pc, cm, mm, em, in). Если единицы измерения не указаны, то это пиксели.

Начало отсчета координат – это верхний левый угол экрана, т.е.

Базовые SVG-элементы

Прямая линия

Задается тегом .

Атрибуты тега

Пример

РЕЗУЛЬТАТ:

Ломаная линия

Задается тегом .

Атрибут тега

Пример

РЕЗУЛЬТАТ:

Многоугольник

Задается тегом . Всегда выводит замкнутые фигуры, автоматически проводя линию из конца последнего отрезка в начало первого.

Атрибут тега

Пример

РЕЗУЛЬТАТ:

Прямоугольник

Задается тегом .

Атрибуты тега

Пример

РЕЗУЛЬТАТ:

Круг

Задается тегом .

Атрибуты тега

Пример

РЕЗУЛЬТАТ:

Сложная траектория

Задается тегом . Является самым универсальным из SVG-элементов. Позволяет создавать произвольные фигуры. Форма фигуры задается атрибутов d , значение которого – это набор специальных команд. Эти команды могут быть и в верхнем, и в нижнем регистре. Верхний регистр указывает на то, что применяется абсолютное позиционирование, а нижний – относительное.

Команды, определяющие траекторию и направление фигурной линии

Пример

РЕЗУЛЬТАТ:

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

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

Что такое SVG?

SVG – Scalable Vector Graphics (Масштабируемая Векторная Графика) – основанный на векторе формат для веб-разработчиков. Данный тип формата стал столь популярен благодаря тому, что его изображения возможно отображать на больших разрешениях без потери качества, так как SVG – это векторный формат.

Толчок развития данной языковой разметке впервые был дан Консорциумом Всемирной паутины (World Wide Web Consortium), который был более известен в 1999 году как W3C. W3C дала понятие SVG – языковая разметка для создания двухмерных графических интерфейсов и изображений.

Использование на практике

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

SVG имеет небольшой вес по сравнению с другими форматами. У этого формата просто невероятные возможности. Флаги, символы, элементы интерфейса. И это только небольшой список того, как его можно использовать. Самый большой плюс его использования, это то что он является векторным форматом, то есть его возможно использовать на любых дисплеях – каким бы ни было их разрешение, он везде будет отображаться одинаково.

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

Несколько примеров того, где его можно использовать:

• Логотипы
• Фоновое изображение
• Использование как кнопки
• Карты
• Диаграммы или рисунки

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

Плюсы использования SVG

Так почему же стоит отказаться от привычных нам JPG или GIF в пользу SVG? Есть достаточно много причин того, почему же все таки стоит его использовать в вашем проекте.

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

Минусы использования SVG

Вы вероятно потрясены тем, сколько же у SVG плюсов. И возможно подумали, что у него нет минусов. Но нет, парочка точно есть, и вот некоторые из них:

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

Что же дальше?

Будущее SVG только начинается. Как принятый формат изображений (и стандарт) для мобильных, SVG только продолжит набирать обороты.

Файлы в формате SVG это файлы масштабируемой векторной графики. Если быть более точным, то это язык описания двумерной графики. Основой послужил язык разметки XML.
Данный формат обладает рядом достоинств: будучи векторными изображениями, SVG изображение сохраняет качество независимо от того, как они масштабируются или изменяются. Изображения SVG поддерживают интерактивность и анимацию. SVG является стандартом W3C, а значит имеет хорошую и качественную поддержку. Создавать SVG файлы можно не только в графических редакторах, но и в любом текстовом редакторе.
SVG-изображения, основанные на XML, доступны для поиска, индексируются и могут быть написаны в скриптах и сжаты.

Прежде чем перейти к рисованию без рисования посмотрим на структуру пустого svg файла, достаточного для отображения в любой программе.

1.
2.
3.
4.
5.

Для удобства строки пронумерованы. В первой строке находится стандартное объявление XML документа.
Вторая строка- указание DTD-схемы документа. В третьей строке задается размер создаваемого документа 600 на 600 пикселей. Первый атрибут тега
Если открыть в блокноте рисунок созданный в inkscape, то можно найти дополнительные теги, которые создает inkscape по умолчанию. Если же при сохранении рисунка выбрать простой svg, то структура файла будет чуть другой.
Перейдем непосредственно к созданию основных фигур. Вооружаемся блокнотом и вперед. То что сделаем проверяем в inkscape, поэтому держим его запущенным.

Окружность.

Для создания окружности в наш пустой 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 для обводки.

Продолжение следует.