<pre class="hljs"><code>SVG (Scalable Vector Graphics) - это формат графических данных, который позволяет создавать и отображать различные векторные изображения с использованием кода. Он основан на языке разметки XML, что делает его легко читаемым для компьютеров и людей.</code></pre>
<p>Преимуществами использования SVG в HTML являются масштабируемость, анимационные возможности и поддержка интерактивности. Возможность масштабирования векторных изображений без потери качества является ключевой особенностью SVG. Это делает SVG идеальным выбором для отображения иконок, логотипов и других элементов интерфейса пользователя на веб-страницах.</p>
<p>Вот пример кода HTML, который включает в себя SVG-изображение:</p>
<pre class="hljs"><code><!DOCTYPE html>
<html>
<head>
<title>Пример SVG в HTML</title>
</head>
<body>
<h1>SVG в HTML</h1>
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" fill="red" />
</svg>
</body>
</html>
</code></pre>
<p>В приведенном примере мы создаем простой SVG-элемент rect, который обозначает прямоугольник. Он имеет координаты x и y, ширину width, высоту height и цвет заполнения fill.</p>
<p>Можно использовать различные элементы и атрибуты SVG для создания более сложных и креативных изображений. Дополнительные примеры кода можно найти в SVG-спецификации W3C и в различных онлайн-ресурсах, посвященных разработке веб-графики.</p>
<p>Кроме того, SVG поддерживает анимацию и интерактивность. С помощью JavaScript можно взаимодействовать с SVG-элементами и изменять их параметры в реальном времени. Например, можно создать анимацию изменения размера или цвета элемента с использованием атрибутов animate или transition.</p>
<p>Вот пример использования анимации SVG с помощью JavaScript:</p>
<pre class="hljs"><code><!DOCTYPE html>
<html>
<head>
<title>Анимация SVG</title>
</head>
<body>
<h1>Анимация SVG</h1>
<svg width="300" height="200">
<rect id="myRect" x="50" y="50" width="200" height="100" fill="red">
<animate attributeName="width" from="200" to="400" dur="2s" repeatCount="indefinite" />
</rect>
</svg>
<script>
var rect = document.getElementById("myRect");
rect.addEventListener("mouseover", function() {
this.setAttribute("fill", "blue");
});
rect.addEventListener("mouseout", function() {
this.setAttribute("fill", "red");
});
</script>
</body>
</html>
</code></pre>
<p>В этом примере мы добавляем анимацию изменения ширины прямоугольника с помощью атрибута animate. Он позволяет указать начальное и конечное значения, продолжительность и повторение анимации. Также мы добавляем обработчики событий mouseover и mouseout, чтобы изменить цвет прямоугольника при наведении курсора на него.</p>
<p>SVG является мощным инструментом для создания графических элементов на веб-странице. Он позволяет разработчикам создавать векторные изображения с помощью кода и добавлять им анимации и интерактивность. Использование SVG в HTML дает большую гибкость и креативность при создании пользовательского интерфейса и визуальных эффектов.</p>