Skip to main content

Timeline for Can I change the fill color of an svg path with CSS?

Current License: CC BY-SA 4.0

10 events
when toggle format what by license comment
Jul 31, 2022 at 14:48 history edited Penny Liu CC BY-SA 4.0
deleted 3 characters in body
Oct 25, 2017 at 3:29 comment added Ricardo Zea @KenBellows That is true, I've learned that now. One thing to note is that we need to use SVG specific properties in the CSS otherwise it won't work. For example, to change the background color you use fill: #000; instead of background: #000;.
Oct 24, 2017 at 17:38 comment added Ken Bellows @RicardoZea One caveat to that: you can include an object from an external SVG file with <use href="external.svg#objId" /> and your local CSS will still apply to some degree.
Dec 30, 2013 at 20:23 comment added Ricardo Zea Keep in mind that in order for CSS to style the SVG, you have to include the SVG code in the markup, it doesn't work if you include the SVG via the <svg> tag.
Nov 15, 2013 at 20:13 review Suggested edits
Nov 15, 2013 at 20:42
Nov 1, 2013 at 22:31 comment added Nicholas Riley Take a look at the link to "Related Answer" above; it describes exactly your problem.
Nov 1, 2013 at 22:29 comment added Dallas Clark Thanks Nicholas, I believe I have found the reason. My SVG was embedded into the page through an <img> tag, CSS doesn't appear to be able to modify any content within. Is this correct?
Nov 1, 2013 at 17:01 comment added Nicholas Riley Yes, I just tested it with a current Chrome version and it still works. If you still need help, please post a question including a self-contained example (SVG with external or embedded CSS) and a description of your expected result and what you’re actually seeing (not just “I’m having difficulty”).
Nov 1, 2013 at 6:51 comment added Dallas Clark Does this still work with Chrome? I'm having difficulty trying to change my SVG path's color with CSS.
Mar 2, 2012 at 7:17 history answered Nicholas Riley CC BY-SA 3.0