Web浏览器不显示svg文件

Question

我有一个graphics.svg 文件，其中包含以下代码：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="110">
  <rect width="400" height="110" style="fill:rgb(0,0,255);" />
</svg>

如果我从网络浏览器（Firefox、Chromium）打开该文件，则不会显示矢量图像。相反，文件以 XML 格式显示：

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<svg width="400" height="110">
    <rect width="400" height="110" style="fill:rgb(0,0,255);"/>
</svg>

这是因为svg文件应该嵌入到html文件中才能正常显示吗？

Answer 1

不，这是因为您没有为 svg 元素指定命名空间

xmlns="http://www.w3.org/2000/svg"

见the examples in the spec。

Answer 2

您缺少命名空间声明。

您需要将xmlns="http://www.w3.org/2000/svg" 添加为根<svg> 元素的属性，同时您也可以添加xmlns:xlink="http://www.w3.org/1999/xlink"。

有一些更完整的创作指南here，您可能想仔细阅读。