Формат свг что это

Что дизайнеру нужно знать о 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

Конечно, дизайнеру не нужно держать в голове все возможные технические мелочи разработки проекта, но соблюдение нескольких простых принципов, всё же, необходимо:

Лучше стараться обходиться как можно меньшим числом точек. Чем меньше точек, тем, как правило, проще редактировать файл и тем меньших он будет размеров. Если используются формы, нарисованные другими специалистами, имеет смысл их упростить — уменьшить количество как опорных, так и управляющих точек. В Adobe Illustrator наиболее оптимальные (с технической стороны) контуры получаются при рисовании инструментом «перо» при грамотном выборе типа точек. Наименее оптимальные, обычно, являются результатом преобразования нарисованных кистью линий в векторные участки, или бездумной трассировки.

Изображение 1 (Получено от дизайнера) 83 Кб	Изображение 2 (оптимизировано количество точек) 28 Кб	Изображение 2 (оптимизирована разметка) 10 Кб

Формы выровнены по пиксельной сетке (400%)	Формы не выровнены по пиксельной сетке (400%)

Формат свг что это

28 ноября, 2023

SVG (Scalable Vector Graphics) — это один из форматов векторной графики, которая, в отличие от растровой, имеет одно большое преимущество: она не меняет свое качество и четкость при изменении размера. Дословная расшифровка аббревиатуры — «масштабируемая векторная графика» — как раз и отражает данное преимущество.

Вступайте в клуб начинающих дизайнеров и получайте подарки

Содержание

Особенность SVG-формата

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

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

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

Достоинства SVG

Ключевой характеристикой данного формата является его масштабируемость. Что это означает? При увеличении изображений растрового формата, например JPG или PNG, происходит ухудшение качества: картинка может размываться или на ней становятся видны пиксели. Сохраненное в формате SVG изображение можно увеличить хоть в десятки раз — его качество останется прежним. Таким образом, одним из преимуществ SVG-формата можно считать его адаптивность под любую область размещения.

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

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

Четвертый плюс формата SVG заключается в его интерактивности. С помощью JavaScript можно настроить реагирование всей картинки или какой-то ее части на поведение пользователя на сайте, например на наведение мышки.

Если говорить о технической стороне, в частности о преимуществах формата SVG в работе дизайнера, то нельзя не упомянуть о легкости клонирования шаблона для последующей его модификации. Один файл SVG может содержать несколько версий изображения, для которых не составит труда задать определенные правила и условия показа. Для экранов, обладающих повышенной плотностью пикселей, теперь не нужно загружать три картинки, как это делается для растровых форматов. Изображение будет «подогнано» под нужный размер в момент показа на соответствующем устройстве. SVG-изображения совместимы как с HTML, так и с CSS, что означает, что через код доступно редактирование объекта.

Количество инструментов, работающих с SVG-форматом, не ограничивается одним Adobe Illustrator. Среди программ, которые дизайнеры выбирают для работы с SVG-графикой, можно найти как платные, так и высококачественные бесплатные продукты: Autotracer, Vector Paint, SVG-Edit, Figma и многие другие.

Недостатки SVG

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

Как правильно вставлять SVG

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

Я вам больше скажу: SVG — это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Стилями и скриптами, Карл! Вот вам и простая картинка.

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

Первый и самый простой — элемент прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.

Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.

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

Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.

.picture

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

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

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

За гибкость приходится платить: из-за того, что это уже не просто графика и там можно скриптовать, к такому способу предъявляются другие требования безопасности. Например, картинку с другого домена просто так уже не вставить.

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

Четвёртый способ заработал, когда браузеры переписали свои HTML-парсеры по новому стандарту и содержимое SVG-файлов стало можно вставлять прямо на страницу, как любые другие теги.

Квадрат
 

С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты — ну, вы сами знаете. Можно, например, менять цвет заливки при наведении и описывать всё в общих стилях.

 rect:hover 

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

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);" 

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

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

• An Introduction to SVG – W3 Schools
• Resolution Independent with SVG – Smashing Magazine
• Why Aren’t You Using SVG? – NetTuts
• Оригинал примеров – hongkiat.com