Знакомство с 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

Чем открыть SVG — программы для открытия файлов SVG

SVG (аббревиатура от «Scalable Vector Graphics») — открытый стандартизованный формат файла для векторной графики, т.е. это графические файлы, они же — векторные изображения. Формат основан на XML (расширяемом языке разметки) и имеет схожую с ним древовидную структуру, содержащую теги, элементы и атрибуты. Это говорит о том, что SVG-файлы могут быть просмотрены в любом текстовом редакторе, включая «Блокнот». Однако этот способ не позволит увидеть графическое содержимое SVG-файла, а только его текстовый код. Рассмотрим несколько вариантов открытия изображений формата SVG.

Браузеры

Самый простой способ открытия SVG — использование любого современного браузера. Вообще, в Windows (по крайней мере, в Windows 11), тип файла «SVG» по умолчанию привязан Microsoft Edge, о чем свидетельствует значок данного браузера, присваиваемый изображениям с расширением «.svg»:

Независимо от того, привязан ли тип файлов «SVG» к Microsoft Edge, его можно просто перетащить мышкой в любой другой браузер, например — в Firefox:

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

Inkscape

Inkscape считается лучшей программой из числа бесплатных для создания и редактирования векторных SVG-изображений. Помимо SVG, данный графический редактор поддерживает множество форматов растровых изображений (JPG, PNG и т.д.), а также PDF-документы и даже чертежи DXF.

Программа Inkscape обладает всеми необходимыми инструментами и функциями для создания и редактирования SVG:

• Инструменты для рисования (карандаш, перо и т.д.).
• Добавление различных геометрических фигур.
• Добавление текстов: поддержка любых контурных шрифтов, в т.ч. с написанием справа налево, настройка кернинга, межбуквенного и межстрочного интервала, добавление текста в фигурах и т.д.
• Возможность вставки в SVG растровой графики из внешних файлов.
• Инструменты для манипуляции отдельными объектами: преобразования (перемещение, масштабирование, вращение, наклон), создание и управления слоями, команды выравнивания и распределения, операции Z-порядка и др.
• Функции заполнения и обводки: редактор градиентов, заливки узором, пунктирные штрихи с множеством предопределенных шаблонов штрихов, инструменты выбора цвета, копирование и вставка стилей и многие другие.

Это не полный список возможностей редактора Inkscape.

XnViewMP

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

Но, к сожалению, менеджер XnViewMP отображает SVG-файлы только как растровую графику, автоматически преобразуя изначально векторные изображения. Т.е. при увеличении открытой картинки она не сглаживается:

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

Есть один важный момент. С настройками по умолчанию программа XnViewMP не отображает во встроенном файловом менеджере файлы формата SVG. Чтобы исправить это, нужно открыть настройки (клавиша F12), перейти в раздел «Список файлов», открыть вкладку «Пользовательский фильтр» и удалить из текстовой строки «Исключения» расширения «svg» и «svgs»:

GIMP

GIMP — графический редактор, специализирующийся на растровой графике, но частично поддерживающий и векторную графику, в т.ч. открытие, редактирование и создание SVG-изображений.

Функциональные возможности GIMP довольно широки. Если совсем вкратце, то при помощи данного редактора можно как рисовать сложные изображения с нуля (что дополнительно обусловлено поддержкой слоев), так и очень тонко редактировать их. Набор инструментов GIMP схож с таковым у знаменитых редакторов Photoshop и CoralDraw (правда, только у старых версий). Присутствуют функции пакетной обработки файлов, в т.ч. и их конвертация.

Касательно обработки SVG. По словам авторов редактора, начиная с версии 2.0 код GIMP был переписан под работу с данным форматом изображений. Хотя, конечно, GIMP уступает по своим возможностям в обработке векторной графике рассмотренному ранее редактору Inkscape, т.к. он все же специализируется на редактировании растровых изображений. Зато GIMP позволяет с легкостью импортировать объекты из SVG-файлов в текущий проект без потерь в качестве.

Онлайн-сервис SVGViewer

Изображения формата SVG можно просматривать не только с помощью программ, но и веб-сервисов, одним из которых является SVGViewer . При помощи данного сервиса можно параллельно просматривать SVG-файлы и вносить изменения в их исходный код (по сути, редактировать), которые моментально отображаются в исходном изображении.

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

И последнее — при помощи SVGViewer изображения формата SVG можно конвертировать в PNG.

Как работать с форматом SVG: руководство для начинающих веб-разработчиков

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

Масштабирование изображения с сохранением качества pixel perfect

При использовании формата PNG или растровых изображений разработчики ограничены пикселями. Масштабирование картинки снижает ее качество. Поэтому приходится использовать несколько разных фото для девайсов с разным разрешением экрана.

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

Сравнение качества растровых и векторных изображений

Возможность модификации

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

Небольшой вес файлов

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

Файлы в формате JPG чуть легче картинок в PNG, но всё равно они слишком тяжёлые. А изображения SVG представляют собой код, поэтому они весят очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.

Доступность

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

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

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

Логотипы и иконки в SVG

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

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

Инфографика

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

Визуальные эффекты

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

Анимация

SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.

Иллюстрации и рисунки

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

Интерфейсы и приложения

SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.

Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт с помощью HTML и CSS.

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

При подготовке материала использовались источники:
https://habr.com/ru/articles/157087/
https://www.softsalad.ru/articles/instructions/how-to-open-svg-files
https://ru.hexlet.io/blog/posts/kak-rabotat-s-formatom-svg-rukovodstvo-dlya-nachinayuschih-veb-razrabotchikov