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.