SVG export messes up curves and circles

[ohmarinus (Marinus)]

Hi, sometimes when I export my generative artworks from Rhino, I get messed up shapes. Like perfectly round circles get an indent on all four sides.

I have discovered that changing the scale sometimes helps. Especially exporting files in a 1:1 scale, but in this case that didn’t help at all.

What I do is that I generate a design in Grasshopper, and then bake it in Rhino. After that I export within Rhino to SVG and then this happens:

Scale 1:1 export:

Scale 1:10 export:

This is the circle in Rhino:

And here’s the file for the single circle, but in my designs, all small circles have this. Also when I do other work, like trutchet tilings, this happens with the curves that are an arc, or part of a circle.

Rhino 7 file:
circle_rhino.3dm (24.8 KB)

Any fix/idea/workaround?

[w.radaczynski]

I know it is a little bit offtopic, but check Aviary plugin (Aviary | Food4Rhino)

Maybe it will help you to produce SVG straight from GH

[pascal (Pascal Golay)]

Hello - for small curves you’ll need to boost the dpi on the print to svg - 600 works better here.

-Pascal

[wim (Wim Dekeyser)]

@ohmarinus

And here’s the file for the single circle, but in my designs, all small circles have this. Also when I do other work, like trutchet tilings, this happens with the curves that are an arc, or part of a circle.

Just adding to what was said…
Improving export of circles and arc to the SVG format is on the list as RH-44145.
-wim

[ohmarinus (Marinus)]

Thanks Pascal, I didn’t realize that resolution played a factor in this case because I thought ‘a vector is a vector no matter the size’.

I didn’t see a radius of 4mm as a small curve to be honest. You solution did improve the curves a tiny bit though! Sadly, still a circle isn’t a real circle.

Some designs already generate a 6MB SVG file at 300DPI, and going up also roughly doubles the filesize and is going to make the files quite heavy for me to work with, so I hope that the new improvements in SVG export are going to be fixing this. Very glad to see that @wim mentioned this.

For Wim:
I’ve been having more issues with SVG exports, but I see they are all addressed there so I won’t post those. If you need an example file that I was having issues with, let me know and I’ll see if I can dig up some of the older designs that had issues.

@w.radaczynski Thanks for the suggestion, I did try out aviary, but never used the svg export, I’ll give it a try right now! It looks like the export module has trouble exporting fills vs outlines, but indeed, the svg export seems to be flawless beyond that.

A comparison:

Rhino export is not very precise:

Aviary is:
All lines are crossing in the exact point

Circles are circles

Maybe McNeel and the creator of Aviary can work together to improve SVG export?
@DavidMans

Edit:
Just to add
I found that David Mans has created a separate plugin called ‘Graphic+’ that does the SVG export part of Aviary And it supports color export as well with a neat preview window.

Graphic+

The other (bitmap) part of Aviary can be found here:

Bitmap+

[ohmarinus (Marinus)]

Just a small update; The SVG files created by Graphic+ kill both Illustrator and Inkscape.
For example, a 221kb file is now loading for over 5 minutes.

There’s obviously an issue there. I’ve had luck with smaller files, but even those took over a minute to open. I will send an email to the creator of the plugin.

[wim (Wim Dekeyser)]

FWIW, the 3dm file that you uploaded only contained a single circle so I can’t test your specific case much more…

I’ve used the picture that you posted to create arcs through the center of that circle:

I then selected these curves and copied them to the clipboard. In Inkscape, I pasted the curves:

They look circular and appear to intersect the center of the circle:

-wim

[ohmarinus (Marinus)]

@wim Wim, I’m sorry for not supplying files, here is an example of what I generated with Grasshopper, and how the SVG turns out:
Export settings:

Zoom of the resulting SVG file with preview mode ‘hairline’ within a vector editing software (Inkscape in this case):

And the Rhino file:
example1.3dm (60.7 KB)

When exporting an SVG through Graphic+, this doesn’t happen. However, I have not been able to get much success out of that solution as it creates files that simply do not want to load in my vector software (tried multiple apps). Like a 220kb file that takes over 5 minutes to load. I have sent the developer of the component an email with the SVG file it generates.

Let me know if any further examples are required to find out what’s causing the issue.

[wim (Wim Dekeyser)]

Hoi Marinus -

@ohmarinus

Let me know if any further examples are required to find out what’s causing the issue.

Sorry for the confusion - I wasn’t asking about more details for the Export scenario. As Pascal said, you can currently get better results by using a higher DPI. As I said, writing completely new code to special-case circle and arc in the SVG exporter is on the list.

In my previous post, I was merely trying to point out that a simple copy-paste appears to be doing a better job than exporting.

I now used your file and copied the curves to the clipboard.
Then, in Inkscape, I paste the curves:

A close-up with greatly reduced stroke-width looks like this:

-wim

[pascal (Pascal Golay)]

@ohmarinus

I didn’t see a radius of 4mm as a small curve to be honest. You solution did improve the curves a tiny bit though! Sadly, still a circle isn’t a real circle.

It’s small by 2d, printing and illustration standards - svg is not really designed for the sort of precision needed in 3d modeling. You may have better luck if your circles are rebuilt first, to say 16 points or so.

-Pascal

[ohmarinus (Marinus)]

I’m amazed to see how well copy pasting works for you!

I tried it a few times in the past but the geometry always ends up like in this screenshot and there’s no color information being transferred:

Thanks for clarifying. I guess I’ll just gave to wait a little and meanwhile kind of accept the limitations right now. I hope the improvements for SVG export will be added in Rhino 7.

@pascal
This is the first time I’ve heard that and I have worked in print full time for years. I’ve never had issues with extremely small features. It’s really only the circles and arcs not keeping their shape. I’ll dig in a bit more into converting arcs and circles to shapes with more points. Eventually my work is drawn with a pen plotter most of the time, so in the gcode conversion it will be turned into segmented curves anyway. I’ll give it all a try! Thanks for the suggestions.

[adrian.daniel.milita (Adrian Daniel Militaru)]

I think I solved your issue by mistake, namely inkscape not loading files made with graphics+.

I was looking for a way to make svg files for my laser software at work, long story, and stumbled upon your topic and tried graphics+ for myself. Everything was fine, as i don’t need to open the svg files with inkscape myself so I didn’t know about the not loading issue and my goal was to never touch inkscape and just do everything with rhino.

The problem was my laser software was also not liking the files made with graphics+, wrong fills and missing curves and such.

After some trial and error in the website JSFiddle - Code Playground I figured out that the problem was that the syle (stroke, fills and such) were contained inside lines starting and ending with “defs” and they were referenced by lines starting with .cls and an object ID if I’m not mistaken.

Excuse my ramblings, I don’t have much programming experience apart from grasshopper and some simple python stuff. Anyways, I managed to rewrite the files generated in graphics+ with grasshopper and solved the issue with my laser software, still needs some testing.

After I got it working for myself I was curious to try your example file and looks like I solved your issue aswell by mistake.

Here is the gh file, I explained almost everything I did in english, let me know if you don’t understand something. I originally wanted to write it in python but for now it still goes over my head, I’ll get there eventually.

For anyone looking at the file, please don’t laugh too hard at my noobiness, hey, it works, I think!

The gh file is very specific to the way the graphics+ plugin creates svg files, so it will more than likely break after an update.

Edit2: Updated file svg export fix.gh (35.6 KB)

[ohmarinus (Marinus)]

Hello Adrian,

I’m sorry for the late reply. This is indeed a fix, I had also contacted the creator of the plugin about this, and he replied this weekend, letting me know he found out about the issue as well and decided to fix it! So the plugin got an update and will now correctly export to SVG without causing issues with how the SVG data was constructed.

So, if you update the plugin, it should now work out of the box. Isn’t that great?

I’m impressed with your solution, but I think with the new update of the plugin, there’s no need anymore for a workaround. I suggest you download it from the Food4Rhino page and see if the updated plugin also works for you

[adrian.daniel.milita (Adrian Daniel Militaru)]

Nice, I have some stuff to do at work but as soon as I’m done I’ll see if it also solved my issue. Thank you

[adrian.daniel.milita (Adrian Daniel Militaru)]

Tested it, my issue is still present unfortunately. I’ll probably ask the developer about it myself.

[ohmarinus (Marinus)]

Ohnoes, well, I guess user experiences like ours can only help to improve plugins like these!