Html css

How To Change The Fill Color Of SVG With CSS

Posted by Weston Ganger on November 01, 2016

SVG’s are a pretty cool beast theres a lot you can do with them. One thing though that I commonly want to do is be able to change the fill color when using them as icons.

<i class="my-icon"></i>

.icon {
    width: 50px;
    height: 50px;

    /* Background Option 1: Use a background-color as the fill */
    background-color: red;

    /* Background Option 2: Use a background-image as the fill */
    background-image: url(background.png);

    /* Syntax Option 1: mask shorthand */
    mask: url(icon.svg) no-repeat 50% 50%;
    -webkit-mask: url(icon.svg) no-repeat 50% 50%;

    /* Syntax Option 2: mask-image only */
    mask-image: url(icon.svg);
    -webkit-mask-image: url(icon.svg);

(Here is the compatibility chart for this CSS)[]. As of the time of writing this (IE doesn’t support this)[] feature at all. Im using this in my Ionic apps which all support this feature.

Related External Links:

Posted in HTML / CSS and Tagged with svg 

Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts