Создание простых и сложных svg. Графический формат SVG и где он применяется

Векторная графика широко применяются в печатных СМИ. В веб-сайт, мы также можем добавить векторную графику SVG (Scalable Vector Graphic). Ссылаясь на официальную спецификацию на W3.org , SVG описывается как язык для описания двухмерной графики в XML. SVG позволяет создавать векторных графические фигуры (например, контур, состоящий из прямых линий и кривых), изображения и текст.

Преимущества SVG

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

Масштабируемость

Растровое изображение состоит из пикселей и при изменении масштаба теряет свое качество, в то время как векторная графика сохраняет свои пропорции независимо от масштаба.

Ускорение HTTP-запроса

SVG-файл может быть встроен непосредственно в HTML-документ при помощи тега svg , поэтому браузеру не нужно делать запрос. Это приводит к лучшей производительности и меньшей нагрузке на сайте.

Стилизация и сценарии

Вложения тега svg непосредственно в HTML-документ также позволяет нам легко установить графические стили при помощи . Мы можем изменить свойства объекта, такие как цвет фона, прозрачность границ, и т.д. Кроме того, мы также можем манипулировать графикой при помощи .

Изображения могут быть анимированы и редактируемыми

SVG-объект может быть анимирован, если использовать анимацию элемента при помощи css или JavaScript (JQuery). SVG-объект может быть отредактирован любым текстовым редактором или графическим векторным редактором, например Inkscape или Adobe Illustrator .

Меньший размер файла

SVG имеет меньший размер файла по сравнению с растровым изображением.

Создание простых фигур при помощи SVG

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

Линия

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

< /svg>

Как вы можете видеть выше, точка начала координат линии выражается с первыми двумя атрибутами x1 и x2 , а конечной точкой линии координат выражены с y1 и y2 .

Есть также два других атрибута, stroke и stroke-width , которые используются для определения цвета и ширины границы. Кроме того, мы также можем определить эти атрибуты в встроенный стиль:

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

она в конечном итоге просто делает то же самое.

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

Этот элемент похож на , но при помощи Элемента мы можем нарисовать несколько линий вместо одной. Вот пример:

"0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width ="1" stroke="rgb(0,0,0)" /> < /svg>

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

Рисование прямоугольника также просто с этим элемент. Нам нужно только указать ширину и высоту, вот так:

< /svg>

Круг

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

< /svg>

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

Эллипс

Мы можем нарисовать эллипс при помощи тега . Принцип создания такой же, как с кругом, но на этот раз мы можем контролировать x -радиус линии и y -радиус, а также rx и ry атрибуты;

< /svg>

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

При помощи элемента Мы можем сделать многосторонние формы, такие как треугольник, шестиугольник и даже прямоугольник. Вот пример:

"70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width ="1" stroke="rgb(0,0,0)" /> < /svg>

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

Как вы можете видеть, используя простые объекты SVG в HTML-документе довольно легко. Однако, когда объект становится более сложным, этот способ уже не идеален.

К счастью, как мы уже упоминали выше, мы можем использовать векторный графический редактор, например Adobe Illustrator или Inkscape .

Если вы работаете с Inkscape, вы можете сохранить ваши векторной файлы в SVG-формате, а затем открыть его в текстовом редакторе кода. Скопируйте все коды и вставлять их в ваш HTML-документ.

Вы можете вставлять.svg -файлы при помощи тегов embed , iframe и object , например;

Результат в конечном итоге будет тот же.

*В этом примере мы используем изображение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сегодня мы поговорим про 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-графике (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);"