В HTML5, вы можете вставлять SVG элементы непосредственно в HTML-страницы.
Вставить SVG прямо в HTML-страницы
Ниже приведен пример простого SVG графики:
а вот HTML код:
пример
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"
/>
</svg>
</body>
</html> Попробуй сам " SVG Code explanation:
- SVG изображения начинается с <svg> элемента
- Ширина и высота атрибуты <svg> элемента задают ширину и высоту изображения SVG
- <circle> элемент используется , чтобы нарисовать круг
- Атрибуты Сх, Су определяют х и у координаты центра окружности. Если сх и су опущены, центр окружности установлен в положение (0, 0)
- r атрибут определяет радиус окружности
- Атрибуты обводки и погладить-импульсное управление, как выглядит контур фигуры. Мы устанавливаем контур круга на 4px зеленой "границы"
- fill атрибут относится к цвету внутри круга. Мы устанавливаем цвет заливки на желтый
- Закрытия </svg> Тег закрывает изображение SVG
Примечание: Так как SVG написан в XML, все элементы должны быть закрыты!