VCV rendering issues when saving SVGs out of Inkscape V1

Inkscape V1 was released a couple of weeks back and I thought I would try it out as it now has a native Mac version and measurements are taken from top left finally! :slight_smile:

In general it is much improved from 0.92 but I am having one major issue - SVG panel graphics saved out of V1 are rendering as black in VCV.

If i open the V1 SVG in the older 0.92 and resave it then it renders fine, so I figured there must be a difference in the way the 2 versions save SVGs. I opened the SVGs in a text editor and saw differences on 3 lines:

Line 46 0.92: inkscape:cx="-48.787016", V1: inkscape:cx=“43.2”

Line 48 0.92: inkscape:window-x=“0”, V1: inkscape:window-x=“296”

Line 49 0.92: inkscape:window-y=“0”, V1: inkscape:window-y=“51”

Has anyone else run into the same problem or managed to use V1 successfully for panel graphics?

Any ideas as to how to get v1 SVGs to render correctly?

thanks.

I am using version 1.0 (da27a4f97d, 2020-05-22) on linux. I have had a couple of issue with transforms in the svg files when scaling. I had to manually delete the transform from the svg and then rearrange the layout in inkscape.

While this is not a clean solution, it may be of some help

I dropped back to 0.92 on macOS, as 1.0 broke a lot of other things for me. waiting for a newer release to try again.

Just a quick note, in case anyone runs into the same issue.

Having started a couple of new svg files from a fresh start recently in Inkscape 1.0 I have noticed that the helper.py script has had trouble with the “components” layer. I have so far learnt that if i simply open and resave in 0.92 the issue is corrected and I have been able to continue using version 1.0 for any additional edits. I have yet to identify at what stage this is required, and I have been doing so as the last step.

how hard would it be to make a convertor so that we can use whatever svg software we want and then convert them easily with a click of a button? i think its inefficient to design in various other programs and in the end still have to install inkscape to convert all components. not everyone wants to learn another program when they are comfortable with the one they already use.

The first thought I’m getting is, that there is probably an option in Inkscape 1 to use the old coordinate system, and using that will make it work with Rack again. I’d imagine it’s simply a question of Rack panels and Inkscape using the same coordinate system.

I was expecting and did look for that - some kind of “Save as version 0.92” - but didn’t come across anything like it.

Nothing about coordinate system in settings/options?

I have been looking into this further and I think I have made some progress as to the cause of the issue (solid fill colours rendering as black from Inkscape V1 SVGs)

Turns out I made a mistake in my OP about the differences on just 3 lines - there’s a lot more to it than that and I was comparing the wrong files. It is not a positioning issue at all - positioning is fine. In the image below, the MindMeld logo is the only element that renders correctly and it is in the right place.

The issue seems to be with how solid fill colours (but not gradients), are specified in the SVG. In 0.92 SVGs, fill colours are declared twice for each element - once inline and once as a class (where the colour is specified in a stylesheet contained in the SVG)

we see code like:

  <path
       style="fill:#808080"
       inkscape:connector-curvature="0"
       class="cls-3"

and the stylesheet looks like

 <style
       id="style833">.cls-1{fill:#353535;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:gray;}.cls-4{fill:#b3b3b3;}.cls-5{fill:#424242;}.cls-6{fill:#4d4d4d;}.cls-7{fill:#1a1a1a;}.cls-8{fill:none;stroke:gray;stroke-width:0.7px;}.cls-9{fill:#141414;}.cls-10{fill:#ccc;}.cls-11{fill:#707070;}</style>

In V1 SVGs however, the inline style declaration has been dropped, and fill colours are only specified as classes from the stylesheet.

I may be wrong here, but my guess is that Rack may not support classes/stylesheets in SVGs, and only supports fill colours which are specified inline - which would explain why all solid fill colours are defaulting to black.

@Vortico - please would you confirm if that is correct?

2 Likes

That sounds right to me. one of the instructions for using Illustrator is that you export with inline styles, Does Inkscape not have and export option for this? (I don’t know, I’ve never used it).

1 Like

Hey Bruce,

I think you may be onto something there. I’m waiting for Marc to confirm but hopeful the issue may be solved.

The SVGs I exported from illustrator (up to now) have stylesheeted styles. It seems Inkscape 0.92 would extract these style sheeted styles and add an inline version by default when saving out. It seems Inkscape 1.0 does not do that.

I changed the settings in illustrator so that it exports SVGs with inline styles and looking at the code, it appears those inline styles are now maintained when opening and saving again from inkscape 1.0

I use inkscape as i’m not sure you can export SVGs which have their size set in mm rather than px from illustrator. After designing everything in illustrator it only takes about 30 seconds to open, change to mm and resize in inkscape then resave.

Marc has confirmed it now works!

To clarify my illustrator export process - I just select the items I want to export, right click > Export Selection

This brings up the export for screens dialog box which has a small settings cog on right side

Click that which opens the Format Setting dialog box and set SVG Styling to ‘Inline Style’

Now you can open that illustrator SVG in Inkscape V1, change display units and size to mm, set the custom size you want (hp x 5.08) x 128.5, scale your artwork to that size (which should scale perfectly if you were working in mm in Illustrator) and save out as an Inkscape SVG.

2 Likes