CSS SVG Fill Issues

, ,
#1

I uploaded an icon & I can’t seem to change the fill color via css. So, I’m wondering if something’s amiss with the SVG code itself.

Here’s the SVG code:

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" width="20" height="20">
	<style>
		.s0 { fill: #97AD63 } 
	</style>
	<g id="Background">
		<path id="Path 0" class="s0" d="m15.27 8.72c-0.31 0.16-2.54 1.32-4.96 2.56-2.41 1.25-5.26 2.71-6.32 3.26l-1.92 0.99v2.77c1.45 0.75 2.56 1.32 3.4 1.76 0.84 0.43 2.24 1.15 3.11 1.6 0.88 0.45 2.05 1.06 2.61 1.35 0.56 0.29 1.84 0.95 2.85 1.46 1 0.52 1.84 0.95 1.85 0.95 0.02 0 0.03-0.65 0.03-1.45v-1.44c-1.99-1.03-4.26-2.19-6.32-3.25-2.05-1.06-3.93-2.02-4.16-2.14-0.42-0.21-0.42-0.21-0.28-0.3 0.07-0.04 0.72-0.38 1.44-0.74 0.72-0.37 1.79-0.92 2.38-1.23 0.59-0.3 2.39-1.23 4-2.06l2.92-1.5c0.02-2.24 0.01-2.89-0.02-2.89-0.02 0-0.3 0.13-0.61 0.3z"/>
		<path id="Path 1" fill-rule="evenodd" class="s0" d="m25.75 8.41l0.18 0.44c0.1 0.25 1.36 3.45 2.8 7.13 1.44 3.68 2.86 7.29 3.15 8.02 0.28 0.73 0.51 1.35 0.5 1.37-0.01 0.03-0.61 0.05-2.63 0.05l-0.13-0.3c-0.07-0.16-0.48-1.17-1.66-4.18h-6.97l-0.84 2.17c-0.46 1.19-0.87 2.2-0.9 2.24-0.05 0.05-0.37 0.07-1.36 0.07-0.71 0-1.3-0.02-1.31-0.05-0.01-0.02 0.23-0.66 0.53-1.43 0.31-0.76 1.24-3.14 2.09-5.3 0.84-2.15 2.07-5.28 2.73-6.97 0.66-1.68 1.23-3.1 1.25-3.15 0.05-0.09 0.18-0.1 2.57-0.11zm-3.85 10.28c-0.02 0.09 0.12 0.1 2.58 0.1 1.43 0 2.61-0.02 2.61-0.05 0-0.02-0.57-1.51-1.26-3.31-0.7-1.8-1.29-3.27-1.33-3.27-0.03 0-0.62 1.44-1.31 3.21-0.69 1.77-1.27 3.26-1.29 3.32z"/>
	</g>
</svg>

Does anyone know what I need to change so css fill will work? Thank you.

#2

Try moving the style outside the svg and see if it works, however your svg did not work for me on tiddlywiki.com so I belive there is an error therein.

#3

Moving the style outside broke the image.

Here’s the code again, In case I pasted it wrong the first time.

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" width="20" height="20">
	<style>
		.s0 { fill: #97AD63 } 
	</style>
	<g id="Background">
		<path id="Path 0" class="s0" d="m15.27 8.72c-0.31 0.16-2.54 1.32-4.96 2.56-2.41 1.25-5.26 2.71-6.32 3.26l-1.92 0.99v2.77c1.45 0.75 2.56 1.32 3.4 1.76 0.84 0.43 2.24 1.15 3.11 1.6 0.88 0.45 2.05 1.06 2.61 1.35 0.56 0.29 1.84 0.95 2.85 1.46 1 0.52 1.84 0.95 1.85 0.95 0.02 0 0.03-0.65 0.03-1.45v-1.44c-1.99-1.03-4.26-2.19-6.32-3.25-2.05-1.06-3.93-2.02-4.16-2.14-0.42-0.21-0.42-0.21-0.28-0.3 0.07-0.04 0.72-0.38 1.44-0.74 0.72-0.37 1.79-0.92 2.38-1.23 0.59-0.3 2.39-1.23 4-2.06l2.92-1.5c0.02-2.24 0.01-2.89-0.02-2.89-0.02 0-0.3 0.13-0.61 0.3z"/>
		<path id="Path 1" fill-rule="evenodd" class="s0" d="m25.75 8.41l0.18 0.44c0.1 0.25 1.36 3.45 2.8 7.13 1.44 3.68 2.86 7.29 3.15 8.02 0.28 0.73 0.51 1.35 0.5 1.37-0.01 0.03-0.61 0.05-2.63 0.05l-0.13-0.3c-0.07-0.16-0.48-1.17-1.66-4.18h-6.97l-0.84 2.17c-0.46 1.19-0.87 2.2-0.9 2.24-0.05 0.05-0.37 0.07-1.36 0.07-0.71 0-1.3-0.02-1.31-0.05-0.01-0.02 0.23-0.66 0.53-1.43 0.31-0.76 1.24-3.14 2.09-5.3 0.84-2.15 2.07-5.28 2.73-6.97 0.66-1.68 1.23-3.1 1.25-3.15 0.05-0.09 0.18-0.1 2.57-0.11zm-3.85 10.28c-0.02 0.09 0.12 0.1 2.58 0.1 1.43 0 2.61-0.02 2.61-0.05 0-0.02-0.57-1.51-1.26-3.31-0.7-1.8-1.29-3.27-1.33-3.27-0.03 0-0.62 1.44-1.31 3.21-0.69 1.77-1.27 3.26-1.29 3.32z"/>
	</g>
</svg>
#4

Is the result supposed to look like <A? sorry, to me that looked broken :nerd_face:

With the style inside or outside the svg, and colours from Google “css color picker” the <A changs color as expected. TiddlyWiki.com via FireFox and Chrome browsers using the second code example.

Have you used style more than once? The last will win. You can move it to a stylesheet tiddler and the stylsheet tag (not style tags)

#5

It is a cascade issue.

Outside the svg the style works.

Screenshot 2025-10-06 14.10.30
Screenshot 2025-10-06 14.10.301060×200 24.2 KB

TT

#6

:laughing: Yes, <A is how it’s supposed to look. Hmm. I’m using it in my editor toolbar for an HTML link button, but for some reason applying a style to my editor toolbar buttons doesn’t affect that one. But you said you were able to apply a fill style to it?

#7

For some reason, it doesn’t for me. When I take the stylesheet out of the svg, like you’ve done, it breaks the image for me.

#8

Try your code on tiddlywiki.com, or a downloaded empty.html and see if your code works. If it does then there is something in your wiki interfearing. Remember using the style tags is likely to cause clashes, the only work when visible (but you can’t see them) move the css to a style sheet tiddler and try again.

#9

If you have multiple SVGs with embedded stylesheets open, the styles seem to be shared. You can test this by creating two copies of your existing svg tiddler on a the main site, opening both, and noting that the style applies to both. (You probably want to change .s0 to something more random.) Remove the style tag from one of them, and it doesn’t change. Then close the other one, and the first one will lose the style.

This might be an issue with TW, but I think it’s more likely that this is either by spec or a common browser problem. I happened to be working with TW and SVGs recently and ran across it. I haven’t fixed it yet for myself but will do so soon.

One thing that should work is to just add a class to the SVG element and wrap up the CSS rules with it. This should work whether the <style> tag is inside the SVG element, inside the tiddler, or in a separate $:/tag/Stylesheet tiddler:

/* somewhere: external stylesheet, in-tiddler, or in SVG */
<style>
	svg.my-special-class {
		.s0 { fill: #97AD63 }
	}
 </style>

<svg class="my-special-class" version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" width="20" height="20">
 ...
</svg>
1 Like
#10

When used in a stylesheet tiddler, no need for the style tags.

1 Like
#11

Yes, it’s easy to forget that this might not be common knowledge. Thanks for the pointer.

1 Like
#12

Another option may be to put the SVG into a data: URL. That way the stylesheet doesn’t “leak” outside the SVG, and vice versa.

#13

I’m not sure about the OP, but I don’t think that would work in my case, where the SVGs are dynamically generated.

#14

I am just educating myself more on data URI’s and it seems it may be possible for a data uri to be created in TiddlyWiki where some of its content is rendered by tiddlywiki. Perhaps a custom widget for data URI’s?

#15

My use case was my WaveDrom plugin integrating a third-party library that generated SVGs. The primary reason data URIs wouldn’t work, would be if you wanted to style your SVGs using a ‘global’ stylesheet. I also wanted to do that, and ended up having my plugin insert a copy of the stylesheet into each SVG after it was generated, then listening for tiddler changes and re-generating/rendering as needed.

1 Like