only supported import of SVG with a single path on the top level about voronoi

[nicolasdb]

I'm not developer neither, sorry :)
I was only playing a bit in fusion360 today, to make a custom soap holder, and I wanted to explore with voronoi also.

So I find quite cool your app, to be able to adjust and constrain how seeds are placed is awesome 👍
but frustrating when not understanding why it is not working. ^^
So I search a bit and wanted to share what I found.
Then as soon as limitations are better known, it's easier to play with and it could help or motivate someone to help on the code. I hope someone will help

It would be useful to understand how to make svg with inkscape since they have SVG as standard file, it should be easier for most to not have to write themselves the svg. They have a script for voronoi but quite too basic. 👎
Maybe as a wiki, on this repo. I would be glad to help/test when I can.

At the end, I tested with the png map from gimp. But there is a lot of potential to understand better how it work.

Thanks.

[wassfila]

Here are examples of Fusion360 things I printed from a design with this tool :

[wassfila]

[wassfila]

[thenickdude]

For SVGs where Inkscape wrapped my path in a <g> node with a transform, I fixed that by using the Apply Transforms extension:

https://inkscape.org/~Klowner/%E2%98%85apply-transforms

[nicolasdb]

Ah, and I'm testing under Brave browser (which is based on chrome), without any script blockers

[nicolasdb]

Strange, now I'm testing with a circle. The "optimized svg" doens't work anymore.

the square outline is:
<svg width="425mm" height="425mm" version="1.1" viewBox="0 0 425.01 425.01" xmlns="http://www.w3.org/2000/svg"><path d="m12.5 12.5h400.01v400.01h-400.01z" fill="none" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.6119"/></svg>

The circle is:
<svg width="400" height="400" version="1.1" viewBox="0 0 105.83 105.83" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-24.067 -55.817)"><path d="m111.58 103.11a39.688 39.688 0 0 1-39.687 39.687 39.688 39.688 0 0 1-39.688-39.687 39.688 39.688 0 0 1 39.688-39.688 39.688 39.688 0 0 1 39.687 39.688z" fill="none" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.247"/></g></svg>

Could it be the "transformation" function?

[nicolasdb]

yes.
This is working:
<svg width="400" height="400" version="1.1" viewBox="0 0 105.83 105.83" xmlns="http://www.w3.org/2000/svg"><path d="m111.58 103.11a39.688 39.688 0 0 1-39.687 39.687 39.688 39.688 0 0 1-39.688-39.687 39.688 39.688 0 0 1 39.688-39.688 39.688 39.688 0 0 1 39.687 39.688z" fill="none" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.247"/></g></svg>

So, what do you use to create your SVG?
Because it feel difficult to get the file right.

[nicolasdb]

PNG

Must be a non-transparent png. no alpha channel.
Gray levels on white background.

[wassfila]

Hi @nicolasdb
Thank you for your interest in this project, it is indeed a project I had a lot of fun developing and not very common to see such svg interactivity in projects. Usually as soon as it's get complex, then it's done in graphics rendering and not geometrically with vector graphics.
The error you see is a known limitation and even coming from the code of this project not from any other dependency :

voronoi/src/shape.js

Line 181 in aa2eaa8

alert(`only supported import of SVG with a single path on the top level`)

For SVG file examples, it's a bit tough, but I directly referred to the SVG standard and created the example SVG by hand :
https://github.com/WebSVG/voronoi/tree/master/data
It should be possible to create samples using other tools, but once you're inside a tool, SVG is tainted with lots of variety, some programs even embed pixel colors inside an SVG to emulate shadows, and when in vectors, there are hundred of ways how to represent the same thing.

I'm doing web and graphics development for fun, not my core know-how, but I'll be glad to help you if you think this tool is useful. I would still have some concerns, this tool is far from being a sw product and is a proof of concept, so might be more relevant for other developers rather than for end users.
If you're interested to understand it as a developer, I'll be glad to explain more.
If you're willing to help by testing and reporting issue, that might still be good to show others what the limitations are, but I do not think I'll be investing effort turning this PoC into a product, who knows maybe someone would then fix these issues with a PR.

[wassfila]

I also noticed some selection failures that would be good to fix, if you have more examples you could post them, I have a ticket open for that
#11

[wassfila]

Back to the main topic, the reason why "only supported import of SVG with a single path on the top level"
is that I'm using a path function to define if a point is in or out, and the complexity grows exponentially if I try either to turn a random SVG into a single path, or if I start looping through all paths in a file, that would not be computationally efficient.

[wassfila]

An additional hint, one of the reasons why I did not push this project that much further is that there is an alternative that can be used to produce any sorts of complex SVG, but only if the precision is not needed to be extreemly high, you could work in pixels with any graphics tool and then at the end create an SVG path from any sort of selection.
So if you provide more info about your use case, what did you intend to use this tool for, we might think of enhancements or alternatives.

[wassfila]

@nicolasdb thank you for trying to make the tool better. I will try to help you too. If you want, you can attach the files you created and I'll do the test myself and check why they did not work, or maybe either create the files that work for you and add them to the existing data folder so that you can select them from the drop down menu

or figure out how to adapt files from Gimp and document that..

[wassfila]

your third example is shown as invalid but could get openeed nevertheless

it's just a bit small, unit is screen pixels pixels

Your square example is working

I have an issue with the display "in cells" function

But if you select Shape "avoid path" and Display "all" you get a result without errors, the only down side is that you have to manually delete the outside cells, I did that before and it goes quite quick with fusion

[wassfila]

some models are available on thingiverse
https://www.thingiverse.com/thing:4282292

[wassfila]

[wassfila]

The giraffe was the hardest, I had a bug, so I performed a lot of manual cleaning by selecting Shape "avoid path" and Display "all" then removing out ones by hand.

[wassfila]

So if you have an idea in mind, you can show me sketches even drawn by hand or examples and I can help you create the svg files for you and I'll add them as examples.

[wassfila]

This has been fixed since 0797cb6 so latest version should be fine.