Jesper Kindt Larsen
Jesper Kindt Larsen

Reputation: 107

Can't control SVG icon fill color with CSS styles

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>

Upvotes: 1

Views: 5747

Answers (2)

tw_hoff
tw_hoff

Reputation: 400

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!

Upvotes: 6

OSA
OSA

Reputation: 13

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

Upvotes: 1

Related Questions