Что такое SVG изображения и как их применить

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

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

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

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

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

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

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

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

• Удаление xml описания
• Удаление описание типа документа
• Отчистка атрибутов
• И .т.д.

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

Вставка SVG на сайт

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

<img
  src="sample.svg"
  alt="sample img"
  height="100px"
  width="100px">

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

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

<img
  src="sample.png"
  alt="sample img"
  srcset="sample.svg">

То есть если браузер не знает SVG то он просто подгрузит png изображение которое поддерживают все.

Второй способ вставки с помощью CSS мы просто создаем класс, в котором указываем фоновым изображением SVG:

.ico_main {
	background: url("sample.png") no-repeat center;
	background-image: url("sample.svg");
	background-size: contain;
}

Здесь, как и в предыдущем примере учтена кросбраузерность и опять-таки мы не сможем поправить его с помощью JavaScript.

И последний третий способ, это вставка кода изображения непосредственно на сайт:

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

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

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

Освой PHP 8 и MySQL с нуля

Видеокурс "PHP и MySQL с Нуля до Гуру 3.0"

Получить курс