Can't control SVG icon fill color with CSS styles

Question

I have read all post in here about styling my svg fill color with CSS but without luck.

What I want is to able to make an icon with a link. My external svg file is grey, but I would like to make it red with css and change color to yellow when hovering.

I think I am targeting the SVG wrong. Please help. My test is here: testpage

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<style type="text/css">
<!--
.svgicon {
 fill: red;
}
.svgicon:hover {
 fill: yellow;
}
-->
</style>

<body>
<table width="100%" border="0" class="tabelform">
  <tr>
    <td width="100%"><a href="xxx.asp" class="svgicon"><object type="image/svg+xml" data="S/Images/new.svg" height="18" width="18"></object>test icon</a></td>
  </tr>
</table>
</body>
</html>

Just wondering if this may be of some use.... http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css — Ian, Feb 16 '15 at 21:16
As the accepted answer to that other question already says: You can not do that when embedding the SVG via `object`, the styles of the parent document won’t “trickle down” into the object – same as you would not expect the stylesheet of a parent document to influence elements _inside_ an iframe, right? — CBroe, Feb 16 '15 at 21:44
Either include the css with the svg, otherwise I think you will have to manipulate with javascript, maybe something like document.getElementById("myObject").contentDocument.getElementById("myElement").doSomething...; (assuming you have given them those IDs). Or load the SVG in, maybe with something like Snap and not use an object tag, or include the SVG inline. — Ian, Feb 17 '15 at 09:01
could you make a short example of including the css with the svg? — Jesper Kindt Larsen, Feb 17 '15 at 13:13
having trouble understanding inline svg. Is that where you do not point to a file, but include all the svg code in the .asp webpage? — Jesper Kindt Larsen, Feb 17 '15 at 13:15
http://tutorials.jenkov.com/svg/svg-and-css.html#inline-css-style-sheets would be useful example — Ian, Feb 17 '15 at 13:18

score 5 · Answer 1 · answered Oct 05 '16 at 15:06

Answer a little overdue, but worth having for reference for others.

Basically, the only type of SVG usage which can be used in conjunction with CSS is the inline usage.

This means you would literally put your SVG markup directly into the HTML source as follows:

<div class="my-svg">
    <svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
        <title>
            Expand
        </title>
        <path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
    </svg>
</div>

NOTE: This SVG has been optimised using SVGO and then manually edited to include and ID

You can now control the SVG using CSS like so:

.my-svg {
  fill: pink;
}

.my-svg:hover {
  fill: red;
}

currentColor

You can also use the currentColor keyword in the SVG to apply a colour to certain elements of it, for example:

<div class="my-svg">
  <svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
      <title>
          Current Event
      </title>
      <g fill="none" fill-rule="evenodd">
          <circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
          <ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
      </g>
  </svg>
</div>

.my-svg {
  color: red;
}

JS Fiddle

This can be handy if you need to use the same SVG across different websites / themes, such as dark and light, for easily switching SVG colours with CSS.

Caching / performance consideration: SVG cloning

You should also keep in mind, it's not a good idea to use inline SVG for repetitive images, such as icons, because they can not be cached (the SVG code will be repeated throughout your HTML, increasing the ultimate file size).

Instead, one approach I like to use is to create an SVG index at the top of my page, which contains all the SVGs I want to use on the page, for example:

<svg xmlns="http://www.w3.org/2000/svg" class="svg-index">
      <svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
          <title>
              Expand
          </title>
          <path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
      </svg>

      <svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
          <title>
              Current Event
          </title>
          <g fill="none" fill-rule="evenodd">
              <circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
              <ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
          </g>
      </svg>

</svg>

Make sure you set the SVG index to display: none so it doesn't show up on the page.

You can now reuse these SVGs repetitively throughout the page using the xlink:href attribute as follows:

<svg class="dropDown">
    <use xlink:href="#SVG-dropdown-icon" />
</svg>

<svg class="active">
    <use xlink:href="#SVG-active-icon" />
</svg>

<svg class="active">
    <use xlink:href="#SVG-active-icon" />
</svg>

<svg class="dropDown">
    <use xlink:href="#SVG-dropdown-icon" />
</svg>

JS Fiddle

This is called cloning, and allows you to take advantage of cacheable SVGs which can be controlled with CSS!

Hope this helps!

score 1 · Answer 2 · answered Aug 30 '16 at 12:25

1

try to use inline svg instead of external svg source then you can control

answered Aug 30 '16 at 12:25

OSA

13
1
4

While this might be a valuable hint to solve the problem, an answer really needs to demonstrate the solution. Please [edit] to provide example code to show what you mean. Alternatively, consider writing this as a comment instead. – Toby Speight Aug 30 '16 at 15:48

Can't control SVG icon fill color with CSS styles

2 Answers2

currentColor

Caching / performance consideration: SVG cloning