Embedded SVG into Inkscape

Question

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,%0A%20...></image>
  </g>
  ... (about 20 more <g>...</g> tags)
</svg>

When decoding the part starting with %0A%20..., 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 here, Inkscape most likely is not able to read the CSS styling correctly or probably at all.

I would very much appreciate any thoughts or ideas on how to convert the file such that it can be edited and displayed correctly in Inkscape.

Answer 1

You might convert all styling to element attributes using SVGOMG:

1. replace your embedded <image> element by the decoded data url content. Your parent svg should look something like this:

    <!-- 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. Use SVGOMG "inline styles" and "style to attribute"parameter:

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>

Answer 2

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:

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.