SVG created using JavaScript + opacity + color fidelity issue?

New Here ,
May 01, 2022 May 01, 2022

Copy link to clipboard

Copied

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

 

TOPICS
How to , Scripting

Views

120

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 01, 2022 May 01, 2022

Copy link to clipboard

Copied

quote

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines