Support CSS classes in SVG import #101225

New Issue

Anthony Aragues · 2022-09-20T19:59:13+02:00

Anthony Aragues commented

2022-09-20 19:59:13 +02:00

System Information
Operating system: MacOS
Graphics card: AMD

Blender Version
Broken: Never Worked

Short description of error
SVG Import cannot understand CSS styles.
if styles are defined as classes in a style tag they are ignored by the current import script. This is the default SVG export from Adobe Illustrator

Exact steps for others to reproduce the error
Export an SVG from Adobe Illustrator and Import the SVG example attached

I HAVE A FIX

I just need to know where to submit, how to get it approved, who to work with.
I believe I wrote it in style with the existing code.

It pushes all the CSS classes to the "_context"
then if a node has a "class" attribute" it applies prepends the styles from the context for each class defined (multiple are allowed and they can overwrite each other like in html)

I have several other updates I'm happy to submit from my work on the "SpecIO" addon I wrote to improve an SVG workflow.

**System Information** Operating system: MacOS Graphics card: AMD **Blender Version** Broken: Never Worked **Short description of error** SVG Import cannot understand CSS styles. if styles are defined as classes in a style tag they are ignored by the current import script. This is the default SVG export from Adobe Illustrator **Exact steps for others to reproduce the error** Export an SVG from Adobe Illustrator and Import the SVG ![Supernatural_vampireboy.svg](https://archive.blender.org/developer/F13531286/Supernatural_vampireboy.svg) example attached I HAVE A FIX I just need to know where to submit, how to get it approved, who to work with. I believe I wrote it in style with the existing code. It pushes all the CSS classes to the "_context" then if a node has a "class" attribute" it applies prepends the styles from the context for each class defined (multiple are allowed and they can overwrite each other like in html) I have several other updates I'm happy to submit from my work on the "SpecIO" addon I wrote to improve an SVG workflow.

Anthony Aragues commented

2022-09-20 19:59:13 +02:00

Added subscriber: @Anthong

Ross commented

2022-09-22 20:05:20 +02:00

Added subscriber: @4thDimension

Antonio Vazquez commented

2022-09-23 10:08:57 +02:00

Added subscribers: @Sergey, @antoniov

Antonio Vazquez commented

2022-09-23 10:08:57 +02:00

I guess you are talking of the SVG import python add-on to curves and not about the Import SVG to Grease Pencil that is done in C++.

For the add-on, IIRC @Sergey is the person who maintains the add-on, so you need to talk to him.

I guess you are talking of the SVG import python add-on to curves and not about the Import SVG to Grease Pencil that is done in C++. For the add-on, IIRC @Sergey is the person who maintains the add-on, so you need to talk to him.

Sergey Sharybin commented

2022-09-23 10:26:32 +02:00

Is cool to see work being done for SVG importer.

For the code submission follow the regular patch submission process: https://wiki.blender.org/wiki/Process/Contributing_Code#Submitting_the_Patch

If the code is simple enough it can go to the add-on. If this is something more elaborate it would be nice to find a way to structure SVG importer so that both import to curves and import to grease pencil will benefit from the improvements.

Is cool to see work being done for SVG importer. For the code submission follow the regular patch submission process: https://wiki.blender.org/wiki/Process/Contributing_Code#Submitting_the_Patch If the code is simple enough it can go to the add-on. If this is something more elaborate it would be nice to find a way to structure SVG importer so that both import to curves and import to grease pencil will benefit from the improvements.

Anthony Aragues commented

2022-09-23 15:45:53 +02:00

yes talking about the python addon. I'll submit a PR through the process, thanks. I think there are some other small fixes I can bring as well but I'll keep it all small and incremental.

Anthony Aragues commented

2022-09-24 05:33:57 +02:00

svg-classes.diff Diff file attached. I got really lost on the pages of process required to submit. I dont mind doing a PR but not sure if the "blender-addons" repo allows them.

If you can help me into the correct process I'd be glad to submit a couple more things like maintaining group -> collection hierarchy, and allowing group styles to influence child styles.

thanks

[svg-classes.diff](https://archive.blender.org/developer/F13562001/svg-classes.diff) Diff file attached. I got really lost on the pages of process required to submit. I dont mind doing a PR but not sure if the "blender-addons" repo allows them. If you can help me into the correct process I'd be glad to submit a couple more things like maintaining group -> collection hierarchy, and allowing group styles to influence child styles. thanks

Sergey Sharybin commented

2022-09-26 15:05:25 +02:00

You should be able to either use arc diff from the addons repository (or a submodule from inside blender.git checkout) to submit a patch using arcanist, or follow the Submit Code from the home page of the developer.blender.org.

Some notes from a quick reading.

It will be easier to follow if whitespace changes happen as a separate patch. Basically we always try to separate function from cleanup changes.

From my understanding the patch assumes that the CSS is always a 1-level class specification, and does not support proper CSS matchers.
And here is where I think in a long term we probably want to rely those non trivial logic to some library. Maybe the same what grease pencil uses. @antoniov, does the gpencil SVG importer support styles?

For a short term it could be fine to have more limited CSS support as the patch proposes. But then it feels the regex better be adjusted a bit: to only include matchers which contains a single class (and not include matcher "path"). Not sure if this will really lead to a more predictable results. Curious what you think.

You should be able to either use `arc diff` from the addons repository (or a submodule from inside blender.git checkout) to submit a patch using arcanist, or follow the `Submit Code` from the home page of the developer.blender.org. Some notes from a quick reading. It will be easier to follow if whitespace changes happen as a separate patch. Basically we always try to separate function from cleanup changes. From my understanding the patch assumes that the CSS is always a 1-level class specification, and does not support proper CSS matchers. And here is where I think in a long term we probably want to rely those non trivial logic to some library. Maybe the same what grease pencil uses. @antoniov, does the gpencil SVG importer support styles? For a short term it could be fine to have more limited CSS support as the patch proposes. But then it feels the regex better be adjusted a bit: to only include matchers which contains a single class (and not include matcher "path"). Not sure if this will really lead to a more predictable results. Curious what you think.

Antonio Vazquez commented

2022-09-26 16:16:59 +02:00

@Sergey according to NanoSVG library documentation, styles are not supported. The current library is just a header file with some custom modifications for Blender, so really it could be expanded... don't think it's too hard to convert python code to C, so maybe @Anthong could do it.

@Sergey according to `NanoSVG` library documentation, styles are not supported. The current library is just a header file with some custom modifications for Blender, so really it could be expanded... don't think it's too hard to convert python code to C, so maybe @Anthong could do it.

Sergey Sharybin commented

2022-09-26 17:16:25 +02:00

If we expand NanoSVG functionality this better be done upstream.

But for the time being I think it's useful to improve the python code with the proposal from Anthony.

So questions to Anthony then are:

Do you mind splitting cleanup from functional changes?
Do you have strong opinion about restricting CSS parser to only get styles for a CSS path of a single class?

If we expand NanoSVG functionality this better be done upstream. But for the time being I think it's useful to improve the python code with the proposal from Anthony. So questions to Anthony then are: - Do you mind splitting cleanup from functional changes? - Do you have strong opinion about restricting CSS parser to only get styles for a CSS path of a single class?

Anthony Aragues commented

2022-09-26 18:15:45 +02:00

Do you mind splitting cleanup from functional changes

don't mind at all, I didnt even do that intentionally I just have my editor format pep8 automatically on save and that happened, I just have to turn it off

Do you have strong opinion about restricting CSS parser to only get styles for a CSS path of a single class?

I only care about supporting what is commonly used. No user should need to open an SVG in a text editor or convert it in another app to make it work in Blender after exporting from a popular app such as Inkscape or Illustrator. I just looked to verify that SVG DOES indeed allow multiple CSS classes. We can certainly restrict to the first found and add it as a limitation if needed. The complexity of using multiple classes is the same as allowing a class + tag defined style to override.

Also, I have found some regex improvements and at least one check I needed to put in for some variations in how things are defined.

I do think this is all due for a rewrite to an SVG aware lib rather than an XML one. It will reduce the mount of maintained code and intelligent text parsing.

However, that is most worthwhile when trying to match more styles and materials such as stroke-widths which can be really tough, I have ways I went about it in my addon but they are a little more hacky than the things we have discussed so far.

> Do you mind splitting cleanup from functional changes don't mind at all, I didnt even do that intentionally I just have my editor format pep8 automatically on save and that happened, I just have to turn it off > Do you have strong opinion about restricting CSS parser to only get styles for a CSS path of a single class? I only care about supporting what is commonly used. No user should need to open an SVG in a text editor or convert it in another app to make it work in Blender after exporting from a popular app such as Inkscape or Illustrator. I just looked to verify that SVG DOES indeed allow multiple CSS classes. We can certainly restrict to the first found and add it as a limitation if needed. The complexity of using multiple classes is the same as allowing a class + tag defined style to override. Also, I have found some regex improvements and at least one check I needed to put in for some variations in how things are defined. I do think this is all due for a rewrite to an SVG aware lib rather than an XML one. It will reduce the mount of maintained code and intelligent text parsing. However, that is most worthwhile when trying to match more styles and materials such as stroke-widths which can be really tough, I have ways I went about it in my addon but they are a little more hacky than the things we have discussed so far.

Antonio Vazquez commented

2022-10-11 11:33:07 +02:00

Removed subscriber: @antoniov