How to modify color inside SVG image?

HTML & CSS
1

I have tried to modify color inside SVG image. How to force color and text inside SVG? Is there any connection inside SVG file/code and force color? My code will not work.

.button .red1 {
 color: red;
 background-color: white;
}
2

How is the image placed into the page?
If you link to an image file with <img> for example, CSS won’t work on it.
The SVG has to be in-lined as part of the document for CSS to work on it.

1 Like
3

Thnak you for the message!
So, only solution is to insert code inside CSS and force my above code?

4

The SVG code has to be within the HTML on the page.
Though there is a trick I sometimes use, to keep the SVG code in a separate, reusable file, if you are using PHP. I insert the SVG file as a PHP include. This will insert the SVG code in-line on the client side code, so CSS works, but it doesn’t appear in your server side source code, and the image remains an independant, reusable file, that can be modified in just one place, if need be.

2 Likes
5

Thank you for the message.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.