483

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

This works great, however I'm looking for a way to modify the "fill" attribute of an SVG when it's being served as a BACKGROUND-IMAGE.

html {      
    background-image: url(../img/bg.svg);
}

How can I change the colors now? Is it even possible?

For reference, here are the contents of my external SVG file:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>
3
  • I get hit up often with props for my answer. You should consider changing it to the accepted answer so it's not missed.
    – Ryan
    Jul 7, 2017 at 20:54
  • Your answer is certainly the winner here. Wish I had seen it 9 years ago!
    – Joe
    Aug 12, 2021 at 21:51
  • 2021 update: I'd argue that Adel's answer should be marked as the current "correct" answer.
    – rinogo
    Sep 6, 2021 at 19:59

24 Answers 24

274

You can use CSS masks, With the 'mask' property, you create a mask that is applied to an element.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

For more see this great article: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

12
  • 7
    this is good but when applied to an icon within an input field all the input text is hidden.
    – ejntaylor
    Feb 12, 2018 at 14:54
  • 15
    Summer 2019: 94% of browsers on this planet support "mask-image" OR "-webkit-mask-image" styles Jul 15, 2019 at 14:09
  • 1
    An addition for this in my case was useful is adding no-repeat: mask-repeat: no-repeat;
    – Renatex
    Jun 25, 2020 at 9:03
  • 5
    This answer is getting a lot more attention lately so I thought I should point out it is NOT a background image. This masks off the whole element including it's contents. If I wanted to dedicate an element to the image, I could just use a normal SVG with a fill set. Masking is useful for some cases but I dont think it really qualifies as an answer to this particular question.
    – cronoklee
    Sep 19, 2020 at 17:16
  • 2
    @cronoklee - While you're techincally correct, mask-image effectively can be used to create a "background image". To use this approach on Element A when masking is not desired, create an Element B (using any method you prefer) that has the same position and dimensions as Element A and apply the mask-image to Element B.
    – rinogo
    Sep 6, 2021 at 20:04
201

I needed something similar and wanted to stick with CSS. Here are LESS and SCSS mixins as well as plain CSS that can help you with this. Unfortunately, it's browser support is a bit lax. See below for details on browser support.

LESS mixin:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

LESS usage:

.element-color(#fff);

SCSS mixin:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS usage:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

Here is more info on embedding the full SVG code into your CSS file. It also mentioned browser compatibility which is a bit too small for this to be a viable option.

13
  • 71
    Note that you must urlencode the # character for your hex colors to make this work in Firefox. So something like <svg fill="#ffffff" ...></svg> becomes <svg fill="%23ffffff" ...></svg>.
    – Swen
    May 11, 2016 at 12:17
  • 2
    Sweet method. Do you have to hard encode the svg into the background-image like that? Can you not just link out to it somehow?
    – luke
    Jul 29, 2016 at 19:23
  • 1
    Problem with this method is that you miss out on browser cache.
    – Kareem
    Mar 17, 2018 at 8:00
  • 6
    I found this site useful for giving you the perfectly encoded URL ready for use: yoksel.github.io/url-encoder - Just copy the SVG code into it and copy out the returned CSS :-) Feb 11, 2020 at 11:07
  • 3
    I went this way, only to realise its blocked in production by any reverse proxy with decent security hearders, as explained here: stackoverflow.com/a/62213224/5506400. This was is vunerable to XSS attacks. Aug 22, 2021 at 17:09
96

One way to do this is to serve your svg from some server side mechanism. Simply create a resource server side that outputs your svg according to GET parameters, and you serve it on a certain url.

Then you just use that url in your css.

Because as a background img, it isn't part of the DOM and you can't manipulate it. Another possibility would be to use it regularly, embed it in a page in a normal way, but position it absolutely, make it full width & height of a page and then use z-index css property to put it behind all the other DOM elements on a page.

5
  • 8
    Don't forget if you're serving the SVG from a server-side script, to make sure you also send the correct MIME header. In PHP this would be: <?php header('Content-type: image/svg+xml'); ?> Aug 21, 2014 at 10:53
  • 5
    You can use the svg image as mask and manipulate the background-color of the element. This will have the same effect as changing the fill. (detailed answer provided)
    – widged
    Aug 3, 2015 at 23:32
  • 34
    This answer was great as of 2012, but now CSS masks and/or filters have been supported in all browsers for some time. I recommend that anyone reading this now check out the links in widged's answer below or just skip to CSS Masks here, which is a really easy solution -- note it still requires 2 version of the rule, one with -webkit- prefix at the present time. For Microsoft Edge, currently CSS filters are supported but not yet masks.
    – joelhardi
    Jul 4, 2017 at 17:09
  • 4
    There are many solutions provide bellow that work nowadays, I agree this answer no longer reflects the current state of possibilities.
    – David Neto
    Dec 20, 2018 at 23:15
  • 1
    Another issue with this solution is that for each color you need, you will make one more HTTP request, instead of fetching once and styling with filter or mask-image. Sep 29, 2021 at 9:56
71

Yet another approach is to use mask. You then change the background color of the masked element. This has the same effect as changing the fill attribute of the svg.

HTML:

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

CSS:

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

You will find a full tutorial here: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (not my own). It proposes a variety of approaches (not limited to mask).

5
  • 11
    One thing to note on this is browser support. I believe IE (as usual) is way behind on this. Jan 12, 2016 at 16:01
  • 9
    Unfortunately mask is neither supported by IE nor Edge: caniuse.com/#search=mask
    – alpipego
    Mar 30, 2016 at 8:09
  • Not working for me in Chrome either. Edit: Oh nvm... I don't have autoprefixer enabled. I thought vendors were supposed to stop using prefixes?!
    – mpen
    Jan 30, 2017 at 17:25
  • Works in latest chrome and firefox
    – tic
    Mar 14, 2019 at 15:20
  • 2
    @alpipego Update! Edge added support for mask-image in late 2017.
    – rinogo
    Sep 6, 2021 at 17:14
52

Use the sepia filter along with hue-rotate, brightness, and saturation to create any color we want.

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

5
  • 19
    Use this CSS filter generator: codepen.io/sosuke/pen/Pjoqqp
    – djibe
    Nov 3, 2020 at 22:09
  • Yes this should be the answer. Follow the css filter generator instructions from @djibe above. Nov 7, 2020 at 1:12
  • This does not answer the question. what if he wants to fill different paths with different color?
    – Davo
    May 19, 2021 at 16:24
  • This was incredibly helpful to me, along with @djibe 's comment
    – Jeff
    Jun 1, 2021 at 17:21
  • This is brilliant! I knew the filter sepia/hue-rotate trick but didn't think to look for a generator! \o/ Sep 29, 2021 at 9:32
23

It's possible with Sass! The only thing you have to do is to url-encode your svg code. And this is possible with a helper function in Sass. I've made a codepen for this. Look at this:

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}
1
  • 2
    This works very good. Only problem: In IE10 the icon is way too small (i think 10% of given size. May 24, 2016 at 15:05
13
 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

codeben article and demo

1
  • 2
    This method will apply filter to a whole object, including children. Jun 14, 2017 at 13:28
11

Now you can achieve this on the client side like this:

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

Fiddle here!

3
  • 1
    You should avoid the use of Base64 for SVG as it is unnecessary, makes your files bigger and even prevents GZIP from effectively compressing those chunks of code.
    – inta
    Jan 17, 2017 at 16:53
  • 1
    This encoding is happening on the client side, probably just for thorough escaping... Nov 6, 2017 at 6:37
  • 1
    It goes without saying you can do anything with JS. The point is to avoid JS. Jan 16, 2020 at 15:16
10

If you are trying to use and SVG directly on CSS with url() like this;

a:before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 451 451"><path d="M345.441,2...

You should encode the # to %23, otherwise it won't work.

<svg fill="%23FFF" ...
9

Download your svg as text.

Modify your svg text using javascript to change the paint/stroke/fill color[s].

Then embed the modified svg string inline into your css as described here.

8

You can store the SVG in a variable. Then manipulate the SVG string depending on your needs (i.e., set width, height, color, etc). Then use the result to set the background, e.g.

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

I have made a demo too, http://sassmeister.com/gist/4cf0265c5d0143a9e734.

This code makes a few assumptions about the SVG, e.g. that <svg /> element does not have an existing fill colour and that neither width or height properties are set. Since the input is hardcoded in the SCSS document, it is quite easy to enforce these constraints.

Do not worry about the code duplication. compression makes the difference negligible.

1
  • Duplicate code is a code smell so suggesting people should not worry about duplicate code in the case of your example is not a good idea, however that said I can't see where your code is duplicated? I think it would read better if you just removed the comment altogether. Jan 7, 2020 at 17:09
6

You can use the brightness filter, any value greater than 1 makes the element brighter, and any value less than 1 makes it darker. So, we can make those light SVG’s dark, and vice versa, for example, this will make the svg darker:

filter: brightness(0);

In order to change the color and not only brightness level we can use sepia filter along with hue-rotate, brightness, for example:

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}
4

You can create your own SCSS function for this. Adding the following to your config.rb file.

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path, fill)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    svg.gsub! '{color}', fill.value
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

Then you can use it in your CSS:

.icon {
  background-image: inline-svg-image('icons/icon.svg', '#555');
}

You will need to edit your SVG files and replace any fill attributes in the markup with fill="{color}"

The icon path is always relative to your images_dir parameter in the same config.rb file.

Similar to some of the other solutions, but this is pretty clean and keeps your SCSS files tidy!

1
  • 1
    this is from a github-issue. Just referencing it here in case somebody wants to read the discussion there Oct 26, 2015 at 10:57
4

If you wanna swap in a simple way from white to black or some like that, try this:

filter: invert(100%);
3

In some (very specific) situations this might be achieved by using a filter. For example, you can change a blue SVG image to purple by rotating the hue 45 degrees using filter: hue-rotate(45deg);. Browser support is minimal but it's still an interesting technique.

Demo

2

for monochrome background you could use a svg with a mask, where the background color should be displayed

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

and than use this css

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);
2

Since this comes up on Google despite the age, I thought I might as well give a solution that I'm employing in the distant future of 2022 after looking at the options here.

This is really just the mask solution from before, but on a pseudo-element.

.icon {
    height: 1.5rem;
    width: 1.5rem;
}
.icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url("path/to/svg/icon.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url("path/to/svg/icon.svg");
}

This works in all major browsers today, although obviously you can't have an SVG with multiple colors using this. That's the cost of business if the site doesn't let you inject them inline, or if you don't fancy doing font icons, etc.

1

Late to the show here, BUT, I was able to add a fill color to the SVG polygon, if you're able to directly edit the SVG code, so for example the following svg renders red, instead of default black. I have not tested outside of Chrome though:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon 


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>
1

The only way i found for this, and to be cross browser (aka bulletproof), is to render the SVG with PHP and pass Query String to set the color.

The SVG, here called "arrow.php"

<?php
$fill = filter_input(INPUT_GET, 'fill');
$fill = strtolower($fill);
$fill = preg_replace("/[^a-z0-9]/", '', $fill);
if(empty($fill)) $fill = "000000";
header('Content-type: image/svg+xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<svg xmlns="http://www.w3.org/2000/svg" width="7.4" height="12" viewBox="0 0 7.4 12">
    <g>
        <path d="M8.6,7.4,10,6l6,6-6,6L8.6,16.6,13.2,12Z" transform="translate(-8.6 -6)" fill="#<?php echo htmlspecialchars($fill); ?>" fill-rule="evenodd"/>
    </g>
</svg>

Then you call the image like this

.cssclass{ background-image: url(arrow.php?fill=112233); }

Works only with PHP. And remember that everytime you change the color value, your browser will load a new image.

1

Here is another solution using a gradient and a monochrome icon as background and background-blend-mode to colorize the icon. It requires the background-color to be white, else the whole background gets colored. I only tested on Chrome.

.colored-background {
  background-image: linear-gradient(45deg, green, green), url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-color: #fff;
  background-blend-mode: lighten, normal;
  background-repeat: no-repeat;
  background-position: center, center right .8em;
  background-size: auto, 0.6em;
  color: red;
  display: inline-flex;
  align-items: center;
  padding: 0.5em;
  padding-right: 2em;
  height: 1.6em;
  width: auto;
  border: 1px solid gray;
}

.bg {
  background-color: #ddd;
  padding: 1em;
}
<div class="bg">
  <div class="colored-background">green icon from black svg</div>
</div>

0

scss create function

@function url-svg($icon) {
  @return url("data:image/svg+xml;utf8,#{str-replace($icon, "#", "%23")}");
}

scss use

url-svg('<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="#8A8A8F"/></svg>')

css generated

url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="%238A8A8F"/></svg>')

The str-replace function is used from bootstrap.

-1

Related to a closed question that is linked to here, but not related directly to this question.

So in case, anyone needs actually to replace src like in the linked question, there is already an answer there. Furthermore if anyone is coming from Vue, and the src path is change on compile, I've come up with a different solution.

In my case, the parent element is a link, but it could be anything really.

<a
  v-for="document in documents" :key="document.uuid"
  :href="document.url"
  target="_blank"
  class="item flex align-items-center gap-2 hover-parent"
>
  <img alt="documents" class="icon" src="../assets/PDF.svg" />
  <strong>{{ document.name }}</strong>
  <img class="itemImage ml-auto hide-on-parent-hover" src="../assets/download-circular-button.svg" />
  <img class="itemImage ml-auto show-on-parent-hover" src="../assets/download-circular-button-hover.svg" />
</a>
.hover-parent       .show-on-parent-hover { display: none }
.hover-parent       .hide-on-parent-hover { display: block }
.hover-parent:hover .show-on-parent-hover { display: block }
.hover-parent:hover .hide-on-parent-hover { display: none }

So the solution here is not to change src attribute, but instead to put both <img> elements in the DOM and only display the one that is needed.

If you don't have a parent element that's supposed to be hovered on, you can simply wrap both images in a div.

<div class="hover-parent" >
  <img class="hide-on-parent-hover" src="../assets/download-circular-button.svg" />
  <img class="show-on-parent-hover" src="../assets/download-circular-button-hover.svg" />
</div>

You might also change CSS to the following, so the .hover-parent ancestor must be a direct parent:

.hover-parent       > .show-on-parent-hover { display: none }
.hover-parent       > .hide-on-parent-hover { display: block }
.hover-parent:hover > .show-on-parent-hover { display: block }
.hover-parent:hover > .hide-on-parent-hover { display: none }
0
-2

This is my favorite method, but your browser support must be very progressive. With the mask property you create a mask that is applied to an element. Everywhere the mask is opaque, or solid, the underlying image shows through. Where it’s transparent, the underlying image is masked out, or hidden. The syntax for a CSS mask-image is similar to background-image.look at the codepenmask

-5

A lot of IFs, but if your pre base64 encoded SVG starts:

<svg fill="#000000

Then the base64 encoded string will start:

PHN2ZyBmaWxsPSIjMDAwMDAw

if the pre-encoded string starts:

<svg fill="#bfa76e

then this encodes to:

PHN2ZyBmaWxsPSIjYmZhNzZl

Both encoded strings start the same:

PHN2ZyBmaWxsPSIj

The quirk of base64 encoding is every 3 input characters become 4 output characters. With the SVG starting like this then the 6-character hex fill color starts exactly on an encoding block 'boundary'. Therefore you can easily do a cross-browser JS replace:

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

But tnt-rox answer above is the way to go moving forward.

3
  • It seems public disliked the base64 use
    – revelt
    Jul 6, 2020 at 17:27
  • This is ridiculous to write by hand but a great small lib idea. Bascially, base64 encode just parts of svg, swap as needed. (In my solution, I'm doing same but via components, pretty much free when prerendering vue, so no need for base64 here)
    – n-smits
    Jul 9, 2021 at 16:32
  • @revelt - this was written in 2016, SVG data-uris HAD to be base 64 encoded. Lot's has changed thankfully
    – A2D
    Dec 21, 2021 at 21:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.