以 HTML 格式显示 svg 文件

Question

我有这个代码：

<img src="https://piuksu.github.io/svg.svg" width="100">

这是行不通的。
我需要做什么？

Answer 1

SVG 图像（如您的https://piuksu.github.io/svg.svg）是一个 XML 文档。XML 是一种通用标记语言，可用于多种不同的目的。要显示 SVG 图像的浏览器需要知道它将显示哪种 XML 文档。因此，您必须设置 SVG 图像的命名空间（xmlns="http://www.w3.org/2000/svg"属性<svg>）（最好还设置 XML 声明（第一行））。

所以， 的内容https://piuksu.github.io/svg.svg必须是：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
  <path d="M0 50 L25 50 L25 97 L75 97 L75 50 L97 50" stroke="black" stroke-width="3" fill="none"/>
</svg>

内联示例（其中 URL 被数据 URI 替换，但工作原理相同）：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
  <path d="M0 50 L25 50 L25 97 L75 97 L75 50 L97 50" stroke="black" stroke-width="3" fill="none"/>
</svg>