Underscores in SVG id attributes won't get their CSS styles applied
When using ids in SVG elements with underscores in them, their styles won't be applied when opened in Illustrator.
Attached is a 281 bytes file showing the problem. Opening it in Illustrator should show the square being red.
From the XML spec:
Note that COLON, HYPHEN-MINUS, FULL STOP (period), LOW LINE (underscore), and MIDDLE DOT are explicitly permitted.
Gust van de Wal
shared this idea
-
Dirk Schulze
commented
Zipped SVG file
-
Dirk Schulze
commented
Hello Gust,
I attached a simple SVG file based on your code snippet. I can reproduce the issue that you see in the latest Illustrator release.
Thanks a lot for reporting the issue,
Dirk -
Brennan Young
commented
Very good catch!
I encountered this problem too with class names. I just added a comment to my bug report mentioning yours. I am fairly sure this is a duplicate, although the symptoms are slightly different. Still, the title of your bug report is closer to the 'truth' of the matter.
What I caught (and missing from the report above) is that this issue pertains specifically to path elements. Not (e.g.) rect, circle, polygon... There might be other points of failure but certainly path import is borked here.
In one line, the issue appears to be: SVG import fails to import css rules for path elements with class/id identifiers containing underscores.
The good thing is, there's a workaround for today: Simply don't use underscores in class/id identifiers. But it's still Adobe's bug to fix.
FYI the title of my bug report is "Imported SVG path elements - always black fill".
-
Gust van de Wal
commented
Or if someone at Adobe could edit the database entry containing the text, that'd be great. Post a comment if you've done so, so I can delete my comments. Or do so yourself.
Nobody will probably ever read this anyway...
-
Gust van de Wal
commented
Well, for some reason, the text editor has converted one of the quotes into '"'. I can't edit the 'idea', so you'll have to swap them manually. Anyone reading this who works at Adobe might want to report a bug on this as well.
-
Gust van de Wal
commented
I'm on Windows 10 using Illustrator CC 22.0.1 (64-bit)
When using ids in SVG elements with underscores in them, their styles won't be applied when opened in Illustrator.
I wanted to attach an SVG file, but it is 'not allowed'. I've made it 125 characters, so I'll just paste it here:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9"><style>#i_d{fill:red}</style><path id="i_d" d="M1,1H8V8H1z"/></svg>
Opening it in Illustrator should show a red square. It doesn't.
From the XML spec:
Note that COLON, HYPHEN-MINUS, FULL STOP (period), LOW LINE (underscore), and MIDDLE DOT are explicitly permitted.