如何将本地SVG文件中的<svg>元素追加到HTML中？

你可以通过Fetch API加载SVG文件内容，直接将解析后的<svg>元素追加到DOM中，无需手动创建元素和复制属性，步骤如下：

方法一：加载并插入完整SVG元素 #

这种方法会保留原SVG文件的所有属性和子元素，适合需要后续操作SVG元素的场景：

fetch('./public/images/x.svg')
  .then(res => res.text())
  .then(svgContent => {
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = svgContent;
    const svgElement = tempContainer.querySelector('svg');
    if (svgElement) {
      document.body.appendChild(svgElement);
    }
  })
  .catch(err => console.error('SVG加载失败:', err));

方法二：直接插入SVG文本内容 #

如果不需要单独操作SVG元素，可以更简洁地直接插入文本：

fetch('./public/images/x.svg')
  .then(res => res.text())
  .then(svgContent => {
    document.body.insertAdjacentHTML('beforeend', svgContent);
  })
  .catch(err => console.error('SVG加载失败:', err));

注意事项 #

• 需在服务器环境下运行：本地直接打开HTML文件（file://协议）会触发跨域限制，导致Fetch失败，可使用http-server等工具启动本地服务器。
• 确认路径正确：./public/images/x.svg是相对于当前HTML文件的路径，需根据实际项目结构调整。

对比你当前手动创建元素的方式，这种方法能直接复用原SVG文件的内容，避免手动复制属性的错误，也更易维护。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan