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.