Applying fill color to SVG doesn't work

Having trouble installing Oxygen PDF Chemistry? Got a bug to report? Post it all here.
bloodnok
Posts: 54
Joined: Mon Jun 27, 2011 10:51 pm

Applying fill color to SVG doesn't work

Post by bloodnok »

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: 8171
Joined: Fri Jul 09, 2004 5:18 pm

Re: Applying fill color to SVG doesn't work

Post by Radu »

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 »

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: 8171
Joined: Fri Jul 09, 2004 5:18 pm

Re: Applying fill color to SVG doesn't work

Post by Radu »

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 »

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: 500
Joined: Mon Feb 03, 2003 10:56 am

Re: Applying fill color to SVG doesn't work

Post by Dan »

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: 303
Joined: Wed Oct 16, 2019 3:47 pm

Re: Applying fill color to SVG doesn't work

Post by julien_lacour »

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 »

That's great news. Thank Julien!
julien_lacour
Posts: 303
Joined: Wed Oct 16, 2019 3:47 pm

Re: Applying fill color to SVG doesn't work

Post by julien_lacour »

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 »

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: 303
Joined: Wed Oct 16, 2019 3:47 pm

Re: Applying fill color to SVG doesn't work

Post by julien_lacour »

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