在 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 图像的名称空间（<svg> 上的 xmlns="http://www.w3.org/2000/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 替换，但它的工作原理相同）：

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj4KICA8cGF0aCBkPSJNMCA1MCBMMjUgNTAgTDI1IDk3IEw3NSA5NyBMNzUgNTAgTDk3IDUwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiLz4KPC9zdmc+" width="100"/>

在 HTML 中显示 svg 文件

Display svg file in HTML

html

svg