如何在HTML文件中嵌入SVG代码而非使用img标签？

• 清理SVG代码
  移除开头的<?xml ...?>声明和<!DOCTYPE ...>标签，保留<svg>根标签及其内部内容，同时必须保留xmlns="http://www.w3.org/2000/svg"属性（这是SVG在HTML中正确渲染的必要条件）。
  示例清理后的SVG：

  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
  </svg>
  

• 嵌入HTML结构
  将清理后的SVG代码直接插入HTML的任意位置（比如<body>内的容器中），示例：

  <body>
    <div class="icon-wrapper">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
      </svg>
    </div>
  </body>
  

• 为Path设置样式
  有三种常用方式：

  1. 内联样式：直接在<path>标签中添加style属性

     <path style="fill: #ff4444; stroke: #000; stroke-width: 1px;" d="..."/>
     

  2. CSS类选择器：给<path>添加class，在样式表中定义样式

     <path class="custom-icon-path" d="..."/>
     

     对应CSS：

     .custom-icon-path {
       fill: #22dd22;
       stroke: #333;
       stroke-width: 1px;
     }
     

  3. 层级选择器：通过父容器或直接选择svg path设置样式

     .icon-wrapper svg path {
       fill: #3366ff;
     }
     

• 额外提示
  如果SVG本身带有内部样式表，可以直接保留在<svg>标签内，比如：

  <svg ...>
    <style>
      path {
        fill: #ff9900;
        transition: fill 0.3s;
      }
      path:hover {
        fill: #ff6600;
      }
    </style>
    <path d="..."/>
  </svg>
  

内容的提问来源于stack exchange，提问作者João Simões