Как добавить svg в html

Узнайте, как легко добавить изображение в формате SVG в HTML с помощью тега svg и атрибута img. Примеры в статье.

Для добавления SVG (Scalable Vector Graphics) в HTML, вам потребуется использовать тег <svg>. SVG позволяет создавать векторную графику, которая масштабируется без потери качества.

Для начала, вам нужно создать SVG-элемент в вашем HTML-коде. Ниже приведен пример кода:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

В этом примере, мы создаем круг при помощи тега <circle> внутри SVG. Атрибуты cx и cy устанавливают координаты центра круга, r устанавливает радиус, stroke и stroke-width задают цвет и толщину обводки, а fill устанавливает цвет заливки.

Вы также можете добавить SVG-изображение, используя атрибут href в теге <image>:

<svg width="200" height="200">
  <image href="image.svg" width="200" height="200" />
</svg>

В этом примере, мы вставляем SVG-изображение с помощью тега <image> и указываем путь к файлу SVG в атрибуте href.

Таким образом, добавление SVG в HTML довольно просто с использованием тега <svg> и соответствующих элементов внутри него. SVG позволяет создавать масштабируемую и качественную векторную графику прямо в вашем HTML-коде.