0

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

<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 中正确编辑和显示的任何想法或想法。

4

2 回答 2

0

在浏览器中打开包装文件。右键单击包含嵌入 SVG 的区域，然后选择“将（图像）另存为...”。如果包装器包含多个<image>标签，您将不得不将它们保存到单独的文件中，但至少它们将采用 Inkscape 可以处理的形式。

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

在此处输入图像描述

顺便说一句，上面关于 CSS 的推测是未经证实的。Inkscape 会将<style>元素的内容转换为内联style属性，否则会正确处理它们。上面的屏幕截图中非常清楚地说明了发生的事情：通过<image>标签嵌入的数据 URL 在 Inkscape 中是不可编辑的。

于 2022-01-11T15:54:59.433 回答
0

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

  1. 用解码的数据 url 内容替换您的嵌入<image>元素。您的父 svg 应如下所示：

     <!-- parent svg -->
 <svg xmlns="http://www.w3.org/2000/svg" >
     <!-- embedded svg decoded data url -->
     <svg xmlns="http://www.w3.org/2000/svg" height="50000" width="50000">
     <style>
         .gliffy-rte-text {
          }
     </style>
     </svg>
 </svg>

  2. 使用SVGOMG “内联样式”和“样式属性”参数：

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>
于 2022-01-11T01:08:36.220 回答