Inkscape中嵌入SVG

Question

我有一个SVG文件(导出的Gliffy图)，我想在Inkscape中打开和编辑它。当使用Chrome的developer选项查看文件的代码时，如下所示：

<svg xmlns="...>
  <g transform="...>
    <image xlink:href="data:image/svg+xml,%0A%20...></image>
  </g>
  ... (about 20 more <g>...</g> tags)
</svg>

当解码以%0A%20开头的部分时.

data:image/svg xml,
        <svg xmlns="http://www.w3.org/2000/svg" height="50000" width="50000">
            <style>
                .gliffy-rte-text {
                  ...

问题是，在Inkscape中，这些部分将被一个占位符取代，这个占位符告诉我“链接的图像没有找到”，并且按照推测的这里，Inkscape很可能无法正确地或可能地读取CSS样式。

我非常感谢关于如何转换文件的任何想法或想法，以便能够在Inkscape中正确地编辑和显示文件。

Answer 1

您可以使用SVGOMG将所有样式转换为元素属性。

1. 将嵌入的<image>元素替换为已解码的数据url内容。您的父svg应该如下所示：
2. 使用SVGOMG“内联样式”和“样式属性”参数：

​

​

您应该禁用所有其他优化参数，因为它们可能会剥离到许多其他属性。

预期在结果之前

    <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
        <style>
        circle{
            fill:none;
            stroke: orange;
            stroke-width:10;
          }
        </style>
        <circle cx="128" cy="128" r="100"/>
    </svg>

后

    <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
        <circle cx="128" cy="128" r="100" fill="none" stroke="orange" stroke-width="10"/>   
    </svg>

Answer 2

在浏览器中打开包装文件。右键单击包含嵌入式SVG的区域，并选择"Save (image) as.“。如果包装器包含多个<image>标记，则必须将它们保存到单独的文件中，但至少它们将以Inkscape能够处理的形式存在。

如果您想再次将它们放在一个SVG文件中，则必须通过Inkscape导入函数重新导入它们。请注意选择“包含作为可编辑的对象”，否则您将在开始时结束：

​

​

以上关于CSS的推测是没有根据的，顺便说一下。Inkscape将将<style>元素的内容转换为内联style属性，但否则将正确处理它们。发生的事情在上面的截图中说得很清楚:通过<image>标记嵌入的数据URL在Inkscape中是不可编辑的。