Методы встраивания графики SVG с использованием тега img в HTML

Чтобы встроить изображение SVG с помощью тега в HTML, вы можете использовать следующие методы:

Метод 1: встроенный SVG

  1. Откройте файл SVG в текстовом редакторе.
  2. Скопируйте все содержимое файла SVG.
  3. В HTML-файле используйте тег и задайте для атрибута srcURI данных.
  4. Задайте для атрибута srcзначение "data:image/svg+xml,[Содержимое SVG]", где [Содержимое SVG]— это скопированное содержимое из файла SVG.
  5. Добавьте в тег любые необходимые атрибуты (например, ширину, высоту, 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

  1. Сохраните файл SVG с расширением .svg.
  2. Поместите файл SVG в тот же каталог, что и файл HTML.
  3. Используйте тег и задайте для атрибута srcотносительный путь к файлу SVG.

Пример:

<img src="graphic.svg" alt="SVG Graphic" />