嵌入“SVG”元素的svg

Question

我对一个复杂的SVG图像有一个问题。

它可以在Chrome和Firefox上工作，但是即使使用在线工具或瘸子以及Inkscape，也无法将其转换为PNG图像。

我不知道问题出在哪里。也许是因为它是一个由另外两个SVG图像嵌入的映像。

这是SVG文件。

要重现这个问题:打开与浏览器链接的SVG文件:它可以工作。

用GIMP打开它，图像是空的。

有同样问题的一个更简单的例子：

​

<?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 viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
      <svg id="pippo" viewBox="0 0 10 10" >
      <circle id="myCircle" cx="5" cy="5" r="5" />
    </svg>

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- Using my graphical objects -->

  <rect height="100%" width="100%" fill="#fc0" />

  <use x="0" y="0" href="#pippo" fill="url('#myGradient')" />
</svg>

​

Answer 1

对于SVG 1，您需要在xlink:href元素上使用属性href而不是href。

<use x="0" y="0" xlink:href="#pippo" fill="url('#myGradient')" />

您还需要xlink元素上的<svg>命名空间。

<svg 
  viewBox="0 0 10 10" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>

因为SVG 2，不建议使用前缀但是SVG 2是一个W3C候选推荐，它的所有特性还没有被所有的浏览器和编辑器所支持。

完整的SVG 1示例：

​

<?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 viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Some graphical objects to use -->
  <defs>
    <svg id="pippo" viewBox="0 0 10 10">
      <circle id="myCircle" cx="5" cy="5" r="5" />
    </svg>

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <rect height="100%" width="100%" fill="#fc0" />
  <use x="0" y="0" xlink:href="#pippo" fill="url('#myGradient')" />
</svg>

​

Answer 2

解决办法: SVG到PDF通过本机浏览器功能“保存到PDF”(打印模式)

由于火狐、铬和WebKit具有强大的内置PDF导出功能，再加上way 比任何“桌面”应用程序更好的SVG支持，我们可以将复杂的SVG图像转换为一个扁平的、‘硬连线’的矢量文件。

理想结果

• 保留所有矢量数据(也可以在向量应用程序(如Inkscape、Adobe Illustrator、菲格玛 )中打开。
• 像嵌套的SVG图像或<use>元素以及转换这样的复杂性被重新定位到硬编码向量x/y坐标。

..。但是抑制你的热情:常见的问题

• 模式和一些复杂的梯度可能是光栅化的。
• 您将失去结构数据，如层，ID和其他可编辑的功能。

手动SVG导出优化

• 正如@Yukulélé已经指出的那样:一些语法约定和更新的属性可能过于累进
• 尝试将基于CSS的样式替换为属性- svgomg可能会有所帮助。
• 定义在或可能具有古怪的递归依赖关系中的可重用元素
• 尝试清理不必要的或无效的属性(例如十六进制RGBA)并修复不完整的SVG嵌套(缺少结束标记)
• 当父SVG元素添加了viewBox和宽度/高度属性(至少在Adobe中)时，文档的尺寸和纵横比通常可以更好地保留(通过图形应用程序)。