QSvgRenderer using an external CSS file

[KSierens]

Can someone please give me an example of using a SVG file having an external CSS file to control the colors for fill and stroke?

[ChrisW67]

The SVG support in Qt meets a subset of SVG Tiny specification. SVG Tiny only supports a subset of CSS styling and also states, "Authors must not rely on external, author stylesheets to style documents that are intended to be used with SVG Tiny 1.2 user agents."

What are you trying to achieve, and what exactly is failing?

[KSierens]

Depending on whether the UI is styled in a light or dark theme, we want to render parts of the SVG file in either black or white. It is my hope to override the stroke colors in an external CSS file.

[KSierens]

Is there anyway to conditionally use properties in a SVG file?

[KSierens]

As to what is failing, I just have a simple SVG image in which I am trying to override the color used for the stoke color. I have tried many things, and I can not get anything to work from the CSS.

That is why I was asking for a very simple example of getting CSS to work from SVG.

[KSierens]

Also, "currentColor" is not working in the SVG file when using QSvgRenderer. I set the pen color in the painter before calling render, but it does not use it.

[ChrisW67]

It seem to me that currentColor is designed to inherit from the CSS color property in the HTML environment in which the SVG is embedded. You do not have such an environment here.

[Bonnie]

If there's no better way, you can read svg file to a QByteArray, change the stroke color to what you want, then load the modified QByteArray to QSvgRenderer.

[KSierens]

Thank you all. I was able to figure out how to do this. I guess part of my problem is not understanding that when using a CSS with an SVG, the styling in the CSS will not override the values for the SVG element, just use it if it was not defined.

For example, if you have a 'path' element, and there is already a stroke color defined as in:

<path stroke="yellow" stroke-width="6" d="M 100,60 140,30 150,50 160,30 170,80" />

The following CSS value will not replace "yellow" with "red"

path {
stroke: red;
}

[JonB]

@KSierens
But that is true for all CSS on any HTML element: any property set explicitly on any element overrides any rule in CSS, which is only used for defaults if nothing explicitly, and always has been like that.

Full CSS in HTML allows you to use the !important directive in a CSS rule (stroke: red !important;) and that would actually override even matching style explicitly placed on an element. But Qt's CSS is a subset of full CSS and does not support !important, so you can't do that.