Forum How do I...?

Override presentation attributes present in an svg with external CSS

In webkit and gecko, I can override paths that have a fill attribute with css. But with Prince (9 rev 4), it appears my external CSS only applies to paths that have no fill attribute.

For example, in the below example, the first two paths work as expected (ie, consistent with webkit/gecko) but not the last, which remains grey.

Is this possible with Prince? The svgs we get from Illustrator have fills set, which we need to theme later with CSS.

.pie-series-1 {
	fill: red !important;
.pie-series-2 {
	fill: green !important;
.pie-series-3 {
	fill: blue !important;
<svg id="chart" version="1.1" xmlns="" width="100%" height="100%" stroke-linejoin="round" viewBox="0 0 500 500">
	<path class="pie-series-1" stroke-width="4" d="M250,250 l1.506265815201524e-14,-246 A246,246 0 1,1 4,250.00000000000003 z"></path>
	<path class="pie-series-2" style="fill: #444" stroke-width="4" d="M250,250 l-246,3.012531630403048e-14 A246,246 0 0,1 34.42855670920957,131.488596170978 z"></path>
	<path class="pie-series-3" fill="#555" stroke-width="4" d="M250,250 l-215.57144329079043,-118.51140382902199 A246,246 0 0,1 249.99999999999994,4 z"></path>

Pulse Energy

Right, it seems that presentational attributes are supposed to be equivalent priority to author style declarations, but they are currently being treated as higher priority than style attributes. Perhaps we can change this in the next release of Prince.
I haven't actually checked the spec, but that seems like a good change. As a workaround, it seems we can change the behaviour of the Illustrator export plugin to use inline styles instead of attributes.

Pulse Energy

We have fixed this in Prince 9 rev 5, available now. Thanks for letting us know about this issue.