Svg в вебе. Введение в масштабируемую векторную графику (SVG). !!! Важно чтобы количество точек совпадало

Привет всем, наши дорогие фанаты свободной конвертации. Сегодня у нас на рабочем столе интереснейший проект под кодовым названием Scalable Vector Graphics или кратко SVG. Почему на иностранном языке? Чтобы никто не догадался.

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

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

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

Масштабируемая векторная графика

Начнем от внешней оболочки, перейдем к внутреннему содержанию и далее, не побоимся этого слова – проникнем в самую сущность исследуемого явления.

Как вы могли слышать – графика бывает двух типов.

• Растровая.
• Векторная.

Для начала снимите очки и подведите свои глаза поближе к мерцающему компьютерному монитору.

Что вы видите?

Правильно – картинка составляется из миллионов разноцветных точечек. Это и есть растр . Поэтому такой тип графики и называется "растровым".

Переходим ко второй части эксперимента. Поверьте, вам предстоит намного более весело провести время, а может даже найти себе приключений на кой-чего.

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

Когда гости как следует разогрелись в баре и на танцполе начинаются танцы с бубнами, DJ нажимает маленькую кнопочку и небо заполняют клубы полупрозрачного глицеринового дыма.

Когда дымовал достаточно загустеет, DJ нажимает еще одну кнопочку. Запускается лазерная пушка и над головами танцующей толпы начинает плясать что-то вроде северного сияния.

Это и есть векторная графика. Лазерный луч непрерывен и рисует картины согласно заложенному в компьютерной программе алгоритму – цифровому визуальному образу.

Именно так и работает SVG – это цифровое программное описание графических образов, цветов и их поведения.

Мы не зря в качестве примера выбрали ночной клуб. Суть в том, что лазер-то создает непрерывные линии, но глицериновый дым имеет дисперсную, растровую фактуру. То есть, этот искусственный туман представляет собой взвешенные в воздухе мельчайшие капельки жидкости, от которых и отражается лазерный луч, чтобы в сетчатках наших глаз сформировались визуальные образы.

На экранах компьютеров непрерывные векторы преобразовываются в разноцветные пиксели матрицы и наш мозг по своему алгоритму формирует восприятие плавной картинки.

Технологическое решение SVG

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

Не торопитесь. Дело в том, что именно технология определяет все внешние эффекты. А теперь откроем вам страшную тайну. SVG – это родной брат языка разметки гипертекста HTML, при помощи которого верстаются сайты, красивые и динамические.

Да-да, файл графики в формате SVG представляет собой текстовый файл XML, наполненный тегами, примерно как в HTML, и данными, структурированными при помощи XML. Логически предположить, что SVG-графику можно интегрировать непосредственно в HTML-код веб-страницы, форматировать при помощи таблиц стилей CSS и даже подключать программные сценарии Javascript.

Просто запустите свое воображение (можно чашечку капучино, плиз) и попытайтесь предоставить бесконечные возможности векторной графики, генно-модифицированной тегами HTML5.

1. Во-первых, векторная графика по определению масштабируется без потерь в качестве картинки (потому что пикселей-то нет и при увеличении изображение не будет превращаться в картину художника-кубиста).
2. Во-вторых, SVG полностью совместим с веб-технологиями и поэтому становится органичной частью сайтов.
3. В-третьих, добавляя в цифровое описание картинки объекты и подключая к ним сценарии Javascript – мы делаем изображение интерактивным, то есть реагирующим на определенные действия пользователя заданными ответами.
4. В-четвертых, SVG – текстовый формат, поэтому можно оптимизировать файл под SEO без внешних мета-тегов, прямо вписывая ключевые слова в код изображения.

Исходя из этих технических спецификаций мы и выведем сферу применения SVG.

Как можно использовать SVG для пользы и выгоды

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

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

Формат SVG оптимален для небольших, зато масштабируемых и интерактивных картинок.

• Панели навигации и кнопки с анимационными эффектами.
• Логотипы, которые не теряют качества картинки при увеличении и уменьшении.
• Изображения, которые как резиновые, приспосабливаются к любому формату и разрешению компьютерного экрана. SVG незаменим для адаптивных Mobile-Friendly сайтов.

Самое полезное – SVG-графика наилучшим образом подходит для электронной коммерции.

Например, на сайте интернет-магазина размещается изображение продаваемого товара. Пользователь может нажимать на отдельные участки картинки и начинается красивая анимация, превращающая образ во что-то другое.

На этой основе можно разработать интерактивный обзор товара со всех сторон и даже изнутри.

Либо на медицинском сайте, при помощи такой графической программы можно сделать тест на беременность. Или диагностический плагин, для желающих пройти экспресс-анализ и узнать, от чего ему предстоит умирать молодым.

После того, как клиент узнает страшную тайну о своем страшном недуге, рука сама тянется кликнуть мышью по соседнему участку SVG-картинки с красной кнопкой "Купить лекарство от всех болезней". Достаточно одной таблэтки. Price$1000.

Вот какое полезное изобретение, этот SVG.

Способы конвертации в SVG

На нашем сайте мы предлагаем вам конвертацию различными методами:

А можно как-то уменьшить размер SVG?

Да! С помощью специальных программ, например SVGO , или на нашем сайте с помощью функции оптимизации SVG .

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

• очистка атрибут из новый линий и повторяющихся объектов;
• удаление описание типа документа;
• удаление XML инструкций;
• удаление комментариев;
• удаление метадаты;
• и другие элементы информации.

Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью 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) которые используются для определения цвета и ширины линии соответственно.

Данный объект похож на , но с помощью элемента Можно рисовать несколько линий сразу.

Элемент Содержит атрибут points , который используется для указания координаты точек.

Прямоугольник выводится с помощью элемента . Нужно определить ширину и высоту.

Для вывода круга используем элемент . В следующем примере мы создаем круг с радиусом 100 , который определяется в атрибуте r:

Первый два атрибута cx и cy определяют координаты центра. В выше приведенном примере мы установили значение 102 для обеих координат. По умолчанию используется значение 0.

Для вывода эллипса используем элемент . Он работает так же, как и круг, но мы можем специально задавать радиусы по оси x и y с помощью атрибутов rx и ry:

Элемент Выводит многогранные фигуры, такие как треугольник, шестиугольник и прочее. Например:

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

Вывод простых объектов 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 (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 и как его использовать .

SVG(Scalable Vector Graphic) - это язык для описания двумерной графики, основанный на XML . Данная технология постепенно набирает обороты, а связано это вот с чем:

• При изменении масштаба svg фигуры всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации
• Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается
• Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript
• Можно редактировать или анимировать с помощью CSS и JavaScript
• Меньший размер

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

Для начала стоит отметить, что все наши фигуры должны быть в теге svg , а теперь давайте нарисуем линию . Для отображения линии служит тег line , который имеет следующие атрибуты:

• x1 - Начальная x координата
• x2 - Конечная x координата
• y1 - Начальная y координата
• y2 - Конечная y координата
• stroke-width - Ширина линии
• stroke - Цвет линии

Но что, если нам нужно нарисовать сразу несколько линий ? Использовать несколько тегов line было бы не очень красиво. Для этого существует тег polyline .

У тега polyline есть атрибут points , где мы указываем координаты x и y через запятую, затем делаем пробел и пишем координаты следующей точки и так далее. Заметьте, что тут есть атрибут fill , в котором мы можем указать цвет в любом из форматов css , которым будет залито пространство между линиями. Если же вы хотите, чтобы пространство между линиями было пустым, то укажите значение none .

Перейдём к более сложным фигурам и нарисуем прямоугольник .

Для того, чтобы нарисовать прямоугольник, нужно использовать тег rect , где в атрибутах width и height указать ширину и высоту соотвественно, а остальные атрибуты вам уже знакомы и выполняют абсолютно те же функции, что и с линиями.

Для отрисовки круга служит тег circle и атрибуты cx , cy и r для задания координат центра круга и его радиуса .

Другой элемент - эллипс рисуется точно так же, как и круг, но там мы можем сами задавать радиусы по оси x и по оси y . Для его отрисовки служит тег ellipse

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

Атрибут points у тега polygon работает так же, как и атрибут points у тега polyline .

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

SVG поддерживается IE c 9 версии, Mozilla Firefox с 1.5 , Google Chrome с 3.0 и оперой с 8.0 .

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

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