Использование svg: Как правильно вставлять SVG — Блог HTML Academy

Добавление векторной графики в веб-документ — Изучение веб-разработки

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

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

В веб-разработке вы будете сталкиваться с двумя типами изображений — растровым и векторным:

• Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
• Векторное изображение  определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер  может вычислить как должно выглядеть изображение, когда выводится на экран.SVG формат позволяет нам создавать векторную графику для использования в веб-документах.

Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как vector-versus-raster.html — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое — SVG.

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

Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: vector-versus-raster.html !

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

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

В качестве простого примера, следующий код создаёт круг и прямоугольник:

<svg version="1.1"
     baseProfile="full"
    
     xmlns="http://www.w3.org/2000/svg">
  <rect fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

В результате получается следующее:

Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

Дополнительные преимущества SVG:

• Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает SEO).
• SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.

Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:

• SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.
• SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.
• не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.

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

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

Быстрый путь:

Чтобы встроить SVG используя элемент <img>, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
   
    />

Плюсы

• Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте alt
• Вы можете легко превратить изображение в гиперссылку, поместив <image> в элемент <a>.

Минусы

• Вы не можете изменять изображение с помощью JavaScript.
• Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
• Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например :focus).

Устранение неполадок и кросс-браузерная поддержка

Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в src атрибуте и использовать srcset атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами — старые же браузеры будут загружать PNG:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> 

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

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

Подобно методу <img>, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.

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

Как включить SVG в ваш HTML код

Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:

<svg>
    <rect fill="green" />
</svg>

Плюсы

• Вставка вашего SVG путём SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
• Вы можете присваивать class-ы и id элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой атрибут представления SVG как свойство CSS.
• SVG inline единственный метод, который позволяет вам использовать CSS-взаимодействия (как :focus) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).
• Вы можете разметить SVG как гиперссылку, обернув в элемент <a>.

Минусы

• Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.
• Дополнительный SVG код увеличивает размер вашего HTML файла.
• Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.
• Вы можете добавить альтернативный вариант в элементе <foreignObject>, но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).

Как встраивать SVG при помощи <iframe> (en-US)

Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <iframe>

Вот краткий обзор:

<iframe src="triangle.svg" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

Это — определённо не самый лучший метод для выбора:

Минусы

• Как вы можете видеть, у iframe-ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают iframe-ы.
• Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.

В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.

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

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

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

Оформление содержимого в SVG с помощью CSS

Подробная статья об оформлении содержимого в элементе SVG <use> и преодолении связанных с этим проблем.

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

Инстанцирование иконок или любого другого содержимого SVG в элементе <use> вызывает сложности при оформлении отдельных экземпляров. Цель этой статьи — дать вам обзор некоторых возможных способов обойти ограничения оформления, связанные с использованием <use>.

Но перед тем как начать, давайте быстро рассмотрим основную структуру и группирование элементов в SVG, постепенно перейдя к <use>, DOM, а затем вернемся обратно к CSS. Мы разберем, почему оформление <use> может вызвать сложности и как их преодолеть.

Краткий обзор структуры SVG, группирования и ссылок на элементы в SVG

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

4 основных группирующих и связывающих элемента SVG это <g>, <defs>, <use> and <symbol>.

Элемент <g> (сокращение от “group”) используется для логической группировки наборов связанных графических элементов. В терминах графических редакторов ( типа Adobe Illustrator) элемент <g> по функционалу похож на функцию “Сгруппировать объекты”. Вы также можете думать о группе как о слое в графическом редакторе.

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

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

Элемент <symbol> комбинирует возможности <defs> и <g> в том, что используется для группирования элементов с заданием шаблона, на который можно ссылаться в других участках документа. В отличие от <defs>, <symbol> не используется для задания паттернов; как правило он используется для создания символов типа иконок, которые затем применяются во всем документе.

У элемента <symbol> есть еще одно важное преимущество: он принимает атрибут viewBox, который позволяет масштабирование внутри любой области видимости.

Элемент <use> позволяет вам использовать в любом месте документа ранее определенный элемент. Он позволяет многократно использовать элементы, дает функциональность подобную копированию-вставке в графическом редакторе. С ним можно использоваться как отдельный элемент, так и группа, заданная в <g>, <defs> или <symbol>.

Чтобы использовать элемент вам надо передать ссылку на этот элемент, идентификатор — это атрибут xlink:href и спозиционировать его, задав атрибуты x и y. Вы можете применить стили к элементу <use> и они будут каскадироваться на содержимое этого элемента.

Но что является содержимым <use>? Куда он клонируется? И как каскад CSS работает с ним?

Перед тем как ответить на эти вопросы и с учетом того, что мы только по-быстрому разобрали структуру и группирование SVG, стоит упомянуть пару статей,которые позволят вам узнать больше об этих элементах, а также об атрибуте viewBox в элементе <symbol>:

SVG

Когда вы ссылаетесь на элемент с помощью <use>, ваш код выглядит примерно так:

<symbol viewBox="0 0 30 30">
	<!-- icon content / shapes here -->
</symbol>

<use xlink:href="#my-icon" x="100" y="300" />

На экране отображается иконка, содержимое которой определено внутри <symbol>, но на самом деле это содержимое элемента <use>, которое является клоном <symbol>.

Но элемент <use> это всего лишь один самозакрывающийся элемент — в нем нет контента между открывающим и закрывающим тегами, так куда же клонируется содержимое <symbol>?

Ответ — в теневой DOM (почему-то он всегда у меня ассоциируется с Бэтменом, не знаю почему).

Что такое теневой DOM?

Теневой DOM идентичен обычному DOM, за исключением того, что вместо того, чтобы быть частью дерева основного документа, узлы теневого DOM относятся к фрагменту документа, который является параллельным основному, но недоступным для его скриптов и стилей. Это дает авторам возможность создавать модульные компоненты, инкапсулируя скрипты и стили. Если вы когда-либо использовали элемент video или диапазонный ввод в HTML5 и не поняли, откуда появлялись элементы управления видеоплеером или слайдер, то ответ тот же — теневой DOM.

В случае с элементом SVG <use>, содержимое, на которое он ссылается, клонируется в фрагмент документа, “хостящийся” в <use>. В данном случае <use> это теневой хост.

Итак, содержимое <use> (клон или копия элемента, на который он ссылается) присутствует внутри теневого фрагмента документа.

Другими словами, содержимое находится там, но оно невидимое. Такое же, как и содержимое обычного DOM, но не доступное высокоуровневым средствам, таким как селекторы CSS и JavaScript, скопированное в фрагмент документа, привязанный к <use>.

Теперь, если вы дизайнер, вы можете подумать: “ОК, я понял, но есть ли способ проверить этот субдокумент и увидеть его содержимое”. Ответ — да, вы можете просматривать содержимое теневого DOM, используя инструменты разработки в Chrome (в Firefox на данный момент эта функция не доступна). Но для начала вам надо активировать инспектора теневого DOM во вкладке General на панели настроек. Это подробно описано здесь.

После того, как вы активировали инспекцию теневого DOM в инструментах разработчика, вы можете видеть клонированные элементы на панели элементов, также как и элементы обычного DOM. На следующем изображении показан пример элемента <use>, ссылающегося на содержимое элемента <symbol>. Обратите внимание, что “#shadow-root” и его содержимое являются клоном содержимого <symbol>.

Используя инструменты разработчика Chrome, вы можете инспектировать содержимое элемента use внутри теневого DOM (“#shadow-root”, строка выделена серым цветом). На этом скриншоте инспектируется логотип Codrops из примера, который мы будем рассматривать в следующем разделе.

Глядя на инспектируемый код, вы можете увидеть, что теневой DOM очень похож на обычный, за исключением того, как он обрабатывается CSS и JavaScript основного документа. Существуют также иные различия между ними, которые мы не будем рассматривать в этой статье по причине их объема, поэтому если вы хотите узнать больше, я рекомендую вам следующие статьи:

С учетом моего ограниченного опыта взаимодействия с теневым DOM, я рассматриваю его как обычный DOM, который нужно по другому обрабатывать в части доступа CSS и JavaScript к его элементам. Это то, что важно для нас при работе с SVG: как воздействовать на содержимое <use> внутри теневого DOM, ведь нам важно иметь возможность оформлять его. Весь смысл использования <use> это возможность создавать различные копии элемента и в большинстве случаев нам надо иметь возможность стилизовать каждую копию по-разному. Например, это может быть лого в двух цветовых темах или многоцветные иконки для разных цветовых тем. Так что для нас важно иметь возможность сделать это с помощью CSS.

Как было сказано, содержимое теневого DOM недоступно для CSS в отличие от обычного DOM. Так как нам стилизовать его? Мы не можем использовать путь к потомкам типа такого:

use path#line {
    stroke: #009966;
}

Потому как у нас нет доступа к теневому DOM с помощью обычных CSS селекторов.

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

Кроме того, нам нужен простой способ оформить содержимое SVG <use> без погружения в специфику теневого DOM, используя простой CSS и простой SVG.

Для того, чтобы добиться этого и получить больше контроля при оформлении содержимого <use>, нам нужно взглянуть на это под другим углом, использовав возможности каскадирования и наследования в CSS.

Каскадирование стилей

Итак, CSS к SVG подключается тремя различными способами — внешними CSS стилями, внутренними стилями (внутри элемента <style>) и строчными стилями (в атрибуте style), вся разница в каскадировании.

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

В следующем фрагменте кода мы получаем простой розовый круг с желтой обводкой. stroke, stroke-width и fill это презентационные атрибуты.

<svg viewBox="0 0 100 100">
    <circle fill="deepPink" stroke="yellow" stroke-width="5" cx="50" cy="50" r="10"></circle>
</svg>

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

Спецификация SVG перечисляет атрибуты SVG, которые могут задаваться как свойства CSS. Некоторые из этих атрибутов есть среди обычных правил CSS, например, opacity и transform, а некоторые применяются только к SVG — fill, stroke и stroke-width.

В SVG2 этот список также включает x, y, width, height, cx, cy и несколько иных презентационных атрибутов, которые нельзя задать по спецификации SVG 1.1. Новый список можно найти в спецификации SVG2.

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

На самом деле, презентационные атрибуты рассматриваются как низкоуровневые “авторские таблицы стилей” и они переписываются остальными стилевыми декларациями: внешними, внутренними и инлайновыми стилями. Их единственная сила это приоритет перед унаследованными стилями. И все.

Теперь, когда мы выяснили это, вернемся к нашему элементу <use> и его содержимому.

Мы знаем, что мы не можем задать стили внутри <use>, используя CSS селекторы.

Но мы также знаем, что как и в случае с элементом <g>, стили примененные к <use> будут унаследованы всеми его потомками (которые находятся в теневом DOM).

Итак, сначала попытаемся изменить цвет заливки (fill) элемента внутри <use>, применив селектор к самому элементу <use> с расчетом, что каскад и наследование сделают свое дело.

Однако, это вызывает пару вопросов:

1. Цвет заливки будет унаследован всеми потомками элемента <use>, даже теми, к которым вы не хотите применять стили (но если внутри <use> у вас всего один элемент, то этой проблемы не будет).
2. Если вы экспортировали SVG из графического редактора или по каким-либо иным причинам не можете изменять код SVG, тогда вы в конечном итоге будете работать с SVG, к которому уже применены презентационные атрибуты (если вы явно не отмените это при экспорте в формат SVG) и значения этих атрибутов будут иметь приоритет над унаследованными от <use>.

И даже если вы можете редактировать код SVG и можете избавиться от них, я настоятельно рекомендую этого не делать по следующим причинам:

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

Итак, у нас есть эти атрибуты, но при этом мы хотим оформить различные экземпляры иконок по разному.

Это делается за счет вынуждения презентационных атрибутов к унаследованию стилей, заданных <use> или нахождения способа обойти переопределения этих значений. Чтобы сделать это, нам придется использовать всю мощь каскадирования CSS.

Давайте начнем с простых примеров и постепенно перейдем к сложным.

Переписывание значений презентационных атрибутов с помощью CSS

Презентационные атрибуты переписываются любой декларацией стилей. Мы можем это использовать, для того, чтобы презентационный атрибут получил значение, унаследованное от стилей <use>.

Это просто благодаря ключевому слову CSS inherits. Взгляните на следующий пример — иконка мороженого, нарисованная одним контуром, цвет которого мы хотим изменять в разных экземплярах. Иконка создана Эрин Агноли из Noun Project.

<svg>
  <symbol>
    <path fill="#000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844  c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442  c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933  c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0.119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04  c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z   M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929  C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907  c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48  c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631  c0,1.684-0.914,3.148-2.266,3.958h35.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z   M50.01,86.723L27.73,49.13h54.541L50.01,86.723z"/>
  </symbol>
</svg>

Содержимое нашей иконки с мороженым (path) определено внутри элемента <symbol> , а, значит, оно по умолчанию не будет выводится на холст.

Мы выводим множественные экземпляры иконки с помощью <use>.

<svg viewBox="0 0 100 125"> 
    <use xlink:href="#ic" x="0" y="0" />
</svg>
<svg viewBox="0 0 100 125"> 
    <use xlink:href="#ic" x="0" y="0" />
</svg>

Ширину и высоту иконок мы задаем с помощью CSS. Я использую те же размеры, что и у viewBox, но они не должны быть идентичными. Однако, чтобы избежать избытка пустого пространства внутри SVG, убедитесь, что вы сохраняете соотношение между сторонами.

.icon {
    width: 100px;
    height: 125px;
}

С этим кодом мы получили следующий результат:

Заметьте, что благодаря добавленным черным рамкам вокруг наших SVG вы видите границы каждого из них, в том числе и первого, в котором содержимое не рендерится. Запомните: SVG-документ, в котором вы определили symbol будет выводится на страницу, но без содержимого. Чтобы предотвратить это, используйте свойство display: none на первом SVG. Если вы не спрячете SVG с определениями иконок, он будет выводится на экран даже если вы не зададите для него размеры — он займет дефолтные 300 на 150 пикселей (это значение по умолчанию для незамещаемых элементов в CSS) и вы получите ненужный вам пустой блок на экране.

Теперь попробуем изменить цвет заливки для каждого экземпляра иконки:

use.ic-1 {
    fill: skyblue;
}
use.ic-2 {
    fill: #FDC646;
}

Цвет заливки иконок по-прежнему не меняется, так как унаследованный цвет переписывается атрибутом fill="#000" в элементе path. Чтобы это не произошло, нам надо вынудить path унаследовать цвет:

svg path {
    fill: inherit;
}

Вуаля! Цвета, заданные элементам <use> теперь применяются к path каждого из них. Проверьте демо и поэкспериментируйте со значениями, создавая экземпляры и задавая им разные цвета:

See the Pen mErELQ by prgssr (@prgssr) on CodePen.

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

Оформление содержимого

Некоторое время назад, при работе над иконкой, активируемой с помощью <use>, мне надо было, чтобы один из элементов внутри него унаследовал все стили <use>, такие как fill, stroke, stroke-width, opacity и даже transform. Таким образом, мне надо было контролировать все эти атрибуты через CSS, сохраняя при этом в разметке все презентационные атрибуты в качестве запасного варианта.

Если вы столкнетесь с похожей задачей, вы, вероятно, решите, что она займет слишком много времени, если все делать в CSS:

path#myPath {
    fill: inherit;
    stroke: inherit;
    stroke-width: inherit;
    transform: inherit;
    /* ... */
}

Рассмотрев этот сниппет, вы заметите паттерн, а, значит, имело бы смысл объединить все указанные свойства в одно и задать ему значение inherit.

К счастью, нам поможет свойство CSS all. В моем справочнике по CSS упоминается использование свойства all для оформления SVG, но стоит освежить наши знания.

Используя свойство all мы можем сделать так:

path#myPath {
    all: inherit;
}

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

Заметьте, что это относится только к атрибутам, которые можно устанавливать с помощью CSS, а не к атрибутам, задаваемым только в SVG. Если атрибут может быть задан с помощью CSS — он унаследует стили, иначе нет.

Возможность активировать наследование презентационными атрибутами всех стилей <use>, но что если у вас иконка, состоящая из нескольких элементов и вы не хотите, чтобы все они унаследовали один и тот же цвет заливки? Что если вы хотите применять множество различных цветов заливки для разных потомков? Задание одного стиля в <use> уже не подходит. Нам нужно что-то другое, чтобы каскадировать нужные цвета к нужным элементам.

Использование переменной CSS

Использование переменной CSS currentColor в сочетании с техникой, описанной выше, позволяет определить два цвета для элемента, а не один. Год назад Фабрис Вайнберг написал об этом статью в своем блоге на Codepen.

Идея состоит в том, чтобы одновременно применять к <use> свойства fill и color, а затем каскадировать эти свойства к содержимому <use>, используя возможности переменной currentColor. Посмотрим на пример кода, чтобы понять, как это работает.

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

Во-первых, начнем с кода для этого изображения: у нас есть symbol, содержащий описание иконки и три экземпляра <use>, создающие три экземпляра лого.

<svg>
<symbol viewBox="0 0 23 30">
    <path fill="#aaa" d="M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0   c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43   c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33   c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895   c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263   c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313   c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z"/>
    <path fill="#ddd" d="M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927   c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067   c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936   c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659 M6.177,5.966L6.177,5.966   c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203   c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z"/>
</symbol>
</svg>
<svg>
  <use xlink:href="#codrops"/>
</svg>
<svg>
  <use xlink:href="#codrops"/>
</svg>
<svg>
  <use xlink:href="#codrops"/>
</svg>

Если мы зададим цвет заливки (fill) в элементе <use> для каждого экземпляра, этот цвет будет унаследован обоими каплями, что не является нашей целью.

Поэтому вместо определения цвета заливки и каскадирования его обычным способом, мы будем использовать переменную currentColor , чтобы меньшая капля на переднем плане была другого цвета и это значение мы зададим с помощью свойства color.

Для начала нам надо вставить currentColor туда, где мы хотим применить этот цвет — это будет место в разметке, где определяется иконка, то есть внутри <symbol>. Теперь этот фрагмент выглядит так:

<svg>
	<symbol viewBox="0 0 23 30">
		<path fill="#aaa" d="..."/>
		<path fill="currentColor" d="..."/>
	</symbol>
</svg>

Затем нам надо удалить презентационный атрибут fill из второй капли и позволить ей унаследовать цвет заливки (fill) от элемента <use> с помощью inherit.

Если бы мы использовали ключевое слово inherit, чтобы вынудить презентационные атрибуты унаследовать значения от <use>, обе части унаследовали бы одинаковое значение, а currentColor не имела бы никакого эффекта. Поэтому в этой технике нам надо удалить тот атрибут, который мы хотим задать через CSS, а оставить только тот, в котором мы будем использовать currentColor.

<svg>
	<symbol viewBox="0 0 23 30">
		<path d="..."/>
		<path fill="currentColor" d="..."/>
	</symbol>
</svg>

Теперь, используя свойства fill и color в <use> мы добавим стили к капле из логотипа:

.codrops-1 {
  fill: #4BC0A5;
  color: #A4DFD1;
}
.codrops-2 {
  fill: #0099CC;
  color: #7FCBE5;
}
.codrops-3 {
  fill: #5F5EC0;
  color: #AEAFDD;
}

Каждый элемент <use> получает собственное значение fill и color. В каждом из них цвет fill каскадируется и заполняет первый контур, не имеющий атрибута fill, а цвет свойства color используется для задания атрибута fill во втором контуре.

Так что произошло следующее: значение текущего цвета просочилось в стили содержимого элемента <use> за счет использования переменной currentColor. Изящно, не правда, ли?

Вот демо с использованным кодом:

See the Pen aZmZXV by prgssr (@prgssr) on CodePen.

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

Ключевое слово currentColor это единственная доступная переменная CSS на данный момент. Однако, если бы у нас было бы больше переменных, могли бы мы их использовать для заполнения еще большего количества значений в содержимом <use>? Да, могли бы. Амелия Беллами-Ройдс год назад представила концепцию этого в своем блоге на Codepen. Посмотрим, как это работает.

Будущее: оформление содержимого

Используя кастомные свойства CSS (переменные CSS) вы можете оформить содержимое <use>, не вынуждая браузер переписывать значения презентационных атрибутов.

Как сказано на MDN, CSS переменные это сущности, заданные авторами или пользователями веб-страниц для хранения и использования определенных значений по всему документу. Они задаются с использованием кастомных свойств и доступны с использованием специфичной нотации var(). Они очень похожи на переменные из CSS-препроцессоров, но более гибкие и могут делать то, на что неспособны переменные препроцессоров. (Скоро в справочнике CSS появится статья о них).

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

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

Мы будем использовать изображение этого прикольного робота-хипстера, созданного Freepik.

Код робота содержит все составляющие его цвета:

<svg>
    <symbol viewBox="0 0 340 536">
        <path d="..." fill="#fff" />
        <path d="..." fill="#D1312C" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#1E8F90"  />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#F2B42B" />
        <path d="..." fill="#fff" />
     
       <!-- rest of the shapes -->
    </symbol>
</svg>

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

С добавленными переменными код будет следующим:

<svg>
    <symbol viewBox="0 0 340 536">
        <path d="..." fill="#fff" />
        <path d="..." fill="#D1312C" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#F2B42B" />
        <path d="..." fill="#fff" />
       
        <!-- rest of the shapes -->
    </symbol>
</svg>

Так как инлайновые теги style переписывают презентационные атрибуты, браузеры с поддержкой CSS-переменных будут использовать эти переменные для задания цвета заливки (fill). А браузеры, не поддерживающие их, будут использовать атрибут fill.

Затем нам надо задать значения для переменных в CSS. Но сначала инстанцируем изображение с помощью <use>:

<svg>
    <<use> xlink:href="#robot" />
</svg>

После этого зададим значения переменных для use, чтобы они могли каскадироваться к его содержимому. Выбранные вами цвета создадут цветовую схему рисунка. Так как в нашем роботе используется три основных цвета, мы назовем их primary, secondary и tertiary.

#robot-1 {
  --primary-color: #0099CC;
  --secondary-color: #FFDF34;
  --tertiary-color: #333;
}

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

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

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

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

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

Обойти это можно, задав другой цвет в качестве запасного варианта для поддерживающих браузеров. Синтаксис переменных CSS позволяет сделать так: вместо передачи функции var() имени переменной в качестве аргумента, вы передаете два аргумента, разделенных запятой — имя переменной и запасной вариант, в данном случае это будет значение для презентационного атрибута.

Итак, теперь код нашего робота выглядит так:

<svg>
    <symbol viewBox="0 0 340 536">
        <path d="..." fill="#fff" />
        <path d="..." fill="#D1312C" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#F2B42B" />
        <path d="..." fill="#fff" />

         <!-- rest of the shapes -->
    </symbol>
</svg>

И это все. Если у какой-либо переменной не будет задано значение, у браузера всегда будет в запасе цвет, заданный в качестве запасного варианта. Замечательно.

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

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

See the Pen vKXXYP by prgssr (@prgssr) on CodePen.

Если вы просматриваете это демо в браузере с поддержкой переменных CSS, то среди прочих вы увидите голубую с желтым версию робота, как мы и задавали в CSS-переменных. Иначе вы увидите трех одинаковых роботов с цветом запасного варианта.

Подводя итоги

Это была большая статья.

Используя возможности каскада CSS, оформление содержимого <use>, хранимого в теневом DOM, становится менее сложным. А с переменными CSS (currentColor или с пользовательскими свойствами) мы можем проникнуть в теневой DOM и кастомизировать нашу графику, как хотим, создавая при этом запасной вариант на случай проблем.

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

Мы также можем получить другие способы оформления содержимого<use> в будущем, так как продолжаются дискуссии об использовании переменных CSS в качестве параметров SVG — поэтому данная статья не покрывает все, что можно узнать по этой теме.

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

группировка и переиспользование элементов • Про CSS

SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: g, defs и symbol. Элементы, группы элементов и символы можно использовать повторно.

g

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

<svg>
  
  <g>
    <circle fill="purple" r="20" cx="25" cy="25"/>
    <circle fill="crimson" r="20" cx="70" cy="25"/>
    <circle fill="red" r="20" cx="115" cy="25"/>
    <circle fill="orange" r="20" cx="160" cy="25"/>
    <circle fill="gold" r="20" cx="205" cy="25"/>
    <circle fill="yellow" r="20" cx="250" cy="25"/>
  </g>

  
  <g>
    <circle fill="greenyellow" r="20" cx="25" cy="70"/>
    <circle fill="yellowgreen" r="20" cx="70" cy="70"/>
    <circle fill="green" r="20" cx="115" cy="70"/>
    <circle fill="steelblue" r="20" cx="160" cy="70"/>
    <circle fill="darkviolet" r="20" cx="205" cy="70"/>
    <circle fill="purple" r="20" cx="250" cy="70"/>
  </g>
</svg>

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

<svg>
  
  <g fill="tomato">
    <ellipse rx="30" ry="10" cx="25" cy="25"
             transform="rotate(-45 25 25)"/>
    <ellipse rx="30" ry="10" cx="105" cy="25"
             transform="rotate(-45 105 25)"/>
  </g>

  
  <g fill="skyblue">
    <ellipse rx="30" ry="10" cx="65" cy="25"
             transform="rotate(45 65 25)"/>
    <ellipse rx="30" ry="10" cx="145" cy="25"
             transform="rotate(45 145 25)"/>
  </g>
</svg>

Группы работают не как вложенные элементы в HTML, а скорее как группировка элементов в графических редакторах.

Группы никак не проявляют себя визуально, но могут быть использованы для групповых операций над своим содержимым: можно применять трансформации сразу для группы элементов, без необходимости двигать их по одному, можно задать визуальное оформление всей группе сразу, и его унаследуют все элементы внутри группы. При этом свойства группы добавляются внутренним элементам, не переопределяя существующие. Например, если у элемента заливка красная, а у группы зеленая, — заливка элемента останется красной.

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

defs

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

<svg>
  
  <defs>
    
    <g>
      <linearGradient x1="0%" y1="0%" x2="90%" y2="90%">
        <stop stop-color="crimson" offset="0%"/>
        <stop stop-color="gold" offset="100%"/>
      </linearGradient>
      <linearGradient x1="0%" y1="0%" x2="90%" y2="90%">
        <stop stop-color="yellowgreen" offset="0%"/>
        <stop stop-color="green" offset="100%"/>
      </linearGradient>
    </g>

    
    <g>
      <circle fill="url(#g1)" r="50"/>
      <rect fill="url(#g2)"/>
    </g>
  </defs>

  
  <use xlink:href="#sun" x="120" y="60"/>
  <use xlink:href="#rect" x="0" y="110" transform="rotate(10 100 110)"/>
</svg>

symbol

Символ — это группа фигур, представляющая собой единое целое. Так же, как и defs, не отображается на странице, и так же, как g, может быть использована ещё раз. Внутри символа действует своя система координат.

<svg>
  <defs>
    <g>
      <circle fill="gold" r="30"/>
    </g>

    
    <symbol>
      <polyline points="15 15 5 10 15 5"
        stroke="crimson" fill="none" stroke-width="3"/>
    </symbol>

    
    <symbol>
      <g stroke="brown">
        <polyline points="0 0 0 25" stroke-width="3"
          transform="translate(25 100)"/>
        <polyline points="0 0 0 25" stroke-width="3"
          transform="translate(45 100)"/>
        <polyline points="0 0 12 0" stroke-width="3"
          transform="translate(19 125)"/>
        <polyline points="0 0 12 0" stroke-width="3"
          transform="translate(40 125)"/>
      </g>

      <use xlink:href="#mouth" x="83" y="35"/>
      <use xlink:href="#yellowball" x="90" y="55"
        transform="scale(.75)"/>
      <use xlink:href="#yellowball" x="35" y="75"/>

      <polyline points="55 70 45 90 20 80"
        stroke="orange" stroke-width="3"
        fill="none"/>

      <circle fill="black" r="5" cx="75" cy="35"/>
      <circle fill="gray" r="1" cx="77" cy="35"/>
    </symbol>
  </defs>

  
  <use xlink:href="#bird" x="15" y="15"/>
  
  <use xlink:href="#bird" x="0" y="35" transform="translate(225 -20) scale(-1,1)"/>
</svg>

use

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

Копии можно задать положение, ширину и высоту:

<svg>
  <defs>
    
    <symbol>
      <circle r="50" fill="gold" cx="50" cy="50"/>
      <circle r="35" fill="orangered" cx="50" cy="50"/>
      <circle r="20" fill="crimson" cx="50" cy="50"/>
      <circle r="5" fill="maroon" cx="50" cy="50"/>
     </symbol>
  </defs>

  
  <use xlink:href="#color-wheel" x="20" y="20"/>
  
  <use xlink:href="#color-wheel" x="140" y="20"/>
</svg>

Положение копии определяется относительно верхнего левого угла фигуры в существующей системе координат. При этом внутри символа своя система координат.

При вставке символа ширина и высота (width и height) определяют не размеры фигуры, а видимую область копии (как у правой фигуры), однако при копировании группы (g) ширина и высота ни на что не влияют. Для изменения размеров копии используйте трансформации.

Также можно задавать обводку, заливку и трансформации:

<svg>
  <defs>
    
    <symbol>
      <rect x="2" y="2"/>
     </symbol>
  </defs>

  
  <use xlink:href="#s-rect" x="20" y="20"/>
  
  <use xlink:href="#s-rect" x="140" y="20"
       fill="yellowgreen"/>
  
  <use xlink:href="#s-rect" x="20" y="80"
       fill="gold" stroke="orange" stroke-width="4"/>
  
  <use xlink:href="#s-rect" x="140" y="80"
       fill="skyblue" stroke="steelblue" stroke-width="2"
       transform="rotate(-25 190 92)"/>
</svg>

Копиям можно задавать разные классы:

Домик с icomoon.io

<svg>
  <style>
 .col-1 {
    fill: #F35C78;
    }
  .col-2 {
    fill: #E77D6D;
    }
  .col-3 {
    fill: #D99B64;
    }
  .col-4 {
    fill: #C8B357;
    }
  .col-5 {
    fill: #B2CC49;
    }
  </style>

  <defs>
    
    <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"/>
  </defs>

  
  <use xlink:href="#house"
      
       x="20" y="10"
       transform="rotate(35 36 26)"/>
  <use xlink:href="#house"
      
       x="67" y="10"
       transform="rotate(100 83 26)"/>
  <use xlink:href="#house"
      
       x="114" y="10"
       transform="rotate(140 130 26)"/>
  <use xlink:href="#house"
      
       x="161" y="10"
       transform="rotate(30 177 26)"/>
  <use xlink:href="#house"
      
       x="208" y="10"
       transform="rotate(100 224 26)"/>
</svg>

Хорошо структурированный файл сделает разработку быстрее и комфортнее, а копирование символов может сделать код значительно короче.

Формат SVG: особенности, преимущества и недостатки.

Сегодня речь пойдет о формате векторной графики SVG. Что такое векторная графика и чем отличается от растра можно посмотреть тут.

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

Акроним: Scalable Vector Graphics.

Тип изображения: векторный. 

Тип сжатия: обычно не сжимается, но может быть сжат без потерь.

Особенности формата .svg

Формат SVG мы упоминали в этой статье, теперь разберем его особенности более подробно:

• размер SVG-файла не зависит от размера или глубины цвета. На вес влияет сложность точек и линий, с которых состоит изображение;
• во время масштабирования не теряет информацию, поэтому заменяет собой несколько вариантов растровых файлов для разных разрешений экрана;
• подходит для печати и индексации поисковыми системами;
• может быть встроен в html-код сайта, а значит, кешируется вместе с ним и загружается быстрее, чем изображения в .png или .jpeg.

Преимущества и недостатки формата .svg 

Плюсы:

• масштабируемость без изменения качества — один и тот же логотип будет хорошо выглядеть и на экране смартфона, и на большом экране Retina;
• простота создания: программисты пишут иконки с помощью xml-кода, веб-дизайнеры рисуют более сложные элементы в редакторах векторной графики Adobe Illustrator, Corel Draw, Sketch или Macromedia Freehand;
• малый размер: объекты .svg занимают гораздо меньше места, чем их близнецы, созданные как объекты растровой графики;
• гибкость: при помощи CSS можно изменить параметр графики на сайте, например, цвет фона или позицию логотипа на странице, а при помощи javascript задать анимацию элементов. Также можно отредактировать SVG-файл в графическом редакторе;
• четкая прорисовка деталей и лучший результат печати.

Минусы:

• не поддерживается старыми браузерами — Internet Explorer 8 и старше; 
• WordPress воспринимает .svg как вредоносный код, поэтому блокирует отображение. Обойти блокировку можно с помощью плагинов;
• подходит для создания примитивных объектов, которые могут быть описаны простыми фигурами или их частями: окружность, прямая, эллипс, прямоугольник и т.д.

Где использовать?

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

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

Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.

SVG

5. Знакомимся с диалоговым окном сохранения

• SVG Profiles
  По умолчанию используется SVG 1.1
• Fonts
  Type / Convert to outlines — что означает «перевести в кривые», то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.
  Type / SVG — Нужен в случае, если в SVG встраивается текст
  Type / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
• Options
  Image Location / Embed — при наличии растровых изображений позволит включить их в состав SVG файла
  Image Location / Link — при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.
  Preserve Illustrator Capabilities — галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
• More options
  Трогать для решения наших задач необязательно.
• SVG Code
  Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

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

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

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

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

SVG спрайты

В целях оптимизации и удобства при многократном использовании SVG изображений можно объединить в один файл-спрайт. Как это сделать? Для примера возьмем несколько изображений:

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
</svg>

У SVG есть несколько элементов-контейнеров – <g>, <defs> и <symbol>, лучшим для спрайтов является <symbol> т.к. он поддерживает все атрибуты как у <svg>.

Итак, нужно создать файл icons.svg, в нём будет общий контейнер <svg>...</svg>, далее в него помещаются изображения, с заменой <svg> на <symbol> оставляя все другие параметры и добавляется атрибут id для дальнейшего вывода.

<svg>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
	</symbol>
</svg>

Вывод осуществляется с помощью элемента <use> с ссылкой на файл спрайта и id изображения.

<svg><use xlink:href="/icons.svg#icon-1"></use></svg>
<svg><use xlink:href="/icons.svg#icon-2"></use></svg>
<svg><use xlink:href="/icons.svg#icon-3"></use></svg>

Результат:

Минусы

• Если открыть файл спрайта в браузере, то изображения выводится не будут.
• В старых браузерах (до IE9) тег <use> не поддерживается. Но для них есть плагин https://github.com/jonathantneal/svg4everybody.

img → SVG → Fonts — Дизайн на vc.ru

Приём не новый, но актуальный.

2798 просмотров

Поисковые системы остро рассматривают производительность сайта (экран загрузки, время перехода в интерактив и другие метрики) при разных условиях: скорости соединения, устройства просмотра и так далее.

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

• Брейкпоинты и медиазапросы в CSS (загрузка заранее подготовленного контента в зависимости от разрешения устройства).
• JavaScript по оптимизации изображений (дополнительная нагрузка на сайт в виде исполнения скрипта).
  
• «Ленивая» загрузка (с Chrome 76) при использовании в HTML атрибута loading=»lazy».
  
• «Дедовское» сжатие и размещение на хостинге других изображений.
  

Также стоит отметить, что сейчас развита тенденция использовать SVG (векторные изображения) вместо тех же PNG, JPG.

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

Все преимущества можно почитать в других статьях.

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

Рассмотрим на примере:

Есть исходная картинка в формате PNG и SVG.

Домик no name

Создадим из нее файл шрифтов. Сервисов для этого существует множество, они бесплатные. Опишу на примере одного из них (не реклама). Загружаем наше SVG на сервис:

1. Импортируем. 2. Выбираем. 3. Генерируем​

Далее дополнительная кастомизация (информация об авторстве, метод подключения и так далее). Скачиваем готовый архив. В нем для работы нужны только папка Fonts и файл стилей:

По умолчанию генерируется файл style.css. В данном случая я его переименовал.

Верстаем три блока. Подключаем файлы скаченных шрифтов.

​Верстка первой странички

В первом блоке загружен обычный PNG, во втором — SVG, в третьем символ через тег <i>. Размеры изображения для первых двух блоков идет через img, для третьего — через font-size (размер шрифта).

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

​

Размеры нашего домика в этих форматах:

Размер PNG

Размер SVG

Размер в шрифте​

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

Домик в .png и .svg сохраняется в своем формате

​При клике на домик в виде символа →

​Сохранение возможно только в формате всего HTML

Через инспектор видим, что это класс​

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

Напоследок — аудит на реальном хостинге. Указывается лишь только формат PNG, оказывающий какую-никакую нагрузку:

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

Заранее благодарен за прочтение и ваше время!

Добавление векторной графики в Интернет — Изучите веб-разработку

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

Примечание : эта статья не предназначена для обучения вас SVG; что это такое и как добавить его на веб-страницы.

В сети вы будете работать с двумя типами изображений — растровых изображений и векторных изображений :

• Растровые изображения определяются с использованием сетки пикселей — файл растрового изображения содержит информацию, показывающую, где именно должен быть размещен каждый пиксель и какого именно цвета он должен быть.Популярные растровые веб-форматы включают Bitmap ( .bmp ), PNG ( .png ), JPEG ( .jpg ) и GIF ( .gif .)
.
• Векторные изображения определяются с использованием алгоритмов — файл векторного изображения содержит определения формы и пути, которые компьютер может использовать для определения того, как изображение должно выглядеть при визуализации на экране. Формат SVG позволяет нам создавать мощную векторную графику для использования в Интернете.

Чтобы понять разницу между ними, давайте рассмотрим пример.Вы можете найти этот пример в прямом эфире в нашем репозитории Github как vector-versus-raster.html — он показывает два, казалось бы, идентичных изображения рядом, красной звезды с черной тенью. Разница в том, что левый — это PNG, а правый — изображение SVG.

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

Примечание : Все изображения выше на самом деле являются PNG-изображениями, где левая звезда в каждом случае представляет растровое изображение, а правая звезда — векторное изображение. Опять же, перейдите к демонстрации vector-versus-raster.html для реального примера!

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

SVG — это язык на основе XML для описания векторных изображений. Это в основном разметка, как и HTML, за исключением того, что у вас есть много разных элементов для определения фигур, которые вы хотите отобразить в своем изображении, и эффектов, которые вы хотите применить к этим фигурам. SVG предназначен для разметки графики, а не содержимого. В самом простом случае у вас есть элементы для создания простых форм, например и . Более продвинутые функции SVG включают (преобразование цветов с помощью матрицы преобразования), (анимация частей векторной графики) и (применение маски поверх изображения.)

В качестве простого примера следующий код создает круг и прямоугольник:

Это создает следующий результат:

Из приведенного выше примера может показаться, что SVG легко кодировать вручную. Да, вы можете вручную кодировать простой SVG в текстовом редакторе, но для сложного изображения это быстро становится очень трудным.Для создания изображений SVG большинство людей используют редактор векторной графики, такой как Inkscape или Illustrator. Эти пакеты позволяют создавать различные иллюстрации с помощью различных графических инструментов и создавать приближенные изображения фотографий (например, функция Trace Bitmap в Inkscape).

SVG имеет некоторые дополнительные преимущества помимо описанных выше:

• Текст в векторных изображениях остается доступным (что также приносит пользу вашему SEO).
SVG
• хорошо поддаются стилизации / написанию сценариев, потому что каждый компонент изображения представляет собой элемент, который можно стилизовать с помощью CSS или создать сценарий с помощью JavaScript.

Так зачем кому-то использовать растровую графику вместо SVG? Что ж, у SVG есть некоторые недостатки:

• SVG может очень быстро усложняться, а это означает, что размеры файлов могут увеличиваться; сложные SVG-файлы также могут занимать значительное время обработки в браузере.
SVG
• может быть сложнее создать, чем растровые изображения, в зависимости от того, какое изображение вы пытаетесь создать.
• SVG не поддерживается в старых браузерах, поэтому может не подходить, если вам нужно поддерживать старые версии Internet Explorer на вашем веб-сайте (поддержка SVG началась с IE9.)

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

В этом разделе мы рассмотрим различные способы добавления векторной графики SVG на свои веб-страницы.

Быстрый способ:

Чтобы встроить SVG через элемент , вам просто нужно указать его в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон).Если вы еще этого не сделали, прочтите Изображения в HTML.

Плюсы

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

Минусы

• Вы не можете управлять изображением с помощью JavaScript.
• Если вы хотите управлять содержимым SVG с помощью CSS, вы должны включить встроенные стили CSS в свой код SVG. (Внешние таблицы стилей, вызванные из файла SVG, не действуют.)
• Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например, : focus ).

Устранение неполадок и кросс-браузерная поддержка

Для браузеров, не поддерживающих SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG из своего атрибута src и использовать атрибут srcset (который распознают только недавние браузеры) для ссылки на SVG. В этом случае только поддерживающие браузеры будут загружать SVG — старые браузеры вместо этого будут загружать PNG:

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

  фон: url ("fallback.png ") центр без повтора;
фоновое изображение: url ("image.svg");
размер фона: содержать;  

• Включение SVG в строку сохраняет HTTP-запрос и, следовательно, может немного сократить время загрузки.
• Вы можете назначить class es и id s элементам SVG и стилизовать их с помощью CSS, либо внутри SVG, либо где бы вы ни поместили правила стиля CSS для своего HTML-документа.Фактически, вы можете использовать любой атрибут представления SVG в качестве свойства CSS.
• Встраивание SVG — единственный подход, который позволяет вам использовать взаимодействия CSS (например, : focus ) и анимацию CSS на вашем изображении SVG (даже в вашей обычной таблице стилей).
• Вы можете превратить разметку SVG в гиперссылку, заключив ее в элемент .

Минусы

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

Как встраивать SVG в

Определенно не лучший способ выбрать:

Минусы

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

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

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

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

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

Что такое файл SVG (и как его использовать)?

Масштабируемая векторная графика (SVG) — это уникальный тип формата изображения.В отличие от других разновидностей, SVG не полагаются на уникальные пиксели для создания изображений, которые вы видите. Вместо этого они используют «векторные» данные.

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

Давайте приступим!

Подпишитесь на наш канал Youtube

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

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

Это другой вид графического файла, называемый Portable Network Graphic (PNG), используемый для иллюстраций и рисунков. Если вы хотите воспроизвести что-то подобное с помощью векторной графики, вам нужно будет сгенерировать это с помощью кода XML (тот же, что используется для карт сайта.) Следующий код может дать такой же результат:

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

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

Зачем нужен файл SVG?

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

Формат SVG — фантастический вариант для целого ряда других сценариев:

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

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

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

Как создать файл SVG (2 способа)

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

1. Создание файла SVG вручную

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

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

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

2. Преобразование существующих изображений в SVG

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

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

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

Конечно, это только один вариант. Другие услуги конвертации PNG и JPG в SVG включают Convertio и Img2Go. Вам нужно будет провести небольшое исследование, чтобы найти наиболее подходящее решение для ваших нужд.

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

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

Как использовать файл SVG (в WordPress и вне его)

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

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

Однако процесс меняется, если вы используете WordPress. Система управления контентом (CMS) не поддерживает SVG из коробки. Если вы хотите включить поддержку SVG, чтобы вы могли загружать файлы прямо на свой веб-сайт, вам нужно использовать такой плагин, как Safe SVG:

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

Заключение

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

Некоторые отличные варианты включают Adobe Illustrator, InDesign и GIMP. Используя эти инструменты, вы можете создавать и конвертировать существующие изображения в SVG. Если вы используете WordPress, вы можете загрузить эти SVG-файлы с помощью плагина Safe SVG, а затем весело их анимировать.

У вас есть вопросы о том, как использовать файлы SVG? Давайте поговорим о них в разделе комментариев ниже!

Миниатюра изображения статьи от VectorsMarket / shutterstock.com

Как добавить масштабируемую векторную графику на вашу веб-страницу

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

В этой серии мы обсудили, что такое SVG, почему вам стоит их рассмотреть, а также основные векторные рисунки.

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

1. Встроить SVG XML прямо в вашу HTML-страницу

Изображение SVG можно добавить как островок кода прямо на вашу HTML-страницу с помощью внешних тегов :

  


  
  



   
 Встроенный SVG 
 

  
   

  

Этот метод работает во всех современных браузерах. SVG становится частью DOM страницы, поэтому им можно управлять с помощью CSS или JavaScript, возможно, для добавления анимации или реакции на события щелчка. (Обратите внимание, что любой JavaScript, встроенный в сам SVG, будет заблокирован.)

Основным недостатком является то, что SVG должен быть встроен в каждую страницу, где он требуется, и может потребоваться повторение для многоразовых значков.Это увеличивает вес страницы, и, хотя HTML может быть кэширован, код SVG не может быть использован повторно в другом месте (легко) .

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

Затем отдельные элементы можно использовать любое количество раз с SVG. используйте элемент :

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

2. Используйте тег

SVG могут быть добавлены на вашу веб-страницу, как и любое другое изображение:

Обычная ширина , высота , alt и другие атрибуты могут быть добавлены, если они вам потребуются.

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

Целевую привязку можно использовать, если в одном SVG определено несколько изображений, например myimage.svg # circle , но это не будет работать в старых браузерах.

3. Примените фоновое изображение CSS

SVG можно использовать в качестве фона CSS для любого элемента:

  #myelement {
  фоновое изображение: url ('./ image.svg');
}
  

URI встроенных данных с кодировкой UTF8 также могут быть полезны для небольших, регулярно используемых SVG, которые вряд ли будут часто меняться (и делать недействительной всю таблицу стилей):

 .myelement {
  background: url ('data: image / svg + xml; utf8,  ');
}
  

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

4. Загрузить в

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

5. Используйте

<объект> Tag

Тег HTML