Чтобы встроить изображение SVG с помощью тега в HTML, вы можете использовать следующие методы:
Метод 1: встроенный SVG
- Откройте файл SVG в текстовом редакторе.
- Скопируйте все содержимое файла SVG.
- В HTML-файле используйте тег
и задайте для атрибутаsrcURI данных. - Задайте для атрибута
srcзначение"data:image/svg+xml,[Содержимое SVG]", где[Содержимое SVG]— это скопированное содержимое из файла SVG. - Добавьте в тег
любые необходимые атрибуты (например, ширину, высоту, alt).
Пример:
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect width='200' height='200' fill='red' /></svg>" alt="SVG Graphic" />
Метод 2: внешний SVG
- Сохраните файл SVG с расширением
.svg. - Поместите файл SVG в тот же каталог, что и файл HTML.
- Используйте тег
и задайте для атрибутаsrcотносительный путь к файлу SVG.
Пример:
<img src="graphic.svg" alt="SVG Graphic" />