Как вставить код svg в html?

Пользователь

от caterina , в категории: HTML/CSS , 3 года назад

Как вставить код svg в html?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kendall_mckenzie , 3 года назад

@caterina  Вставить код svg в html можно через тег img :


1
<img src="1.svg" alt="mysvg">


или через тег object :


1
<object type="image/svg+xml" data="1.svg" width="80px"></object>


Пользователь

от rodger.botsford , год назад

@caterina 

Для вставки кода SVG в HTML можно использовать тег <svg>. Например, чтобы вставить следующий код SVG:

1
2
3
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>


нужно написать следующий код HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>
</html>


В теге <svg> важно указать атрибут viewBox, который задает размеры и координаты изображения в SVG. Также можно добавлять различные атрибуты для настройки внешнего вида графики, например, атрибуты stroke для цвета линии и fill для цвета заливки.