Графические изображения в цифровом формате имеют множество форм и видов. Каждый из них используется для определенных целей, а также поддерживает свои ключевые особенности и нюансы.
Условно вся графика делится на две крупные категории: векторных изображений и растровых рисунков. Далее предстоит рассмотреть каждый тип графики более подробно. Особое внимание будет уделено формату SVG и основам работы с ним.
Растровое изображение – это…
Растровые рисунки – картинки с высокой степенью детализации и реалистичности. Они формируются из небольших квадратиков – растров (или пикселей). Соответствующие элементы становятся заметны при сильном увеличении изображения.
Растровая графика – множество мелких точек, задающих рисунок. У нее есть два ключевых параметра:
- Размер изображения – количество пикселей по горизонтали и вертикали. Чем больше размер, тем сильнее можно увеличить картинку без потери качества. Чем больше пикселей, тем больше мелких деталей можно увидеть на изображении.
- Глубина цвета. Указывает на то, сколько разных оттенков может быть распознано на картинке. Чем больше этот показатель, тем более плавными окажутся переходы на изображении.
Растровая графика – это самые качественные и детализированные изображения. Она широко используется в полиграфии, а также рекламе и обыденной жизни. Самый простой пример такого изображения – цифровое фото.
Векторная графика – это…
Изучая формат SVG, необходимо разобраться с понятием векторной графики. Что такое растровое изображение, понятно. В случае с векторными рисунками картинка будет задаваться не пикселями, а математическими формулами. Каждое изображение такого плана будет формироваться отдельными элементами:
- эллипсами;
- точками;
- кривыми различной сложности;
- прямоугольниками;
- многоугольниками;
- ломаными.
Для построения изображения каждый компонент будет обладать своим набором параметров. Сюда относят:
- размер;
- цвет;
- координаты;
- толщину линий;
- прозрачность;
- радиус кривизны и так далее.
Работать с векторными картинками проще, чем с растровыми. Они используются в чертежах, а также схемах и таблицах. Там, где реалистичность и степень детализации уходят на второй план.
SVG – это…
SVG графика произошла от Scalable Vector Graphics или «масштабируемая векторная графика». Данный формат – графика, которая формируется при помощи геометрических объектов: линий, кругов и так далее.
SVG – язык разметки масштабируемой векторной графики, который был создан W3C (Консорциумом Векторной Паутины). Он входит в подмножество расширяемого языка XML-разметки. Используется для описания двумерных векторных и смешанных векторно/растровых картинок в XML-формате.
SVG начал развиваться в 1999 году. Сейчас соответствующий формат используется на всех современный сайтах. С его помощью происходит отрисовка картинок и иконок. Чаще всего SVG графика используется для формирования логотипов и миниатюр.
Базовый состав
Использовать SVG может любой веб-программист. Чтобы грамотно работать с этим расширением документов, необходимо изучить его более подробно. Рисование SVG возможно при помощи некоторых базовых фигур:
- линии – простые и ломаные;
- прямоугольники;
- окружности;
- многоугольники;
- эллипсы.
Все перечисленные фигуры могут быть использованы как поодиночке, так и совместно, создавая любые полноформатные картинки: людей, животных, города, пейзажи и так далее.
Программы для работы
Работа с файлами SVG может производиться в любом графическом редакторе, поддерживающем векторные рисунки. Пример – Figma. Здесь допускается не только изменение уже существующих SVG-файлов, но и создание собственных картинок соответствующего формата. Для этого в приложении имеются инструменты:
- перо;
- квадрат;
- стрелка;
- линия;
- звездочка;
- эллипс;
- треугольник.
Допускается использование плагинов, позволяющих создание различных элементов. Пример – Shaper. С его помощью в один клик получится добавлять необычные фигуры на подготовленный фон.
Figma – это не профессиональный редактор SVG графики. С соответствующим форматом рекомендуется работать через:
- CorelDraw – наиболее популярный редактор. Он подойдет как новичкам, так и более опытным дизайнерам.
- Adobe Illustrator – стандарт в области полиграфии. Именно здесь можно качественно переносить SVG изображения из компьютера на бумагу или иные носители. Масштабирование допускается до 64 000%.
- Gravit Designer – полнофункциональный редактор векторных рисунков. Подойдет для любых задач – от дизайна интерфейсов и иконок до работы с презентациями и анимацией.
Предложенный список не является исчерпывающим. Существуют и иные, менее популярные графические редакторы с поддержкой SVG. В Интернете пользователи могут найти много бесплатного программного обеспечения для работы с изучаемым графическим форматом.
Преимущества и недостатки
Какой формат SVG, понятно. С ним удобно работать как новичкам, так и опытным дизайнерам. У рассматриваемого формата есть преимущества и недостатки. Зная о них, каждый сможет разобраться, стоит ли пользоваться такими векторными рисунками в проектах.
Плюсы
Первым преимуществом SVG файлов является их масштабируемость. При увеличении фотографии в PNG или JPG может произойти ухудшение качества. В случае с SVG ситуация иная – картинка останется такой же качественной.
Векторные рисунки можно увеличивать во сколько угодно раз. Они все равно сохранят свой первоначальный вид. Именно поэтому SVG элементы хорошо отображаются при больших разрешениях без потери качества. Они отлично подходят для адаптивных сайтов.
Второе преимущество формата – его кастомизация. Для изменения цвета иконки в PNG или JPG нужно приложить немало усилий. В случае с SVG-изображениями достаточно зайти в графический редактор и поменять цвет иконки буквально в один клик. Так, словно пользователь вносит изменения в обычный графический элемент.
SVG открывается в HTML и CSS. Это значит, что допускается прямое изменение параметров и атрибутов компонента рассматриваемого формата прямо через код.
Очередной сильной стороной SVG-изображений становится вес файла – он на порядок меньше, чем у любой растровой картинки при равных характеристиках. Дополнительно необходимо обратить внимание на то, что SVG поддерживает возможность анимирования через JavaScript. С «обычной» картинкой подобные манипуляции проделать достаточно проблематично.
Недостатки
Существенных недостатков у SVG Image нет. Дизайнерам и разработчикам рекомендуется запомнить следующие тонкости работы с форматом:
- Он не может быть использован для фото. Связано это с тем, что такое изображение получится очень большим.
- Не предусматривается поддержка старыми браузерами.
Рассматриваемый формат – лучший вариант для иконок, а также анимированных компонентов и иллюстраций на сайте.
Возможности языка
SVG – это не просто графический компонент, а еще и специализированный язык для описания векторной графики. Далее он будет рассмотрен более подробно. Стандарт имеет следующие возможности:
- Описание путей. Дает возможность задать любую фигуру небольшой строкой с путем от начальной до конечной точки. Промежуточные координаты могут быть любыми. Строка задается атрибутом d тега path. Она включает в себя команды, которые кодируются числовыми и буквенными наборами. Буквы определяют тип команды, числа – ее параметры.
- Описание основных геометрических фигур.
- Широкий спектр визуальных свойств. Они могут применяться к путям и фигурам. Сюда относятся: окраска, скругление углов, прозрачность и так далее.
- Интерактивность. На каждый отдельный компонент и целое изображение можно прикрепить обработчик событий. Этот прием позволяет управлять рисунками на экране.
- Анимации и сценарии. При помощи JavaScript и ECMAScript допускается описание сложных сценариев, связанных с математическими вычислениями координат и пропорций фигур.
SVG-файлы описываются тестом. Их легко читать и редактировать. Данный формат является открытым стандартом и не является чьей-либо собственностью. Он совместим с CSS и имеет преимущества XML.
Интерпретация в коде
Теперь можно изучить тег SVG и его особенности. Данная запись является парной. Толщиной и цветом линии можно управлять при помощи обводки – stroke. С ее помощью можно задать один общий атрибут для контейнера SVG, а можно задавать его каждому отдельному вложенному компоненту. Это поможет сделать разную обводку на одной и той же картинке.
Подключение изображения рассматриваемого формата осуществляется несколькими способами:
- Img. Самый простой способ – это использовать в HTML тег img. В нем указывается путь до SVG-картинки в значении атрибута src. Данный вариант не позволяет изменять заливку и цвет фона.
- Background-image. Этот вариант подойдет для картинок, которые не являются контейнерными. Подключение происходит как фона для того или иного элемента. Здесь отсутствует возможность управления CSS стилями.
- В HTML. Вставка прямо в разметку HTML-страницы – еще один вариант подключения SVG. В данной случае можно управлять стилями изображения через CSS. Этот подход подойдет для анимирования векторных картинок.
Ниже можно увидеть наглядный пример реализации последнего типа подключения картинки:
Теперь можно рассмотреть параметры SVG. Они нужны для грамотной настройки изображения на странице.
Атрибуты
Для вставки SVG-кода необходимо помнить о следующих параметрах:
- Fill – заливка. Может использоваться для всего контейнера или для его частей.
- Stroke – обводка.
- ViewBox – размер окна изображения. Может указываться для всей картинки или для ее отдельных компонентов. Этот атрибут позволяет кадрировать изображение.
- Width/height – размеры картинки. Значениями выступают числа без указания единиц измерения. В этом случае браузер воспринимает их в качестве пикселей. Можно использовать процентные показатели.
- PreserveAspectRatio – необходимость сохранения пропорций при масштабировании изображения. Если значение атрибута отличается от none, то оно будет включать в себя две части: выравнивание и пропорции.
Для обрезки используются meet (картинка пытается уместиться целиком с сохранением пропорций) и slice (для заполнения изображением всего имеющегося пространства).
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.
