SVG » Web Мастерская

Блог

Web Мастерская

Рисование в SVG: От простого к сложному

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

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

1. Прямоугольник (<rect>)
Прямоугольник определяется четырьмя атрибутами: x, y, width и height:

Выделить

<rect x="10" y="10" width="100" height="100" fill="blue"/>

2. Окружность (<circle>)
Окружность определяется тремя атрибутами: cx, cy и r:

Выделить

<circle cx="50" cy="50" r="40" fill="green"/>

3. Линия (<line>)
Линия определяется четырьмя атрибутами: x1, y1, x2 и y2:

Выделить

<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2"/>

4. Многоугольник (<polygon>)
Многоугольник определяется атрибутом points, который содержит координаты вершин:

Выделить

<polygon points="10,10 50,10 50,50 10,50" fill="yellow"/>

Создание сложных изображений

1. Путь (<path>)
Путь...

Жалоба

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 переменная должна начинаться с двойного дефиса (--)....

Жалоба