Изучение различных методов использования элемента для встроенного SVG - Fcodenotes

SVG (масштабируемая векторная графика) — это мощный и гибкий формат для создания векторной графики в Интернете. Он позволяет создавать детальные и независимые от разрешения изображения, которые можно масштабировать без потери качества. Одним из распространенных способов использования SVG является использование

Метод 1: встроенный SVG с использованием

<!DOCTYPE html>
<html>
  <head>
    <title>Inline SVG Example</title>
  </head>
  <body>
    <h1>Inline SVG Example</h1>
    <svg width="200" height="200">
      <circle cx="100" cy="100" r="50" fill="blue"/>
    </svg>
  </body>
</html>

Метод 2: встроенный SVG с использованием

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Inline SVG Example</title>
  </head>
  <body>
    <h1>Inline SVG Example</h1>
    <svg>
      <use xlink:href="path/to/external.svg#my-svg"/>
    </svg>
  </body>
</html>

external.svg:

<svg xmlns="http://www.w3.org/2000/svg" id="my-svg" width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="50" fill="blue"/>
</svg>

Метод 3: встроенный SVG с использованием JavaScript
Вы можете динамически генерировать элементы SVG с помощью JavaScript и вставлять их в DOM. Вот пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Inline SVG Example</title>
  </head>
  <body>
    <h1>Inline SVG Example</h1>
    <div id="svg-container"></div>
    <script>
      const container = document.getElementById('svg-container');
      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.setAttribute('width', '200');
      svg.setAttribute('height', '200');
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('cx', '100');
      circle.setAttribute('cy', '100');
      circle.setAttribute('r', '50');
      circle.setAttribute('fill', 'blue');
      svg.appendChild(circle);
      container.appendChild(svg);
    </script>
  </body>
</html>

Метод 4: встроенный SVG с использованием CSS-фонового изображения
SVG также можно использовать в качестве фонового изображения с помощью CSS. Вот пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Inline SVG Example</title>
    <style>
      .svg-background {
        width: 200px;
        height: 200px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><circle cx="100" cy="100" r="50" fill="blue" /></svg>');
      }
    </style>
  </head>
  <body>
    <h1>Inline SVG Example</h1>
    <div class="svg-background"></div>
  </body>
</html>

Встроенный SVG с использованием