How to change the svg color for an element?
Hey Dharapatel,
You can directly include CSS styles within the SVG file to change the color of an element.
For example.
<svg width=“100” height=“100” xmlns=“SVG namespace”> <style> .my-element { fill: red; } </style> <circle class=“my-element” cx=“50” cy=“50” r=“40” /> </svg>
In this example, the circle element will be filled with red color.
Hiii Dharapatel,
If the SVG is embedded in an HTML file, you can style it using an external or internal CSS.
Internal CSS : <!DOCTYPE html> <html> <head> <style> .my-element { fill: blue; } </style> </head> <body> <svg width=“100” height=“100” xmlns=“SVG namespace”> <circle class=“my-element” cx=“50” cy=“50” r=“40” /> </svg> </body> </html>
External CSS /* styles.css */ .my-element { fill: green; }
<!DOCTYPE html> <html> <head> <link rel=“stylesheet” type=“text/css” href=“styles.css”> </head> <body> <svg width=“100” height=“100” xmlns=“SVG namespace”> <circle class=“my-element” cx=“50” cy=“50” r=“40” /> </svg> </body> </html>