Applying fill color to SVG doesn't work

bloodnok
Posts: 54
Joined: Mon Jun 27, 2011 10:51 pm

Applying fill color to SVG doesn't work

Post by bloodnok » Tue Mar 03, 2020 8:26 pm

Added a "fill" directive to my CSS to change the colour of the SVG in my output.

Code: Select all

span.uicontrol{
  color: #3D7FA5; /*Lastline Blue*/
  fill: #3D7FA5; /*Lastline Blue*/
}
"color" works but "fill" doesn't. The SVG were rendered in their original colour. Is this a known issue?

Thanks

Radu
Posts: 7224
Joined: Fri Jul 09, 2004 5:18 pm

Re: Applying fill color to SVG doesn't work

Post by Radu » Fri Mar 06, 2020 10:33 am

Hi,

Did you make those CSS changes in the CSS embedded inside an SVG file or in a CSS referenced in the HTML document?
Maybe you can try to use the web browser inspector for this. Once the CSS is correctly referenced in the HTML document and the SVG image is also referenced in the HTML document this is out of our hands. Is the SVG image embedded or referenced in the document? I'm not sure how browsers should apply the CSS styles defined in the HTML to SVG documents referenced inside them.

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

bloodnok
Posts: 54
Joined: Mon Jun 27, 2011 10:51 pm

Re: Applying fill color to SVG doesn't work

Post by bloodnok » Thu Mar 12, 2020 6:40 am

The SVG is embedded in our DITA source and thus in the transitional HTML file and the "fill" request is in a CSS file referenced by the HTML.

Thanks

Radu
Posts: 7224
Joined: Fri Jul 09, 2004 5:18 pm

Re: Applying fill color to SVG doesn't work

Post by Radu » Thu Mar 12, 2020 9:11 am

Hi,

I don't know what to say, maybe you can create a minimal HTML+CSS example and ask around on some HTML-specific mailing list.
Maybe also try the sample in various browsers.
There seems to be a similar discussion on Stack Overflow:

https://stackoverflow.com/questions/222 ... vg-element

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

bloodnok
Posts: 54
Joined: Mon Jun 27, 2011 10:51 pm

Re: Applying fill color to SVG doesn't work

Post by bloodnok » Tue Mar 17, 2020 12:21 am

Hi Radu,

The issue is that the SVG fill colour fails to survive to the Chemistry generated PDF. It works in HTML.

I generate an HTML file with one CSS file, then clone the HTML and apply my print CSS. The SVG fill works for both HTML files. My workflow usually discards the intermediate HTML file with the print CSS but I'd temporarily stopped that to confirm that SVG fill worked in HTML. It didn't work for the PDF at the end of the pipeline. The SVG is not in an image tag, BTW.

So it looks to me like a Chemistry issue. Can you confirm.

Thanks

Dan
Posts: 467
Joined: Mon Feb 03, 2003 10:56 am

Re: Applying fill color to SVG doesn't work

Post by Dan » Tue Mar 17, 2020 4:33 pm

I understand you are using an SVG that is embedded in your document, and you are trying to style it using a CSS customization. We will try to reproduce the problem on our side.

Many regards,
Dan

julien_lacour
Posts: 138
Joined: Wed Oct 16, 2019 3:47 pm

Re: Applying fill color to SVG doesn't work

Post by julien_lacour » Thu Mar 19, 2020 10:09 am

Hello,

We reproduced the problem on our side and we fixed it.
It will be available on the next Chemistry version or in an Oxygen Publishing Engine snapshot.

If you need a snapshot, please send an email to support@oxygenxml.com indicating the Oxygen version you are using.

Regards,
Julien

bloodnok
Posts: 54
Joined: Mon Jun 27, 2011 10:51 pm

Re: Applying fill color to SVG doesn't work

Post by bloodnok » Fri Mar 20, 2020 12:23 am

That's great news. Thank Julien!

julien_lacour
Posts: 138
Joined: Wed Oct 16, 2019 3:47 pm

Re: Applying fill color to SVG doesn't work

Post by julien_lacour » Thu May 21, 2020 12:30 pm

Hello,

Starting with version 22.1 (already available on our website), you can style embedded SVG files directly from CSS.

Regards,
Julien

bloodnok
Posts: 54
Joined: Mon Jun 27, 2011 10:51 pm

Re: Applying fill color to SVG doesn't work

Post by bloodnok » Fri Aug 14, 2020 8:34 pm

Julien,
Took me a while to get to this. Just installed Chemistry 22.1 and built one of my docs with it. Sorry to report, the fill directive had no effect on the colour of the SVG in the rendered PDF. Works as expected in the HTML output.
Thanks

julien_lacour
Posts: 138
Joined: Wed Oct 16, 2019 3:47 pm

Re: Applying fill color to SVG doesn't work

Post by julien_lacour » Mon Aug 17, 2020 11:06 am

Hello,

No problem, please verify in your transformation that the parameter 'use.css.for.embedded.svg' is set to 'yes'.
Is it possible for you to provide a small sample containing the SVG file and a part of the CSS customization?
We will analyze why you css does not apply on the SVG file. You can provide it here or at support@oxygenxml.com

Regards,
Julien

Post Reply