While attempting to utilize librsvg to render charts produced in SVG format for a larger project, I noticed that the rendered result differs significantly from how the SVG file appears when opened in a web browser.
After analyzing the SVG file piece by piece, I discovered that one of the main reasons for this difference is that my CSS styles are not being applied.
Here is a sample mcve:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" version="1.1">
<style type="text/css"><![CDATA[
g path {
fill: none;
stroke: #00285f;
}
]]></style>
<g class="parent" transform="translate(50,50)">
<path class="mypath" d="M0,6V0H430V6" />
<line y2="6" x2="0" />
</g>
</svg>
In a web browser, the visualization looks like this: https://i.sstatic.net/1B5ee.png
However, when converting to png using the command:
rsvg-convert -f png -o s2.png s2.svg
the output changes and appears as follows: https://i.sstatic.net/IeS8u.png
The absence of fill and stroke on the path results in it looking like a black rectangle.
By adjusting the CSS to:
path {
fill: none;
stroke: #00285f;
}
I was able to style it correctly.
What could be causing this issue? Shouldn't librsvg support something as basic as CSS descendant selectors? I checked the documentation but found no mention of such a fundamental limitation.
Could it be that the way I am utilizing CSS only works in a web browser?
The version of librsvg I am using is 2.39.0.