Page 1 of 1

Applying fill color to SVG doesn't work

Posted: Tue Mar 03, 2020 8:26 pm
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

Re: Applying fill color to SVG doesn't work

Posted: Fri Mar 06, 2020 10:33 am
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

Re: Applying fill color to SVG doesn't work

Posted: Thu Mar 12, 2020 6:40 am
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

Re: Applying fill color to SVG doesn't work

Posted: Thu Mar 12, 2020 9:11 am
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

Re: Applying fill color to SVG doesn't work

Posted: Tue Mar 17, 2020 12:21 am
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

Re: Applying fill color to SVG doesn't work

Posted: Tue Mar 17, 2020 4:33 pm
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

Re: Applying fill color to SVG doesn't work

Posted: Thu Mar 19, 2020 10:09 am
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

Re: Applying fill color to SVG doesn't work

Posted: Fri Mar 20, 2020 12:23 am
by bloodnok
That's great news. Thank Julien!

Re: Applying fill color to SVG doesn't work

Posted: Thu May 21, 2020 12:30 pm
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