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.

Presumably, you'll need to edit the extract the styles from the .css and edit the .svg accordingly to match — smartse, Jan 10 '22 at 19:01
Thank you for your quick reply, I am assuming that you are referring to something like this: https://stackoverflow.com/questions/48930212/how-to-import-svg-code-into-inkscape using the XML Editor in Inkscape? I was hoping to get around that, because I assume to have a lot of styles to copy manually. Another way that almost gets me there is this: https://stackoverflow.com/questions/43804171/how-to-extract-svg-as-file-from-web-page#:~:text=Here%27s%20a%20three,the%20vector%20element. — CJS, Jan 10 '22 at 19:26

score 1 · Answer 1 · answered Jan 11 '22 at 15:54

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.

score 0 · Answer 2 · answered Jan 11 '22 at 01:08

You might convert all styling to element attributes using SVGOMG:

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>

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>

Embedded SVG into Inkscape

2 Answers2