Export clean SVGs with user-specified metadata

[psvoboda76]

Blocked on #1832

---

It would be nice to extend SVG Export by:

1. Adding id to the exported elements. In Graphite Editor, you specify the id in the properties pane,
   

then this id should be exported into the underlying svg.

<path id="idOfShape" d="M....

2. Text should be exported as a text element with properties such as size, font, etc. Currently, it is exported as a path - eg. it is not possible to modify it. (this is important when using Graphite along with other graphical editors, or intend to use exported graphics in web with some animations)

3. Currently, there is no option to specify floating-point precision when exporting, the exported svg can get huge. For example, currently when I create the rect element, I get:

<path d="M178.79528808593741 -364.70001220703125L374.39532470703114 -364.70001220703125L374.39532470703114 -217.89999389648438L178.79528808593741 -217.89999389648438Z" ...

if I could round for example to 3 dec. places, I could get

<path d="M178.795 -364.700L374.395 -364.700L374.395 -217.899L178.795 -217.899Z" ...

which is much shorter.

[Keavon]

I've envisioned that this, along with other SVG metadata, could be included in a Properties panel section called "SVG Metadata" which includes a place to give it a custom ID, class, style, animation data, etc. I've never loved the automatic translation of layer name into a hyphenated ID that is used in other software since I usually have to go and manually strip that out when cleaning up the SVG syntax. But doing this in a custom properties section would make that optional and give the user more control. Does that seem like an improvement, or would it be disadvantageous over your proposal (@psvoboda76) in ways I haven't thought about?

[psvoboda76]

I fully agree, having a separate section "SVG Metadata" in the Properties panel is a better idea. It definitely is the right solution. Thank you.

I've envisioned that this, along with other SVG metadata, could be included in a Properties panel section called "SVG Metadata" which includes a place to give it a custom ID, class, style, animation data, etc. I've never loved the automatic translation of layer name into a hyphenated ID that is used in other software since I usually have to go and manually strip that out when cleaning up the SVG syntax. But doing this in a custom properties section would make that optional and give the user more control. Does that seem like an improvement, or would it be disadvantageous over your proposal (@psvoboda76) in ways I haven't thought about?

[psvoboda76]

Hi,

Are there any time plans for implementing this option? I want to help. However, I am react js developer and never worked with vue before. Is there some design idea about the "SVG Metadata" pane? Eg. what it should contain aside of the id? Is someone working on it already I can contact and help?

[Keavon]

Hi @psvoboda76, that will all be Rust code that works within our node system as part of a not-yet-built "Attributes" system that is used to send metadata alongside data through the node network (which is why I marked this as blocked until we have that). You'd be welcome to learn Rust and help us build that, but I might suggest the way you can help speed up the inclusion of this feature would be taking on some other tasks that generally improve the usability of the Graphite editor as a whole. If you're interested in doing that, let me know and I can suggest some options for tasks that would be beginner-friendly and predominantly focused around frontend code.