• By - dvostr
  • Posted on
  • Posted in html

Использование SVG в HTML

Итак, думал с чего же начать… Начал с одновременно и простого и сложного. Векторная графика SVG в HTML.

Что же такое SVG? Википедия по этому поводу говорит: SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описания трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года. В 2001 году вышла версия 1.0, в 2011 — версия 1.1, которая остаётся актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 2.

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

Прекрасно! Векторная, да еще и масштабируемая, да к тому же XML! То что надо для использования при создании сайта.

Чем же это хорошо? Ну… В принципе, одного того что не будет потери качества контента при изменение размера (масштабирования) контента уже более чем достаточно. А уже анимация и интеграция растровой графики может (естественно при адекватной реализации) оживить Ваш сайт (HTML, где бы вы его не использовали)

Начнем!

Интеграция

Для интеграции объекта SVG на странице есть несколько путей:

  • файл (img)
  • Embedded
  • css
  • JS

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

Файл (img) — для отображения емкого статичного или анимированного контента

Embedded (DOM элемент) — В принципе, для всего что угодно. Но для иконок и пиктограм не слишком подходит

CSS — для отображения стилизованных (использующих внутренние стили и темы) иконок и пиктограм

JS — для формирования динамического и интерактивного контента

Картинка

SVG можно (а иногда и нужно) вставлять как картинку (<img src=»XXXX»>). Минусом данного решения является отсутствие интерактивности (хотя встроенная анимация будет доступна)

<img src="/uploads/examples/futurama_planet_express.svg" alt="" width="240" height="220"/>

И анимированный SVG

<img src="/uploads/examples/SVG_animation_using_SMIL.svg" alt="" width="240" height="220"/>

Embedded (DOM элемент)

Для добавления элемента SVG в HTML код достаточно просто добавить соответствующий код SVG в HTML.

Для установки размеров элемента небходимо задать аттрибуты width и height элемента svg

<svg ... width="50px" height="50px" ... />
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px"
	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<style type="text/css">.st0{fill:#4F453C;}</style>
<g>
<g><path class="st0" d="M21,39.9c-11.1,0-20.2-8.5-20.2-19c0-10.5,9-19,20.2-19c11.1,0,20.2,8.5,20.2,19C41.1,31.4,32.1,39.9,21,39.9
L21,39.9z M21,5.8C12.1,5.8,4.8,12.6,4.8,21c0,8.4,7.2,15.2,16.1,15.2c8.9,0,16.1-6.8,16.1-15.2C37.1,12.6,29.8,5.8,21,5.8L21,5.8
z"/></g>
<g><path class="st0" d="M9.6,21h-2c0-6.9,6-12.6,13.4-12.6v1.9C14.7,10.3,9.6,15.1,9.6,21L9.6,21z"/>
</g>
<g><path class="st0" d="M45,46.2c-0.5,0-1-0.2-1.4-0.6L32.3,35.1c-0.8-0.7-0.8-1.9,0-2.7c0.8-0.7,2.1-0.7,2.9,0L46.4,43			c0.8,0.7,0.8,1.9,0,2.7C46,46,45.5,46.2,45,46.2L45,46.2z"/>
</g>
</g>
</svg>

Использование SVG на сайте

Спектр применения SVG на сайте кране широк: от картинок и иконок до анимаций и интерактивных карт.

В чем же преимущества SVG?

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

Во-вторых, с ним прекрасно работают css маски:

.uicon {
    display: inline-flex;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    left: 0px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-size: contain;
    background-color: #e21a55;
}
.uicon.uicon-favorite {
    -webkit-mask-image: url(data:image/svg+xml,%3csvg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"%3e%3cstyle type="text/css"%3e.st0{fill:%23000000;}%3c/style%3e%3cg%3e%3cg%3e%3cpath class="st0" d="M24.3,45c-0.3,0-0.6-0.1-0.9-0.3c-0.1-0.1-0.2-0.1-0.2-0.2l-0.6-0.4c-1.4-1.1-4.8-3.5-7.1-5.4 c-8.6-7-13-12.1-13.8-16C1.3,21.5,1,20,1,18.4c-0.1-4.2,1.5-8.2,4.1-11.1c2.4-2.6,5.6-4.1,9-4.1h0c3.8,0,7.3,1.6,9.7,4.4 c2.4-2.9,5.9-4.6,9.7-4.7l0.2,0C41,3,46.9,9.6,47,17.8c0,1.6-0.2,3.1-0.6,4.6c-0.7,3.7-5.1,9.1-13.4,16.2 c-3.2,2.8-5.8,4.8-7.7,6.1C25,44.9,24.7,45,24.3,45L24.3,45z M14.3,7.3c-2.4,0-4.7,1-6.4,2.8c-2,2.1-3,5.1-3,8.2 c0,1.2,0.2,2.3,0.5,3.3c0.4,1.8,2.5,5.6,12.4,13.8c2,1.6,4.9,3.8,6.5,4.9c1.7-1.2,3.8-2.9,6.2-5.1c9.8-8.4,11.7-12.4,12-14 c0.3-1.3,0.5-2.4,0.5-3.5C43,11.9,38.8,7.1,33.8,7.1c0,0-0.2,0-0.2,0c-3.3,0-6.3,1.9-8,5c-0.3,0.6-1,1-1.7,1c-0.6,0-1.3-0.4-1.7-1 C20.5,9.2,17.5,7.3,14.3,7.3L14.3,7.3z"/%3e%3c/g%3e%3cg%3e%3cpath class="st0" d="M38.8,21.6c-0.1,0-0.1,0-0.2,0c-0.5-0.1-0.9-0.7-0.8-1.2l0.1-0.6c0.2-0.6,0.3-1.2,0.2-1.9 c0-3.2-2.1-5.7-4.6-5.7c-0.5,0-1-0.5-1-1c0-0.6,0.4-1,1-1c3.6,0,6.5,3.4,6.6,7.7c0,0.8-0.1,1.7-0.3,2.5l-0.1,0.4 C39.7,21.3,39.3,21.6,38.8,21.6L38.8,21.6z"/%3e%3c/g%3e%3c/g%3e%3c/svg%3e);
    mask-image: url(data:image/svg+xml,%3csvg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"%3e%3cstyle type="text/css"%3e.st0{fill:%23000000;}%3c/style%3e%3cg%3e%3cg%3e%3cpath class="st0" d="M24.3,45c-0.3,0-0.6-0.1-0.9-0.3c-0.1-0.1-0.2-0.1-0.2-0.2l-0.6-0.4c-1.4-1.1-4.8-3.5-7.1-5.4 c-8.6-7-13-12.1-13.8-16C1.3,21.5,1,20,1,18.4c-0.1-4.2,1.5-8.2,4.1-11.1c2.4-2.6,5.6-4.1,9-4.1h0c3.8,0,7.3,1.6,9.7,4.4 c2.4-2.9,5.9-4.6,9.7-4.7l0.2,0C41,3,46.9,9.6,47,17.8c0,1.6-0.2,3.1-0.6,4.6c-0.7,3.7-5.1,9.1-13.4,16.2 c-3.2,2.8-5.8,4.8-7.7,6.1C25,44.9,24.7,45,24.3,45L24.3,45z M14.3,7.3c-2.4,0-4.7,1-6.4,2.8c-2,2.1-3,5.1-3,8.2 c0,1.2,0.2,2.3,0.5,3.3c0.4,1.8,2.5,5.6,12.4,13.8c2,1.6,4.9,3.8,6.5,4.9c1.7-1.2,3.8-2.9,6.2-5.1c9.8-8.4,11.7-12.4,12-14 c0.3-1.3,0.5-2.4,0.5-3.5C43,11.9,38.8,7.1,33.8,7.1c0,0-0.2,0-0.2,0c-3.3,0-6.3,1.9-8,5c-0.3,0.6-1,1-1.7,1c-0.6,0-1.3-0.4-1.7-1 C20.5,9.2,17.5,7.3,14.3,7.3L14.3,7.3z"/%3e%3c/g%3e%3cg%3e%3cpath class="st0" d="M38.8,21.6c-0.1,0-0.1,0-0.2,0c-0.5-0.1-0.9-0.7-0.8-1.2l0.1-0.6c0.2-0.6,0.3-1.2,0.2-1.9 c0-3.2-2.1-5.7-4.6-5.7c-0.5,0-1-0.5-1-1c0-0.6,0.4-1,1-1c3.6,0,6.5,3.4,6.6,7.7c0,0.8-0.1,1.7-0.3,2.5l-0.1,0.4 C39.7,21.3,39.3,21.6,38.8,21.6L38.8,21.6z"/%3e%3c/g%3e%3c/g%3e%3c/svg%3e);
}
<a href="#"><i class="uicon uicon-favorite"></i></a>

Меняя background-color в css можно оперативно (даже с анимацией) менять цвета иконок

<a href="#"><i class="uicon uicon-favorite" style="background-color: #EF5232;"></i></a>

<a href="#"><i class="uicon uicon-favorite" style="background-color: #52EF32;"></i></a>

<a href="#"><i class="uicon uicon-favorite" style="background-color: #5232EF;"></i></a>

В-третьих, можно создавать интересные элементы с мелкой детализацией:

<div class="row divider bg-dark"><i class="divider-icon divider-icon-image"></i></div>

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

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

Как пример, на SVG реализован виджет продажи билетов https://barvikhaconcerthall.ru/event/1164/#buy

Tags:
Previous Article
Next Article