Jump to content
joed1035

[Fixed] IDs on SVG images exporting with unexpected characters

Recommended Posts

I name all of my layers and groups in my SVG file. It is crucial the IDs export correctly so I can target them with ease in CSS and Javascript. The recent update just messed up how they export.

 

Normally name of layer: dismiss-popup as typed (see attachment)

 

Would appear as such on export in SVG code:

<g id="dismiss-popup"><rect x="-36.697" /* rest of SVG code */

After update, it does this:

<g id="dismiss.-popup"><rect x="-36.697" /* rest of SVG code */

What is with the period?!

Now I have to go through and edit the IDs or CSS/JS code every time I modify my SVG interactive and export it. I guess I could just accept the periods, but I would like to know why it is doing it.

 

Is this a bug or my machine? Why was this done?

 

Thanks

post-51751-0-08302100-1493484434_thumb.jpg

Share this post


Link to post
Share on other sites

If you write inside AD as layer name dismiss popup, e.g. use just a space between the words instead of a hyphen, it will be written like this id="dismiss-popup" into the exported SVG! - So spaces seem to be converted to hyphens in layer names, actually only "_" underline chars are preserved!

  • test_one -> test_one
  • test-two -> test.-two
  • test three -> test-three

☛ Affinity Designer 1.6.1 ◆ Affinity Photo 1.6.7 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

Hi Joed1035,

Welcome to the forum! I've reproduced this myself and can confirm that this wasn't an issue in 1.5.4 (as you've quite rightly said). I can't think of anything that will have purposely made this change so it looks like an unfortunate bug - I'll get it reported to development. In the meantime v_kyr's workaround should help you.

 

Thanks for letting us know!

Share this post


Link to post
Share on other sites

This is actually by design, but we'll improve the design for 1.6.

 

The reason is that some characters are not allowed in SVG names. In particular, spaces are not allowed and they are quite common, so we convert them to hyphens. Some users need to be able to get back to the original names (eg here), so we map hyphens to something else. In future we'll map spaces to hyphens and leave hyphens alone, and instead add the original name as a separate attribute. This will be a bit more verbose, but it will mean names that are valid SVG won't be touched.

Share this post


Link to post
Share on other sites

This is actually by design, but we'll improve the design for 1.6.

 

The reason is that some characters are not allowed in SVG names. In particular, spaces are not allowed and they are quite common, so we convert them to hyphens. Some users need to be able to get back to the original names (eg here), so we map hyphens to something else. In future we'll map spaces to hyphens and leave hyphens alone, and instead add the original name as a separate attribute. This will be a bit more verbose, but it will mean names that are valid SVG won't be touched.

Thanks Dave! As a thought would the original name as a separate attribute be optional in the export? I presume a lot of people will want to be able to control this to avoid bloating an SVG.

Share this post


Link to post
Share on other sites

Thank you all for your help. I will keep the current encodings in mind and wait for the hyphen encoding fix or a setting change and the original name added as an attribute.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×