Формат картинки svg что это
Что такое SVG-графика и зачем она нужна
Простая рисовалка на CSS.
Недавно мы рассказывали о том, чем отличается растровая графика от векторной. Если коротко: растровая графика фотореалистичная, состоит из точек, но её нельзя увеличивать бесконечно без потери качества. Векторная графика работает наоборот: она подходит не для фотографий, а больше для простых рисунков, но её можно увеличивать как угодно и качество останется идеальным.
Сегодня поговорим о том, как рисовать векторную графику в вебе стандартными средствами HTML.
Что такое и зачем нужно SVG
SVG расшифровывается как scalable vector graphics, «масштабируемая векторная графика». Это значит, перед нами векторное изображение, которое можно масштабировать без потери качества.
SVG — это не единственный формат векторной графики, есть много других. Но именно SVG используют на веб-страницах и в HTML-коде. Его инструкции оптимизированы для веб-разработки, и отрисовка происходит прямо в браузере. И, самое главное, все команды SVG представлены в виде текста и координат, а не в виде отдельных файлов. Это значит, что SVG-изображение можно зашить прямо в код веб-страницы, что иногда бывает незаменимо.
SVG используется в вебе для отрисовки:
Как использовать SVG на странице
Например, мы можем поставить на странице любой заголовок, а потом прямо поверх него нарисовать пару зелёных кругов и красную линию:
Теперь давайте разберёмся, как это у нас получилось и что для этого нужно.
Линия
Линия — самый простой элемент SVG-графики. Чтобы нарисовать линию, нам нужно знать:
Соберём всё вместе:
Чтобы нарисовать зелёный круг с жирной фиолетовой обводкой, зададим такие параметры:
Соберём вместе, добавим второй круг и тоже положим это внутрь тега :
Прямоугольник
С прямоугольниками тоже всё просто — указываем размеры, цвет заливки, а также цвет и толщину контура:
Минус стандартного прямоугольника в том, что он всегда рисуется от точки с координатами (0,0). Если прямоугольник нужен в другом месте, используют многоугольник.
Многоугольник
Многоугольник — это фигура, которая получается так:
Например, вот что нужно, чтобы нарисовать синий треугольник:
Как видите, многоугольник позволяет располагать любые фигуры в любом месте страницы.
Продвинутый уровень
Теперь добавим заголовок, чтобы получить картинку как в начале статьи. Пишем после тега тег
Привет, это журнал Код!
Так как наш тег с заголовком первого уровня написан ниже тега с графикой, то браузер и разместил заголовок ниже картинок. Чтобы графика легла сверху текста, нужно пойти на хитрость:
Добавим это в стили и соберём полную страницу:
Внешние SVG-файлы
Инструкции SVG можно упаковывать во внешние файлы и подключать как обычные изображения. Например, вы нарисовали красивую иконку в векторном редакторе, сделали экспорт в формат SVG и подключили к странице как обычное изображение. Браузер поймёт инструкции и нарисует ваше изображение красиво и плавно, какого бы размера оно ни было.
Это особенно полезно на мониторах высокого разрешения и на мобилках: например, если вам на сайте нужны какие-то иконки, вы можете подключить их как SVG-файлы, и браузер отрисует их корректно хоть на retina-дисплеях, хоть на старых Full-HD мониторах.
Если хотите попробовать, скачайте любую из иконок Чикина и добавьте на сайт через тег — увидите, как это красиво. Не забудьте указать width и height, чтобы векторная картинка знала, в каком размере отрисовываться.
Что дальше
Мы разобрали только самые основы SVG-графики. Дальше будем делать красивую SVG-анимацию, рисовать логотипы и работать с векторной графикой на продвинутом уровне. Подпишитесь на нашу рассылку, чтобы не пропустить новые выпуски.
Знакомство с SVG-графикой
Этот пост — первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.
Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.
Преимущества SVG
Основные SVG-фигуры
Согласно официальной спецификации можно рисовать простые объекты с помощью SVG: прямоугольник, окружность, линию, эллипс, ломаную линию или многоугольник при помощи тега svg.
Простая линия с помощью тега line с всего двумя параметрами — точками начала (x1 и x2) и конца (y1 и y2):
Также можно добавить атрибуты или стили stroke and stroke-width, чтобы задать цвет и ширину:
Ломаная линия
Синтаксис аналогичен предыдущему, используется тег 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:
На странице вставить div с атрибутом rsr:
Заключение
Вот и все основы SVG, в следующих статьях будут разобраны более сложные примеры использования векторной графики.
Формат SVG
SVG (Scalable Vector Graphics — масштабируемая векторная графика) — графический формат файлов, применяемый в веб-дизайне для векторных изображений.
Содержание
Описание формата SVG
SVG-файлы содержат XML-разметку, описывающую векторные изображения, а именно все его детали в виде геометрических примитивов (линий, кругов, прямоугольников и т. д.) с указанием их размеров, координат и другой необходимой информации.
Пример
Рассмотрим следующий пример векторного изображения в формате SVG :
На изображении описаны всего 5 геометрических фигур: 2 круга разных диаметров по центру и 3 прямоугольника. «Вес» изображения составляет всего 349 байт. Код файла выглядит следующим обрахом:
SVG-теги
Для описания элементов векторной графики в SVG применяются обусловленные спецификацией XML-теги:
Атрибуты тегов
Для описания свойств объектов векторного изображения в SVG-тегах применяется множество атрибутов. Вот некоторые из них:
Width Определяет ширину объекта. Height Определяет высоту объекта. Fill Определяет цвет заливки фигуры. Stroke Определяет цвет обводки фигуры.
Как создать SVG-картинку?
Можно выделить следующие способы создания векторных изображений в формате SVG :
Создание вручную
При условии знании языка разметки SVG нарисовать простейшую фигуру в текстовом редакторе не составит труда, хотя более сложные изображения так не делаются.
Графические редакторы
Естественно, что перечисленные графические редакторы сами генерируют SVG-разметку при сохранении файла, не предоставляя пользователю возможность редактировать код в своём графическом интерфейсе.
SVG-изображения, созданные в графических редакторах, содержат много лишней мета-информации, которую можно удалить вручную для уменьшения размера файла.
Веб-приложения
Для создания, редактирования и сохранения SVG-рисунков также применяются онлайн-инструменты. Их функционал достаточно в сравнении с десктопными графическими редакторами, но для простейших рисунков они применимы:
Method Draw Простой в освоении и приятный глазу редактор, к тому же позволяющий редактировать SVG-код в интерфейсе. SVG Editor Более сложный в освоении редактор с непривычным интерфейсом и ограничениями в доступе.
Как реализовать SVG-анимацию?
Формат SVG предоставляет веб-дизайнерам огромные возможности в реализации статичных и интерактивных анимированных изображений для сайтов.
SVG-анимация посредством CSS (3,9 КБ)
Анимированные SVG-картинки во всём превосходят растровые GIF-аналоги: размер файла может быть меньше в десятки, сотни и даже тысячи раз, нет ограничений в глубине цвета, можно применять полупрозрачность и обеспечивать интерактивность, а чтобы создать анимацию вовсе не надо быть художником.
Реализовать анимацию в SVG можно 3-мя способами:
С помощью CSS3 Этот вариант предполагает манипулирование геометрическими примитивами с помощью внутренних или внешних CSS-свойств анимации. С помощью JS Геометрическими примитивами в SVG также можно манипулировать посредством JavaScript. С помощью SMIL Этот способ предполагает реализацию анимации с помощью специальных внутренних тегов в SVG-коде.
Наиболее простым и не требующим знаний в JS-программировании и SMIL-анимации можно считать анимацию посредством CSS. Для создания сложных SVG-анимаций, требующих определённых математических расчетов, существуют специальные JS-плагины и отдельные скрипты.
Как вставить SVG на сайт?
Векторные SVG-картинки могут быть внедрены в HTML-код посредством:
| Особенность | inline | object | img | CSS |
|---|---|---|---|---|
| Отсутствие запроса к серверу | + | — | — | — |
| Кэширование в браузере | — | + | + | + |
| Встроенные CSS-свойства | + | + | + | + |
| Внешние CSS-свойства | + | — | — | — |
| JS-манипулирование | + | + | — | — |
| Встроенная анимация | + | + | + | + |
| Интерактивная анимация | + | + | — | — |
Вставка через тег img
Данный способ применим для вставки SVG на сайт в качестве статичного или анимированного изображения без интерактивности.
Недостатки метода
Вставка через тег object
Данный способ вставки SVG является наиболее предпочтительным в большинстве случаев.
Недостатки метода
Вставка через CSS
Для применения SVG-картинки в качестве фона HTML-элемента применяются CSS-свойства background или background-image :
Недостатки метода
Непосредственное внедрение SVG в HTML
Таким образом можно вставлять небольшие SVG-картинки. Для больших изображений целесообразно подключать отдельный файл, который будет кэшироваться браузером.
Недостатки метода
Сколько «весят» SVG-файлы?
Сравнение размеров файлов SVG и PNG
Размер SVG-файлов (вес изображений), в отличие от растровых картинок, не зависит от размера в пикселях, но зависит от объёма кода. Для изображений большого размера преимущества формата SVG очевидны:
Оптимизированный SVG: 893 Б не зависимо от размера
Оптимизированный PNG-8 800×160px: 1.83 КБ
Оптимизированный PNG-8 600×120px: 1.4 КБ
Оптимизированный PNG-8 400×80px: 1.07 КБ
Оптимизированный PNG-8 200×40px: 670 Б
Все представленные PNG-файлы максимально сжаты и используют всего 16 цветов в палитре, при этом код SVG-файла максимально сокращён, но с использованием GZIP на стороне сервера «вес» будет составлять всего 468 Байт. Можно предположить, что SVG во всех случаях выигрывает у растровых изображений в отношении размера файла, но это не всегда так и за
Из всего этого можно сделать следующий вывод:
SVG целесообразно использовать для изображений, не требующих большого количества геометрических объектов для отрисовки.
Оптимизация SVG-кода
Объём SVG-кода можно уменьшить путём оптимизации:
Веб-приложение SVGOMG позволяет оптимизировать SVG-картинки онлайн, при этом предоставляя всю необходимую информацию в своём интерфейсе: можно контролировать изменение веса файла в процентном соотношении, изменяя те или иные опции, а также видеть, отражается ли применение настроек на самом изображении:
Сжатие SVG-данных
Как и все текстовые данные, SVG-код может быть сжат алгоритмом GZIP. При активации на сервере алгоритм обеспечивает передачу данных от сервера браузеру в сжатом виде.
Конвертация SVG в другие форматы и обратно
Конвертация растрового изображения в SVG-формат сопровождается трассировкой (векторизацией) и редко используется, а конвертация из SVG в растровый формат применяется намного чаще.
Как конвертировать в SVG?
Трассировка — процесс векторизации растрового изображения путём образования векторных контуров.
Необходимо понимать, что трассировка не может абсолютно точно преобразовать растровое изображение в векторный формат:
Результат трассировки зависит от многих особенностей исходного растрового изображения:
Как конвертировать из SVG?
Процесс растеризации векторных изображений можно наблюдать в Photoshop или другом редакторе растровых изображений: при открытии векторного файла будет предложено его растрировать в определённом размере, после чего картинку можно сохранить в любом доступном растровом формате.
Преимущества формата SVG
Формат SVG имеет все преимущества векторной графики, а также ряд других преимуществ относительно растровых форматов изображений, применяемых в веб-дизайне:
SVG-картинки не теряют в качестве детализации при увеличении или уменьшении их размера в пикселях.
Огромное преимущество перед растровыми форматами: SVG-картинки можно увеличивать или уменьшать во сколько угодно раз, при этом размер файла остаётся неизменным.
Возможности анимации SVG-изображений во много раз превосходят возможности GIF-анимации.
Для любого элемента SVG-картинки могут быть заданы CSS-свойства.
SVG использует все возможности браузеров.
В SVG-код можно подключать ссылки на растровые изображения, или внедрять их в виде base64.
Текст в SVG-изображении может быть преобразован в контуры, но можно использовать его посредством шрифта.
GZIP-сжатие и оптимизация кода может существенно уменьшить вес SVG-картинок без потерь в качестве отрисовки.
Недостатки формата SVG
Векторная графика не позволяет реализовать реалистичные цветовые переходы.
Сложность картинки пропорциональна количеству геометрических примитивов, а значит и «весу» SVG-изображения.
Рекомендации по применению формата
На основании вышеизложенного материала можно сделать выводы относительно применения векторных SVG-изображений на веб-сайтах:
Часто задаваемые вопросы
Как создать (сохранить) SVG-файл?
Чем открыть файл в формате SVG?
Открыть SVG-файл можно в современных интернет-обозревателей (браузеров) для просмотра, а также в популярных редакторах векторной (CorelDRAW, Illustrator) и растровой (Photoshop) графики для редактирования и конвертации.
Как сохранить (скачать) SVG-изображение с сайта?
Сохранить SVG-файл с сайта можно различными способами в зависимости от того, как он вставлен в HTML.
В иных случаях нужно искать URL SVG-файла в HTML- или CSS-коде, открывать его в новом окне браузера и сохранять, применяя функцию «Сохранить как. ».
Как вставить SVG на сайт?
Как сохранить SVG в Photoshop?
Photoshop не предоставляет возможность сохранения изображений в этом формате. SVG — формат векторной графики. Для сохранения в этом формате применяются соответствующие программы (Illustrator, CorelDRAW).
Как сохранить SVG в Illustrator?
Чтобы сохранить картинку в формате SVG в Illustrator:
Как сжать (уменьшить) размер SVG-файла?
Как конвертировать JPG в SVG?
Как конвертировать SVG в JPEG?
Почему SVG не отображается на сайте?
Как правило, SVG не отображается на сайте из-за ошибок в коде файла или неправильной вставки в HTML-код Вставка SVG на сайт.
Что дизайнеру нужно знать о SVG: за и против
Ранее в нашем блоге мы поднимали тему создания качественных веб-интерфейсов, в частности в одном из предыдущих топиков рассматривался вопрос правильного использования анимаций. В сегодняшнем материале речь пойдёт о технологии SVG, принципах работы с этой технологией, её плюсах и минусах. Кроме того, мы поинтересовались у отечественных дизайнеров, применяют ли они SVG, и если нет, то почему.
Очень коротко: что такое SVG
SVG (Scalable Vector Graphics) — язык разметки векторной графики, созданный W3C, подмножество языка XML. Предназначен для описания векторной и смешанной (векторно-растровой) двухмерной графики, поддерживает анимацию и интерактивность. В 2001 году вышла версия 1.0, в 2011 — версия 1.1, актуальная ныне. Поддержка браузерами хорошая, но есть нюансы в IE, пикселизация при увеличении в Opera Mini и Opera Mobile 12.1.
Плюсы и сложности применения SVG
Прежде чем начать рассматривать вопрос о том, как дизайнеры могут использовать в своей работе SVG, следует сделать небольшое логическое отступление и поговорить об этой профессии подробнее. На наш взгляд, сложившееся в ИТ-отрасли разделение на веб-дизайнеров и верстальщиков, не всегда соответствует реалиям создания веб-проектов.
Создать не просто красивый, но действительно хороший дизайн веб-страницы без понимания того, как эта страница будет загружаться, показываться в браузере, адаптироваться к размерам вьюпорта, меняться при модификации контента, просто невозможно. Исходя из этого, можно сказать, что веб-дизайнер — это техническая специальность (возможно, суть этой работы лучше передаёт термин «веб-инженер»), по большей части подразумевающая использование логики и знаний, и лишь малой толикой которой является художественное творчество. Иными словами, плох тот веб-дизайнер, который совсем не умеет верстать.
Разобравшись с тем, кем на самом деле является современный дизайнер, мы можем переходить к обсуждению плюсов, которые такие специалисты могут извлечь из использования технологии SVG. Вкратце, её применение помогает увеличить скорость и качество работы: дизайнеру приходится выполнять меньше действий самому, что уменьшает затраты времени на различных этапах создания проекта.
Рассмотрим список плюсов SVG подробнее:
SVG легко модифицируется (причём, как в графическом редакторе, так и на самой странице средствами CSS). Поменять расположение, форму, размер, пропорции, цвет, заливку и все прочие свойства составляющих частей изображения проще, чем в случае с растровой графикой. При работе с растром придётся хранить «исходник» в формате со слоями, все изменения делать в нём, экспортировать. С SVG обычно необходимости в «исходнике» просто нет.
Для экранов с повышенной плотностью пикселей достаточно одного изображения. В случае с растровой графикой на данный момент (весна 2015 г.) нужно, минимум, три (!) версии картинки: 100% макетного размера, 200% и 300%. В случае использования SVG, достаточно одной версии — как и для любого векторного формата, пиксели, нужные для показа изображения, «возникают» непосредственно перед показом, исходя из необходимого пиксельного размера.
SVG быстро загружается. Да-да, ведь, как мы выяснили выше, дизайнеры должны думать и о скорости загрузки страницы тоже, ведь чем больше времени проходит от отправки запроса до показа страницы, тем ниже конверсия проекта. Во-первых, SVG-файлы, как правило, имеют меньший размер файла, чем их растровые версии (исключения составляют изображения малого пиксельного размера и сложные векторные изображения со множеством форм). Во-вторых, в один SVG-файл можно добавить несколько версий изображения и показывать их по определённым условиям (уменьшение количества запросов к серверу). В-третьих, в SVG можно использовать «клонирование» — единожды прописать форму (градиент, текстуру) и многократно использовать её, ссылаясь на оригинал. Есть, правда, и минус: отрисовка SVG в браузере чуть медленнее, чем показ растрового изображения, но чтобы заметить эту разницу, нужно сравнивать большие и сложные изображения.
SVG легко сделать адаптивным. В том случае, когда необходимо на узких вьюпортах показывать логотип сайта в упрощённом варианте, SVG позволяет добиться этого всего за один запрос к серверу.
SVG может быть интерактивным. Внутри изображения могут быть ссылки, скрипты, интерактивные части могут реагировать на наведение и другие действия пользователя, можно добавить анимацию.
Свободно распространяемое ПО. Для работы с SVG не обязательно использовать Adobe Illustrator (как стандарт в мире векторной графики), достаточно свободно распространяемого Inkscape. Есть и ряд других инструментов.
Несмотря на перечисленные плюсы формата SVG, далеко не все дизайнеры используют его в своих проектах. О причинах сложившейся ситуации мы поинтересовались у известных российских экспертов в области дизайна и проектирования интерфейсов:
Юрий Ветров, руководитель отдела проектирования и дизайна Mail.Ru
Простой ответ — дизайнеру мало научиться готовить SVG, нужно чтобы разработчики могли его использовать в продукте, а это не так-то просто, нужно менять многое в технологических решениях. Во-вторых, сам процесс работы с вектором нужно оптимизировать, чтобы SVG было комфортно экспортировать из использующихся графических редакторов. Т.е. каких-то предубеждений нет, просто надо значительно перестраивать процесс работы, а явных выхлопов для бизнеса это особых не даёт. Т.е. это инфраструктурная задача, которая в меньшем приоритете всегда. Все, конечно, перейдут на него со временем, но проблемы примерно как описал выше.
Денис Кортунов, UX-директор Acronis
Это вопрос не совсем к дизайнерам, но к веб-технологам или фронтенд-разработчикам. Сейчас немало дизайнеров изначально делают дизайн в векторе, и нет никакой проблемы представлять графику в виде SVG. Основная проблема — совместимость с разными браузерами. Такие картинки зачастую просто не отображаются и нужно много «танцев с бубнами». Распространённая альтернатива SVG — использование шрифтов. Это «хак», позволяющий использовать векторные изображения в вебе.
Вообще, в современном вебе есть проблема — нужен простой и универсальный формат для отображения векторных изображений на страницах. Вполне возможно, что SVG скоро станет стандартом. Очень жду этого.
Дмитрий Зимин, менеджер проекта «Киноход»
Что касается того, «почему не используют SVG», я могу говорить только за наш проект. У нас есть особенность: большая часть контента — это фотографии (постеры, кадры из фильма, превью ролика).
Интерфейс в мобильном приложении хотим перевести на вектор, потому что нарезать картинки в трёх разрешениях (х.png, @2x.png, @3x.png) и утомительно, и провоцирует на ошибки. Но, пока банально не дошли руки.
Артём Геллер, главный разработчик сайта Kremlin.ru
В своих проектах мы активно используем SVG, однако у этой технологии есть и определённые ограничения. Для нас они, конечно, перекрываются пользой, которую несёт в себе SVG — нам не нужна сложная анимация в элементах, да и что-то красить в них нужно не так часто.
При этом, мы заменяем элементы в SVG на PNG, в том случае, если с этим форматом конкретная версия браузера не дружит.
Никита Михеенков, директор по развитию Nimax Design
Нам кажется, что дело здесь совсем не в дизайнерах, а во всей команде, делающей проект. Сила привычки тянет назад к растровой графике — так проще и привычнее. В своих проектах мы постоянно работаем с SVG и особенно любим делать всякие анимированные и летающие штуки.
Вот несколько примеров с векторной графикой: один, два, три.
Вместо заключения: как делать SVG
Конечно, дизайнеру не нужно держать в голове все возможные технические мелочи разработки проекта, но соблюдение нескольких простых принципов, всё же, необходимо: