Problem with import of colors in SVG import

When an SVG image is added to the custom shape library, sometimes, the color of the SVG image is not imported as expected. That is color of the original SVG image is not retained in gliffy. This is because currently, Gliffy does not support importing SVG image file with inline style sheets into the custom shape library. The following types of inline style sheet formats are not supported:

Type 1: Inline Stylesheets without class attribute


Type 2: Inline Stylesheets with the class attribute


The workaround for this issue is to edit the SVG file and convert the inline style sheet to the style attribute in the file. Then try to import the file into the custom library. The examples are as follows:

Workaround for Type 1:

<svg xmlns=""

       <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00;"/>


Workaround for Type 2:

<svg xmlns=""


       <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00;"/>

       <circle cx="40" cy="100" r="24" style="stroke:#660000; fill:#cc0000;"/>



Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request


  • 0
    Reg Smith

    The following site does a decent enough job of converting the svg css to inline..not quite seamless but much easier than hand editing the svg text (just copy paste the entire text of the svg file into it, click the button and copy it back)

Please sign in to leave a comment.