Applying fill color to SVG doesn't work

[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]

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

[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]

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

[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]

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]

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]

That's great news. Thank Julien!

[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]

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]

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