我可以在一个文件中包含多个 SVG 图像吗？答案

【问题标题】：Can I have Multiple SVG images in a single file?我可以在一个文件中包含多个 SVG 图像吗？
【发布时间】：2013-01-15 19:19:46
【问题描述】：

而不是执行以下操作：

<html>
<body>
  <embed src="circle.svg" type="image/svg+xml" /> 
  <embed src="square.svg" type="image/svg+xml" /> 
  <embed src="triangle.svg" type="image/svg+xml" />  
</body>
</html>

我宁愿做这样的事情

<html>
<body>
<embed src="shapes.svg" type="image/svg+xml" id="circle" /> 
<embed src="shapes.svg" type="image/svg+xml" id="square" /> 
<embed src="shapes.svg" type="image/svg+xml" id="triangle" />  
</body>
</html>

带有可能看起来像这样的 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 xmlns="http://www.w3.org/2000/svg" version="1.1" >

  <svg id="circle">
    <circle cx="100" cy="50" r="40" stroke="black"
    stroke-width="2" fill="red" />
  </svg> 

  <svg id="square">
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
  </svg>

  <svg id="triangle">
    <line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  </svg>
</svg>

看起来 SVG 只是 XML，我应该能够将我的所有图像存储在一个文件中，该文件可以一次性下载并在整个站点中使用。

【问题讨论】：

如果你的意图是当你像<embed src="shapes.svg#triangle" type="image/svg+xml" /> 那样调用它时只有“三角形”可见，你将不得不等待浏览器赶上来，因为还没有支持：@987654321 @。但是，您可以将其视为任何普通的 spritemap。
重复的stackoverflow.com/questions/14562136/…?

标签： css html svg

【解决方案1】：

是的，但是 XML 文档需要一个根节点。你的有三个。尝试将三个节点包装在一个 svg 元素中，并将命名空间和版本号移动到它。似乎通过http://validator.w3.org/check进行验证

<?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 xmlns="http://www.w3.org/2000/svg" version="1.1">
    <svg id="circle">
      <circle cx="100" cy="50" r="40" stroke="black"
      stroke-width="2" fill="red" />
    </svg> 

    <svg id="square">
      <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    </svg>

    <svg id="triangle">
      <line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
      <line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
      <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
</svg>

【讨论】：

我不会发誓这是最好的解决方案，只是想到的第一个。所有 XML 文档都必须有一个根节点。

【解决方案2】：

在 html 文档中只能有一个根节点。然而，有多种方法可以实现您想要的。

一种方法是SVG Stacks，它的工作原理是让所有图形相互叠加，然后使用 CSS 显示您想要查看的图形。

另一种方法可能是有一个像这样的shapes.svg，所有的图纸都在不同的地方

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <g transform="translate(0,0)">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </g>

  <g transform="translate(0,200)">
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
  </g>
  <g transform="translate(0,400)">
    <line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  </g>
</svg>

然后使用 svgView 只显示你想要的位。

<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px;        height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/> 
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>  
</body>
</html>

所有这些确实意味着您在 UA 中使用了更多内存，因为整个 svg 文件被加载了 3 次，而您每次只能看到其中的一部分。

【讨论】：

每次加载SVG文件？每次使用 embed 语句时都会加载吗？
它不会获取它 3 次，但它会创建完整的 DOM 3 次。
我今天看到了一个很好的例子，这让我重新审视了这篇文章。它基本上使用相同的解决方案。 codepen.io/NielsOeltjen/pen/uCgLI
我继续并接受了答案，尽管我仍然对 .svg 文件的未来更好的日子抱有希望。

【解决方案3】：

参考：

<svg alt="">
    <use xlink:href="shapes.svg#circle"></use>
</svg>
<svg alt="">
    <use xlink:href="shapes.svg#square"></use>
</svg>
<svg alt="">
    <use xlink:href="shapes.svg#triangle"></use>
</svg>

shapes.svg：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="circle">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </symbol>
    <symbol id="square">
        <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    </symbol>
    <symbol id="triangle">
        <line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
        <line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
        <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
    </symbol>
</svg>

【讨论】：

有人做过这个例子吗？我看到了 4 条赞成票，但我自己无法让它发挥作用。
是的。你有什么问题？
@JeremyA.West 为外部文件添加了 XML 版本、编码和 SVG Doctype。我相信这应该主要影响Safari。让我知道您是否仍然遇到问题或者这可以解决问题。谢谢。