Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

SVG и SEO: Как Scalable Vector Graphics помогает улучшить поисковую оптимизацию

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



Как SVG-файлы помогают улучшить SEO?



1. Маленький размер файлов
SVG-файлы имеют малый размер по сравнению с растровыми изображениями (PNG, JPEG). Это ускоряет загрузку страницы, что положительно влияет на рейтинг в поисковых системах.

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

3. Масштабируемость без потери качества
SVG-изображения остаются четкими при любом разрешении экрана, что улучшает пользовательский опыт и повышает конверсию.

4. Поддержка а...

SVG: Атрибут transform

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

Что такое атрибут transform?


Атрибут transform позволяет изменять положение, ориентацию и размер элементов SVG. Он поддерживает шесть основных типов трансформаций:
  • translate: перемещение элемента по осям X и Y.
  • scale: масштабирование элемента по осям X и Y.
  • rotate: поворот элемента вокруг центральной точки.
  • skewX: наклон элемента по оси X.
  • skewY: наклон элемента по оси Y.
  • matrix: произвольная матричная трансформация.

Примеры использования атрибута transform



Translate
Трансформация translate позволяет переместить элемент на указанное количество единиц по осям X и Y:
Выделить
<rect x="10" y="10" width="100" height="100"
...

Копирование SVG

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

Так как все иконки находятся у меня в отдельном файле, в этом же файле я написал макет, который используется во многих SVG картинках:
Выделить
	<defs>
		<g id="model">
			<!-- Код макета -->
		</g>
	</defs>

Теперь там, где мне нужен макет, получаю его в иконку так:
Выделить
<use xlink:href="#model"/>

Важно: Если Вы как и я храните иконки в отдельном файле, и в этом файле используете тег <use>, в открывающемся теге <svg> должна присутствовать строка: xmlns:xlink="http://www.w3.org/1999/xlink":
Выделить
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Чтобы не повторять мои ошибки: Тема: Ошибки в коде SVG.

Возможно, будет интересно:
...

CSS переменные в SVG

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

Я создал файл: "svg.css", с таким содержимым:
Выделить
:root {
	--cool:   #0074FF; /* Оттенок синего */
	--murk:   #033C59; /* Оттенок синего + зелёного */
	--spring: #48CFAD; /* Оттенок зелёного */
	--smoke:  #CCD3EB; /* Оттенок серого */
	--fire:   #FC6459; /* Оттенок красного */
}

Подключил "svg.css" к документу. Теперь в SVG меняю:
Выделить
<g fill="#0074FF">

На:
Выделить
<g fill="var(--cool)">

Готово. Переменная отдаёт указанный ей код цвета.

CSS переменная должна начинаться с двойного дефиса (--).

...

Как выводить SVG иконки из отдельного файла (Подключение файла SVG)

SVG
Необходимо создать файл, где будут храниться у нас все спрайты SVG, назовём данный файл sprite.svg, с таким содержимым:
Выделить
<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="sprite1" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite1" -->
	</symbol>

	<symbol id="sprite2" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite2" -->
	</symbol>
</svg>

Тут внутри тега <svg> находятся два спрайта, "завёрнутые" в тег <symbol> с id="sprite1" и id="sprite2". По этим идентификаторам мы и будем выводить на экран наши спрайты, а поможет нам в этом тег <use>. Для вывода первого спрайта (sprite1), в нужном нам месте делаем так:
Выделить
<svg>
	<use xlink:href="sprite.svg#sprite1"></use>
</svg>

И, разумеется, для вывода второго спрайта (sprite2), делаем так:
Выделить
<svg>
	<use xlink:href="sprite.svg#sprite2"></use>
</svg>

Для изменения стилей спрайтов, например, размеров, можете добавлять атрибут class в тег <svg>:
Выделить
<svg class="nameClass">
	<use
...
Реклама