SVG в HTML: современные методы использования

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

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

html



	

В этом примере мы создаем прямоугольник с синим фоном, круг с белым цветом, и текст "SVG Example". Обратите внимание, что мы устанавливаем размеры SVG-изображения с помощью атрибутов width и height, а также устанавливаем viewBox, который используется для масштабирования содержимого SVG-изображения.

Для изменения свойств SVG-элементов, мы можем использовать CSS или JavaScript. Например, мы можем изменить цвет прямоугольника и его размер, используя следующий CSS-код:

css
rect {
	fill: red;
	width: 200px;
	height: 200px;
}

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

css
circle {
	fill: blue;
	animation-name: grow;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes grow {
	0% {
		r: 100;
		fill: blue;
	}
	50% {
		r: 150;
		fill: green;
	}
	100% {
		r: 100;
		fill: blue;
	}
}

Эта анимация использует ключевые кадры (keyframes), чтобы установить начальный размер и цвет круга, а затем плавно изменять его размер и цвет с помощью transition эффекта. Обратите внимание, что мы устанавливаем animation-iteration-count на "infinite", чтобы анимация продолжалась бесконечно.

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