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
Re: Applying fill color to SVG doesn't work
Posted: Fri Aug 14, 2020 8:34 pm
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
Re: Applying fill color to SVG doesn't work
Posted: Mon Aug 17, 2020 11:06 am
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