Three.js: SVGLoader

[mrdoob]

Currently, SVGLoader only returns the nodes.

I hink it'll be a great improvement if the loader could convert svg nodes to THREE.Shape which could then be used by THREE.ShapeGeometry or THREE.ExtrudeGeometry. With that in place, adding svg support to the editor would make a few designers happy.

We happen to have some basic code already in webgl_geometry_extrude_shapes2:

https://github.com/mrdoob/three.js/blob/dev/examples/webgl_geometry_extrude_shapes2.html#L49-L389

Also, for reference, @jonobr1 has been tackling this same issue for two.js for a while now:

https://github.com/jonobr1/two.js/blob/dev/src/two.js#L798-L1475

[jonobr1]

I'd be happy to translate the Two.js logic over.

[mrdoob]

@jonobr1 😍

[jonobr1]

mrdoob kicking it off! https://github.com/mrdoob/three.js/pull/13616

[paulbrzeski]

@mrdoob I know this is still a WIP but I got some strange results trying to use the SVGLoader even though it works fine with the example tiger.svg.

Using the d3-threeD implementation from webgl_geometry_extrude_shapes2's example worked fine though.

[mrdoob]

Please, share the files that are giving you strange results.

[paulbrzeski]

Some examples I had issues with:

• https://upload.wikimedia.org/wikipedia/commons/1/1c/BSicon_ANCHOR030.svg Error saying "Cannot set property 'autoClose' of null"
• https://github.com/paulbrzeski/manifold/blob/master/potrace.svg No errors but the render looks wrong.

Updated with more examples/detail

[mrdoob]

@paulbrzeski After d82442aedc15d726b2bbf280ce93a98c093a8ebe, your files are starting to appear 😁

[paulbrzeski]

Not sure where SVGLoader is at with the styles but I noticed the current copy of SVG on the dev branch wasn't parsing the style attributes so I made some changes.

https://github.com/paulbrzeski/manifold/pull/3/files#diff-951105ef94046da2301be208fa86ff54R513

[mrdoob]

@paulbrzeski Would you like to do a PR with that improvement?

[paulbrzeski]

Sure :)

@mrdoob
PR - https://github.com/mrdoob/three.js/pull/13803

[iambumblehead]

Following the example here, some shapes come out okay and some do not. This svg from google material design isn't formed correctly at the end. (threejs v93)

Also, this similar svg image is not constructed in the right way.

[jonobr1]

I can take a look at this. I recently fixed an issue with Two.js SVG parsing that might be related to this.

[jonobr1]

PR for partial fix for @iambumblehead's referenced SVGs here: https://github.com/mrdoob/three.js/pull/14276

I need some help from someone that knows the THREE.ShapePath and THREE.Path to vet how I'm accessing the initial x, y coordinate vector of a path.

[yomboprime]

Hello, I've implemented the transform node attribute (only translate and matrix, which are the ones Inkscape produces)

Would you like a PR with this?

[mrdoob]

@yomboprime yes please! 😊

[yomboprime]

I've implemented now the rotate and the scale also. There's only left the skew.

My implementation only supports orthonormal matrices for circles, ellipses and arcs. That's why I've not implemented skew. The rest of curves/paths work OK with any matrix.

Let me 1 more day to prepare the PR... 😉

[napter]

@yomboprime it looks like this only uses the first transform:
var transformType = transformAttr.substr( 0, openParPos );
However, my SVG has two transforms, a translate and scale but only the transform is being applied:
<g transform="translate(0.000000,558.466321) scale(0.022383,-0.022383)" fill="#000000" stroke="none">

I hope I understood that right. Is that something that can be fixed?
Thanks

[mrdoob]

Can you share your svg file?

[napter]

@mrdoob here it is. I tested removing the _translate_ and then the _scale_ works but when both transforms are present, is only executing the _translate_. So it appears is just doing the first transform when two are present.

c2fab75fbb234c1abf41c7f2669e1fa0_outer.bmp.zip

[napter]

@mrdoob @yomboprime I think perhaps I should have commented that on 14418 instead. It is an issue with the implementation of transforms in SVG.

[napter]

I implemented these changes that _seem_ to fix it. However, I am not familiar with the code and it is very naively implemented. I pretty much just changed all the places that return "transform" to return "transforms", a list of transforms, and then loop over it. I am not sure what the currentTransform and whether my changes handled that ok.

[yomboprime]

I think it should be better to compose the two transforms (or N of them) into one, inside the getNodeTransform function.

[HakuG]

SVGLoader doesn't seem to color Path nodes correctly.

Here's a link to the whatsapp SVG file: https://www.flaticon.com/free-icon/whatsapp-logo_33447

And here's what trying to use it in the loader gets me:

It renders fine in Inkscape. This also only seems to be an issue with paths.

[yomboprime]

SVGLoader doesn't seem to color Path nodes correctly.

I've checked that this happens with versions previous to my modifications of transforms (8fcef653cff8394278437eda1494948c2947629b)

[HakuG]

@yomboprime I'm still having these issues, even using the most recent version of three.js and your version of transforms

[Mugen87]

Closing. It's best to create a new issue if the latest SVGLoader is not able to correctly load a SVG file.

[yomboprime]

@yomboprime I'm still having these issues, even using the most recent version of three.js and your version of transforms

Ops, I missed this comment, sorry.