Home > Mobile >  Embedded SVG into Inkscape
Embedded SVG into Inkscape

Time:01-12

I have a SVG file (an exported Gliffy diagram) that I want to open and edit in Inkscape. When viewing the code of the file using the developer options of Chrome, it looks like:

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

When decoding the part starting with ..., it translates to something like

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

The issue is, that in Inkscape those parts will be replaced by a placeholder telling me "Linked image not found" and as speculated SVGOMG

You should disable all other optimizing parameter, since they might strip to many other attributes.

Expected before result

    <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>
      

After

    <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>

CodePudding user response:

Open the wrapper file in a browser. Right-click on the area containing the embedded SVG, and choose "Save (image) as...". If the wrapper contains multiple <image> tags, you will have to save them to separate files, but at least they will be in a form Inkscape can handle.

If you want to get them all together in one SVG file again, you will have to re-import them via the Inkscape import function. Take care to select 'Include as editable object', or you will end up right where you started:

enter image description here

The speculations above about CSS are unsubstantiated, btw. Inkscape will convert the content of a <style> element into inline style attributes, but otherwise handle them correctly. What happened is stated quite clearly in the above screenshot: data URLs embeded via an <image> tag will not be editable in Inkscape.

  •  Tags:  
  • Related