Основные фигуры

SVG элементы

A

• <altGlyph> (en-US)
• <altGlyphDef> (en-US)
• <altGlyphItem> (en-US)
• <animateColor> (en-US)
• <animateTransform> (en-US)

B C

• <clipPath> (en-US)
• <cursor> (en-US)

D

• <desc> (en-US)
• <discard> (en-US)

E

F

• <feColorMatrix> (en-US)
• <feComponentTransfer> (en-US)
• <feComposite> (en-US)
• <feConvolveMatrix> (en-US)
• <feDiffuseLighting> (en-US)
• <feDisplacementMap> (en-US)
• <feDistantLight> (en-US)
• <feFlood> (en-US)
• <feFuncA> (en-US)
• <feFuncB> (en-US)
• <feFuncG> (en-US)
• <feFuncR> (en-US)
• <feGaussianBlur> (en-US)
• <feImage> (en-US)
• <feMerge> (en-US)
• <feMergeNode> (en-US)
• <feMorphology> (en-US)
• <feOffset> (en-US)
• <fePointLight> (en-US)
• <feSpecularLighting> (en-US)
• <feSpotLight> (en-US)
• <feTile> (en-US)
• <feTurbulence> (en-US)
• <filter> (en-US)
• <font> (en-US)
• <font-face> (en-US)
• <font-face-format> (en-US)
• <font-face-name> (en-US)
• <font-face-src> (en-US)
• <font-face-uri> (en-US)

G

• <glyph> (en-US)
• <glyphRef> (en-US)

H

• <hatch> (en-US)
• <hatchpath> (en-US)
• <hkern> (en-US)

I

J K L

M

• <marker> (en-US)
• <mask> (en-US)
• <metadata> (en-US)
• <missing-glyph> (en-US)
• <mpath> (en-US)

N O P

• <polyline> (en-US)

Q R

S

• <script> (en-US)
• <set> (en-US)
• <stop> (en-US)
• <style> (en-US)
• <switch> (en-US)
• <symbol> (en-US)

T

• <textPath> (en-US)
• <title> (en-US)
• <tref> (en-US)
• <tspan> (en-US)

U

V — Z

• <view> (en-US)
• <vkern> (en-US)

Третья попытка: консольные программы

Консольные программы — это программы без графической оболочки, которые запускаются из командной строки. Их можно запускать изнутри своего PHP-кода. Часто эту возможность ограничивают по соображениям безопасности. Но у меня эта возможность была.

Для начала я попробовал использовать всё тот же ImageMagick.

Как и с библиотекой ImageMagick программа зависала на некоторых файлах, и ничего не происходило. Видимо, что-то не так в самом ImageMagick, а не в его библиотеках.

sudo apt-get install inkscape

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

Можно сконвертировать и сразу подогнать изображение под нужную ширину: SVG масштабируется без потерь.

Тестовый код заработал: Inkscape не зависал, как ImageMagick, SVG-файлы конвертировались в PNG. И работал почти в два раза быстрее. Использовал этот код для решения первоначальной задачи и сконвертировал несколько десятков тысяч SVG-файлов для актуального YML-фида: при его изменении новые картинки будут конвертироваться автоматически.

Inkspace может оказаться отличной рабочей альтернативой популярному ImageMagic для решения задач по программной работе.

Удручает, что задачу по конвертации форматов в принципе всё ещё приходится решать: конвертировать данные для экспорта в Google, Facebook, Yandex. Почему IT-гиганты на своей стороне не могут сделать поддержку SVG? Ведь и в их интересах, чтобы товары, объявления или новости на страницах их сервисов были дополнены графикой.

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

Независимость разрешения

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

Уменьшение количества запросов HTTP

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

Стили и скрипты

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

Легко редактировать и анимировать

Объекты SVG можно анимировать с помощью CSS или JavaScript. Также объекты SVG можно модифицировать с помощью текстового редактора.

Лучшие редакторы для работы с файлами SVG

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

Adobe Illustrator

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

Boxy SVG

Открыть SVG-картинки также можно с помощью специально созданного для работы с этим форматом приложения Boxy SVG. Данный редактор во многом уступает Adobe Illustrator, однако в нём вы найдете все базовые инструменты для создания и редактирования изображений SVG. Приложением поддерживаются работа с фигурами и объектами, импорт шрифтов и картинок популярных форматов, работа с библиотекой Pixabay, просмотр и редактирование исходного кода SVG и CSS. Программа Boxy SVG доступна как онлайн-сервис и как приложение для Windows 10, MacOS и Chrome OS.

Vectr

Чем открыть файл SVG еще? Для работы с файлами этого типа есть программа Vectr, очень даже неплохо справляющаяся с возложенными на неё задачами редактирования. В приложении доступны такие функции, как изменение отдельных частей векторного изображения, работа со слоями, добавление текста и примитивов, применение эффектов (например, прозрачность, обводка, внешняя и внутренняя тень), использование градиентов, пера, линий и других инструментов. Утилита Vectr бесплатна, есть версии для Windows, Linux и Chrome OS.

Inkscape

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

Кстати, изменить цвет SVG можно путем редактирования исходного кода файла, но для этого нужно иметь хотя бы базовые представления о языке CSS и кодах цветов. Отредактировав, к примеру, параметр style в выделенном на скриншоте блоке кода, мы заменили белый цвет на красный. А так, конечно, если чем и редактировать SVG, то Inkscape и подобными ему программами.

Как работать с файлами SVG

Если вы не слишком в восторге от всей XML-стороны SVG, это нормально. Вы можете просматривать и изменять изображения SVG, не касаясь кода. Вот как:

Как открыть файл SVG

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

Как создать или отредактировать файл SVG

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

• Adobe Illustrator, программа Adobe для создания и редактирования векторной графики. Вы можете экспортировать проекты Adobe как SVG или в несколько растровых форматов.
• Microsoft Visio, блок-схема, диаграмма и создатель инфографики.
• CorelDRAW, еще один специализированный редактор векторной графики.
• GIMP (GNU Image Manipulation Program), бесплатная, популярная программа для редактирования изображений с открытым исходным кодом.
• Google Docs – вы можете экспортировать рисунки, созданные в Google docs, в SVG.
• Inkscape, бесплатный векторный инструмент для рисования и текста.

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

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

Способ 1: RapidTables

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

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

Отобразится окно «Проводника», в котором и следует выбрать подходящую картинку.

Ознакомьтесь с ее содержимым в блоке «View».

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

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

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

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

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

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

SVG имеет небольшой вес по сравнению с другими форматами. У этого формата просто невероятные возможности. Флаги, символы, элементы интерфейса. И это только небольшой список того, как его можно использовать. Самый большой плюс его использования, это то что он является векторным форматом, то есть его возможно использовать на любых дисплеях – каким бы ни было их разрешение, он везде будет отображаться одинаково.

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

Несколько примеров того, где его можно использовать:

• Логотипы
• Фоновое изображение
• Использование как кнопки
• Карты
• Диаграммы или рисунки

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

Поддержка в браузерах

SVG имеет хорошую поддержку в большинстве современных браузеров, за исключением IE версии 8 и более ранних. Но задачу можно решить с помощью библиотеки JavaScript Raphael.js. Для облегчения работы можно воспользоваться инструментом ReadySetRaphael.com для конвертации кода SVG в формат Raphael.

Сначала загружаем и включаем библиотеку Raphael.js в документ HTML. Затем загружаем файл , копируем и вставляем полученный код в функцию после загрузки:

window.onload=function() { 
	// Код Raphael размещается здесь
}

В теге размещаем следующий элемент с идентификатором .

<div id="rsr"></div>

И все готово.

В следующем уроке серии мы рассмотрим, как определять стили для объектов SVG в CSS.

Конвертеры SVG в PNG

Просмотреть файл SVG как обычную картинку можно просто перетащив его на окно браузера, но бывает и так, что SVG-документ необходимо сконвертировать в более доступный и привычный графический формат, скажем, PNG. Если конвертируемых файлов много, есть смысл воспользоваться бесплатной тулзой SVG2PNG, позволяющей преобразовывать SVG в PNG в пакетном режиме. Чтобы конвертировать SVG в PNG, запустите утилиту, перетащите в ее окно векторные файлы, нажмите «Start» и получите результат.

В остальных случаях будет меньше мороки, если воспользуетесь бесплатными конвертерами SVG в PNG, работающими в режиме онлайн. В частности, это svgtopng.com/ru, convertio.co/ru/svg-png и image.online-convert.com/ru/convert-to-png.

Какой из них удобнее, решайте сами. Все эти три конвертера бесплатны и поддерживают работу в пакетном режиме, а Online-Convert вдобавок ко всему еще предоставляет возможность гибкой настройки выходных параметров PNG-файла.

Основные преимущества формата SVG.

Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК.
Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться.
SVG – это двухмерная графика и тем не менее это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Incscape , Adobe illustrator, CorelDRAW

Бесконечное полотно документа svg.

Итак, как происходит формирование векторного изображения.
Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра: viewport – системная область просмотра и viewBox – пользовательская область просмотра, положение которой относительно начала системных координат viewport, может задаваться собственной, пользовательской системой координат. Другими словами окно просмотра viewBox, может быть перемещёно в любое место документа SVG, при этом берется фрагмент изображения под ним, который после процесса согласования между viewBox и viewport, возвращается обратно в системную область просмотра viewport, которую видит пользователь. Используя это свойство можно организовать вертикальную или горизонтальную прокрутку изображения, меняя параметры координат viewBox.

При уменьшении размера пользовательского окна просмотра viewbox можно пропорционально увеличивать фрагмент изображения в системной области просмотра или уменьшать его при увеличении размера viewbox.
Таким образом реализуется эффект лупы. Более подробно эти процессы разобраны в статье: Трансформация изображений SVG при изменении параметров Viewbox.

Что за формат SVG и где используется

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

Как и все форматы, SVG имеет свои плюсы и минусы. К первым относятся масштабируемость без потери качества, относительно малый вес, возможность интеграции в SVG-документы PNG, GIF, JPG-изображений, редактирование (при наличии соответствующего опыта) в текстовых редакторах, индексирование поисковыми роботами, поддержка анимации и распространенность. К преимуществам формата следует также отнести хорошую сжимаемость, открытость и адаптивность.

С другой стороны SVG наследует недостатки XML со всеми вытекающими. Формат плохо подходит для создания сложных объектов, так как файлы SVG быстро «набирают» вес, если состоят из множества мелких деталей. Кроме того, для отображения картинки программам нужно читать весь документ, что затрудняет применение формата в картографических приложениях. Среди недостатков формата отмечаем относительно низкую кроссбраузерность и отсутствие хотя бы минимальной поддержки трехмерной графики.

Базовые формы SVG

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

Линия

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

<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Начало отрезка определяется атрибутами  и , а конечная точка определяется координатами в атрибутах and .

Также имеется два других атрибута ( и ) которые используются для определения цвета и ширины линии соответственно.

Для чего используются файлы SVG?

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

Иконки

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

Логотипы

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

Иллюстрации

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

Анимации и элементы интерфейса

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

Инфографика и визуализация данных

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

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

Вы также увидите, что SVG-файлы часто используются на информационных сайтах для визуализации данных и карт:

SVG-теги

<svg>

Тег внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.

Вот как он может выглядеть:

<g>

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

Вот пример тега :

<rect>

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

Вот пример тега :

<use>

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

Вот пример тега :

<path>

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

1. «M150 0» — переместись на (150,0);
2. «L75 200» — нарисуй линию к (75,200) от предыдущей точки (которая имела координаты (150,0));
3. «L255 200» — нарисуй линию к (225,200) от предыдущей точки (которая имела координаты (75,200));
4. «Z» — закрой путь (нарисуй линию к начальной точке).

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

Вот пример тега :

<symbol>

И, наконец, элемент определяет символы, которые могут быть использованы повторно. Эти символы отрисовываются только при помощи тега .

Вот пример тега :

Внешние SVG-файлы

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

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

Если хотите попробовать, скачайте любую из иконок Чикина и добавьте на сайт через тег — увидите, как это красиво. Не забудьте указать width и height, чтобы векторная картинка знала, в каком размере отрисовываться. 

Векторные картинки против растровых

Растровые картинки состоят из пикселей, создающих целостное изображение. JPEG, GIF и PNG — самые распространённые типы растровых изображений.

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

Вот что происходит при увеличении растрового изображения:

Что происходит при увеличении растрового изображения

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

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

Вот что происходит при увеличении векторного изображения:

Что происходит при увеличении векторного изображения

Как конвертировать SVG-файл

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

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

Autotracer.org — это еще один онлайн-конвертер SVG, который позволяет конвертировать онлайн-SVG (с вашего компьютера или через его URL) в другие форматы, такие как EPS, AI, DXF, PDF, SK и т. Д.

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

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

Один пример — с Inkscape — после того, как вы открываете / редактируете файл SVG, вы можете сохранить его обратно в SVG, а также в другой формат файла, такой как PNG, PDF, DXF, ODG, EPS, TAR, PS, HPGL и многие другие. ,

CSS3-анимация

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

CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.

Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.

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

Что такое файл SVG?

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

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

Растр против вектора

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

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

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

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

Как работают файлы SVG

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

Давайте посмотрим на несколько примеров. Начну с рисования простого круга SVG:

Когда я открываю файл этого круга в текстовом редакторе, появляется этот XML-код:

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

Чтобы нарисовать круг, XML-код определяет форму с помощью тега , его положение с помощью атрибутов и с атрибутами cx и cy, радиус с атрибутом r и цвет внутри тега . # f4795b – это шестнадцатеричный код цвета для данного оттенка оранжевого.

Когда предоставляется файл SVG, подобный этому, веб-браузер (или другое приложение) принимает эту информацию XML, обрабатывает ее и отображает на экране в виде векторного изображения. Все современные браузеры визуализируют SVG таким образом, как и специализированное программное обеспечение для редактирования графики.

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

Конечно, с векторами мы можем сделать гораздо больше, чем с простыми кругами. Давайте посмотрим на более сложное изображение, логотип звездочки HubSpot:

Этот простой значок состоит из 30 линий, соединенных 30 точками:

Откроем этот SVG-файл в текстовом редакторе:

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

5 последних уроков рубрики «Разное»

• Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

• Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

  Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

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

• Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Продвинутый уровень

Теперь добавим заголовок, чтобы получить картинку как в начале статьи. Пишем после тега тег :

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

1. Добавить стиль к svg-тегу.
2. В этом стиле прописать абсолютное позиционирование и установить значение z-index = -1, чтобы слои с рисунками оказались ниже всех и не мешали остальным.
3. Также в этот стиль нужно добавить свойство display: block — оно управляет тем, как располагается содержимое всего блока. Подробно про это свойство мы рассказывали в подборке полезных CSS-команд — почитайте, если интересно, как управлять внешним видом страницы.

Добавим это в стили и соберём полную страницу:

Сложная траектория

Задается тегом <path>. Является самым универсальным из SVG-элементов. Позволяет создавать произвольные фигуры.
Форма фигуры задается атрибутов d, значение которого – это набор специальных команд. Эти команды могут быть и в верхнем,
и в нижнем регистре. Верхний регистр указывает на то, что применяется абсолютное позиционирование, а нижний – относительное.

Команды, определяющие траекторию и направление фигурной линии

M, m

Начальная точка Mx,y

L, l

Отрезок прямой Lx,y

H, h

Горизонтальная линия Hx,y или hx

V, v

Вертикальная линия Vx,y или vy

A, a

Дуга эллипса Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,yrx,ry – радиусы дуги эллипса;x-axis-rotation – угол поворота дуги относительно оси X;large-arc-flag – если (=1), то строится большая части дуги, если (=0) – меньшая;sweep-flag – если (=1), то дуга строится по часовой стрелке, если (=0) – против часовой стрелке;x,y – координаты конечной точки дуги.

C, c

Кубическая кривая Безье Cx1,y1 x2,y2 x,yx1,y1 – координаты первой контрольной точки;x2,y2 – координаты второй контрольной точки;x,y – координаты конечной точки кривой.

S, s

Гладкая кубическая кривая Безье Sx2,y2 x,yx2,y2 – координаты второй контрольной точки;x,y – координаты конечной точки кривой.
Первая контрольная точка является зеркальным отражением второй контрольной точки.

Q, q

Квадратичная кривая Безье Qx1,y1 x,yx1,y1 – координаты контрольной точки;x,y – координаты конечной точки кривой.

T, t

Гладкая квадратичная кривая Безье Qx1,y1 x,yx,y – координаты конечной точки кривой.
Контрольная точка этой команды является зеркальным отражением контрольной точки предыдущей команды.

Z, z

Замыкание траектории

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

• Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать.
  Таким образом векторные изображения масштабируются лучше, чем растровые.
• Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
• SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
• Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
• Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
• В SVG изображение можно добавить несколько ссылок.
• К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера <style>…</style>
  или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.

Вставка SVG на Web-страницу

SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу
(при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить
SVG-код в файле с расширением .svg.

Итак, способы вставки SVG-изображения на Web-страницу:

• прямая вставка кода в HTML-документ в контейнере <svg>…</svg>;
• использование SVG-файла в качестве фонового изображения;
• подключение SVG-файла в HTML-документ с помощью тегов img, embed, object и iframe;
• подключение SVG-файла в PHP-документ с помощью функции include.