HTML-тег <svg>

HTML-тег <svg> используется для определения масштабируемой векторной графики(SVG) — графики на основе XML, которую можно масштабировать без потери качества. Форматы SVG не зависят от разрешения, что делает их идеальными для создания адаптивной и интерактивной графики, такой как значки, диаграммы, иллюстрации и анимация, непосредственно в HTML-документе.

Элемент <svg> может содержать различные графические элементы, такие как фигуры, текст и пути, а также атрибуты для их стилизации и анимации.

Базовый синтаксис HTML-тега <svg>

Базовая структура тега <svg> : 

<svg width="100" height="100">
    
</svg>

Атрибуты width и height определяют размер холста SVG, а графические элементы размещаются внутри элемента <svg> .

Пример простого SVG

Вот пример SVG, содержащего круг, прямоугольник и текст: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Simple SVG Example</h2>

        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="50" fill="blue" />
            <circle cx="150" cy="50" r="30" fill="red" />
            <text x="50" y="150" font-size="20" fill="green">Hello SVG</text>
        </svg>

    </body>
</html>
Пример простого SVG

Пояснение: Этот SVG-файл создаёт синий прямоугольник, красный круг и зелёную текстовую метку. Элементы размещаются на холсте с помощью координат и размеров.

Атрибуты HTML-тега <svg>

  • width: определяет ширину холста SVG.
  • высота: определяет высоту холста SVG.
  • viewBox: определяет систему координат и масштабирование для SVG.
  • xmlns: Указывает пространство имен XML, обычно http://www.w3.org/2000/svg .
  • заливка: устанавливает цвет заливки по умолчанию для фигур.
  • Обводка: определяет цвет и ширину контура фигур.

Эти атрибуты позволяют эффективно настраивать и контролировать холст SVG и его элементы.

Использование <svg> для адаптивной графики

Чтобы сделать SVG-изображения адаптивными, можно использовать атрибут viewBox : 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="100%" height="100%">
    <circle cx="100" cy="100" r="50" fill="purple" />
</svg>
Использование svg для адаптивной графики

Пояснение: Атрибут viewBox обеспечивает пропорциональное масштабирование SVG, адаптируясь к разным размерам экрана без искажений.

Стилизация SVG с помощью CSS

Элементы SVG можно стилизовать с помощью встроенных атрибутов или внешнего CSS: 

<style>
    circle {
        fill: orange;
        stroke: black;
        stroke-width: 2px;
    }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="50" />
</svg>
Стилизация SVG с помощью CSS

Результат: с помощью CSS кругу присвоена оранжевая заливка, черная рамка и обводка шириной 2 пикселя.

Анимация в SVG

SVG поддерживает анимацию с использованием элементов <animate> или <animateTransform> : 

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animate attributeName="r" from="10" to="50" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>

Объяснение: Эта анимация заставляет круг непрерывно расти и сжиматься, изменяя его радиус( r ) в течение 2 секунд.

Практическое применение тега <svg>

  • Значки: создание независящих от разрешения значков для веб-сайтов и приложений.
  • Диаграммы и графики: используйте SVG для визуализации динамических или интерактивных данных.
  • Иллюстрации: включите адаптивную и масштабируемую векторную графику для веб-дизайна.
  • Анимация: добавляйте привлекательные анимированные элементы для интерактивности и дизайна.
  • Пользовательские компоненты пользовательского интерфейса: используйте SVG для кнопок, ползунков и других пользовательских элементов интерфейса.

Тег <svg> — мощный инструмент для создания гибкой, масштабируемой и интерактивной графики непосредственно в браузере.