SVG created using JavaScript + opacity + color fidelity issue?

[foundartfactory]

Hi there!

I'm creating SVGs in-browser using JavaScript. When I open them in Illustrator everything's black, unless I first convert the fill/stroke colors from HSL to Hex (which I'm now doing via script). For example:

<rect id="inDkSq0-27" x="0" y="0" width="6" height="6" transform="matrix(-0.22495,-0.97437,0.97437,-0.22495,335.66982,365.77399)" fill="hsl(50, 50%, 70%)" stroke="hsl(50, 50%, 70%)" fill-opacity="0.064" stroke-opacity="0.081"/>

versus

<rect id="inDkSq0-27" x="0" y="0" width="6" height="6" transform="matrix(-0.22495,-0.97437,0.97437,-0.22495,335.66982,365.77399)" 
fill="#ad1510" stroke="#7cb521" fill-opacity="0.064" stroke-opacity="0.081"/>

I'm guessing that HSL isn't a kosher format for Illustrator? HSL is easier to deal with script-wise & I'd like to avoid unnecessary steps.

Secondly, when I do open the file successfully in Illustrator, the colors are shifted -- much more saturated and bright. Which is kinda cool, but I think may point to another issue with my opacity levels (see code above), and how it's translating from my code to Illustrator.  Is that the case?

There are hundreds of elements in the SVG file: svg example on CodePen 

Hope I'm asking my questions correctly -- thanks in advance for any insight!

Patrick

[Mylenium]

Secondly, when I do open the file successfully in Illustrator, the colors are shifted -- much more saturated and bright. Which is kinda cool, but I think may point to another issue with my opacity levels (see code above), and how it's translating from my code to Illustrator.  Is that the case?

No, it isn't. It's a simple lack of color management plus differences in the underlying render engines. Your hex values mean nothing without CM and so does opacity. 80% opacity blended with a linear Gamma will produce different results than another value. If you really want to have your generated SVGs work in professional graphics apps you have to figure all that in. And yes, HSL is not a safe color model, since it's just a different representation of RGB, not a native color space, plus again that color management stuff affects how it is rendered and converted. You can of course have people input values as HSL, but you need to convert the values in your code. Either way, you need to put in much more work on your code and harden it for these scenarios.

Mylenium

[m1b]

Hi @foundartfactory, I can confirm that "hsl" in svg file doesn't work for me in Illustrator 26.2.1. For what it's worth, "rgb" does work (but not "rgba"). I guess you can decide which format is easier to convert to.

- Mark

[foundartfactory]

Hi @Mylenium & @m1b -- thanks for your responses! Apologies for my delay in getting back here.

Yah, converting to rgb only is one less step, so it may make sense to do that. 

@Mylenium I'll need to see how important it really is for me to have these files live in a color managed setting (beyond the browser), but I understand the need for hardening the code for sure. I've got some reading to do! 🙂

Some general cleanup of the SVG output has helped with Illustrator already; There's a lot of extraneous and not useful info in there, and I'm stripping it down before handing it off.

Thnaks again -- I'll report with progress! 

Patrick