CSS different output in mozilla firefox and internet explorer - css

I'm practicing css and I came across this problem. I'm using an svg as a background. I get the result that I want when I try to run it in Opera and Google Chrome, like this:
But when I try to run it in mozilla, it appears like this, there are a few spaces in the top and bottom:
And also, in Internet Explorer, the svg appeared a lot more out of place, like this:
I've tried using css reset, but nothing happened.
Here is my svg code
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 22.58">
<defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="15.6" y1="9.41" x2="10.68" y2="22.94" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#65ffb7"/><stop offset="1" stop-color="#47f2d0"/></linearGradient></defs>
<title>landing bg</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
<polygon class="cls-1" points="10.54 0 0 16.03 9.31 22.58 24 22.58 24 0 10.54 0"/></g></g></svg>
CSS Code
body
{
background-color: white;
}
.frame1
{
background: #000000 url('../images/landing_bg.svg');
background-repeat: no-repeat;
background-position: right;
height: 900px;
width: 100%;
position: absolute;
min-width: 900px;
top: 0;
right: 0;
}
HTML Code
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "main page/main.css">
<link rel = "stylesheet" type = "text/css" href = "main page/reset.css">
</head>
<body>
<div class = "frame1">
</div>
</body>
Am I missing something or is there something that I should remove in order to get my desired result(see first picture) ?


It seems like your viewbox of the svg is the problem.
Try e.g.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
To be honest, I am not able to provide any information to explain this behaviour. But I've found this topic, maybe it's related to the reason.


In your HTML, try switching the positions of your main.css and reset.css links in the head. Stylesheets are loaded in the sequence they are linked and this may be why your reset is not working as expected.


I got my desired result on mozilla when I changed the svg viewBox. But for Internet Explorer, nothing happened when I changed the svg viewBox. Maybe I'll try adding a stylesheet that is specifically for Internet Explorer.
P.S.
Sorry for the late response, I got sick :/ but I am well now. Thanks!

Related

Color changeable SVG?

I wish to build a website where icon colors can be easily changed with the only change of the css. I've been given a set of custom icons in form of svg files.
I've already experimented with background color, filters and alike (see https://codesandbox.io/s/exciting-montalcini-xfufu?file=/index.html).
Which is the best technique to use? Should I generate a font from the SVGs?

First, open your SVG file and change the style of the .cls-1 path:
.cls-1 { fill: currentColor; }
Now place the SVG inside your HTML code. The color of the shield will follow the current font color. The <use> tag will allow you to duplicate it easily. Just make sure to hide the original instance of the SVG with style="display: none;".
svg {
width: 42px;
height: 50px;
}
.green-icon { color: green; }
.red-icon { color: red; }
.blue-icon { color: blue; }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768.42 907.1" style="display: none;"><defs><style>.cls-1{fill:currentColor;}.cls-2{fill:#fff;}</style></defs><g id="Livello_2" data-name="Livello 2"><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M766.27,141.2c-157.6,0-279.1-44.3-382.5-141.2C282,97.7,160.47,141.2,2.07,141.2c0,253.7-53.4,618.2,382.5,765.9C820.47,758.6,766.27,394.9,766.27,141.2Z"/><path class="cls-2" d="M449.87,436.6a43.42,43.42,0,0,1,28.9-7.1l113.9-114-63.8-63.8L415,365.7a42.67,42.67,0,0,1-7.4,29.2Z"/><polygon class="cls-2" points="251.17 575.4 246.97 571.3 225.37 588.8 188.97 646.1 198.37 655.4 255.67 619 273.17 597.5 268.97 593.3 341.47 520.8 323.47 503.1 251.17 575.4"/><path class="cls-2" d="M350.27,374.5a88.86,88.86,0,0,0-108.9-109.8l50.4,50.3-13.2,49.3-49.4,13.2-50.3-50.3a88.86,88.86,0,0,0,113.5,107.7l.3.3,207.1,207.1a42,42,0,0,0,59.4-59.4Zm182.8,261a16,16,0,1,1,16.1-16A16,16,0,0,1,533.07,635.5Z"/></g></g></svg>
<svg class="green-icon" viewBox="0 0 768.42 907.1"><use href="#Layer_1"></use></svg>
<svg class="red-icon" viewBox="0 0 768.42 907.1"><use href="#Layer_1"></use></svg>
<svg class="blue-icon" viewBox="0 0 768.42 907.1"><use href="#Layer_1"></use></svg>
(This solution is based on this article from CSS Tricks.)

Generating a custom icon font would property be the best idea, since you have the fastest implementation in your HTML markup and don't have to care about embedding images again an again anymore.
https://icomoon.io is a great generator when you are looking for a helper software to generate your font.

I can't get any custom url cursor to work

This is my first bug so be gentle. I just can't get a custom url cursor to work. When using a standard one like "pointer" everything works, but when using a url, either local or remote it just does nothing.
I've come across similar issues being solved here but none of them are working for me (checking the sizing, file type, url location...)
My goal was for it to appear when hovering an svg image. I've tried styling it inside the svg file itself, it works fine for "pointer" but not for "url".
I've tried adding the svg file inside an tag, and styling the cursor inside it, works with "pointer", doesn't work with "url".
Tested on different browsers, none of them respond to it.
What am I doing wrong? See below some of the stuff I've tried:
<svg ...>
<style>
svg {cursor: url(01ssss3326.cur);}
</style>
</svg>
doesn't work
<svg ...>
<style>
svg {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=107471);}
</style>
</svg>
doesn't work
<body>
<img src="prettyinternet.svg" alt="" style="cursor: url(http://www.rw-designer.com/cursor-extern.php?id=109070);">
</body>
doesn't work
<body>
<img src="prettyinternet.svg" alt="" style="cursor: pointer;">
</body>
this works
<svg ...>
<style>
svg {cursor: pointer;}
</style>
</svg>
this works too

Is that working in this way? I guess you are just missing ""
<svg ...>
<style>
svg {cursor: url("01ssss3326.cur");}
</style>
</svg>
This is another example which I used in one of my project and it works. I am passing it in my css
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='38' viewport='0 0 100 100' style='fill:black;font-size:19px;'><text y='50%'>🚀</text></svg>") 16 0,auto;

IE and Edge ignore absolute position of svg [duplicate]

I decided to switch to svg symbols for one of my projects - but need them to be responsive. The main idea is not to have multiple http requests, so I was thinking of merging all SVGs into one SVG, define symbols and use them as follows:
<svg style="display:none;">
<defs>
<symbol id="mys">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
<use xlink:href="#mys"></use>
<svg>
</div>
Here is a jsfiddle, check the different behaviour in IE (I checked 11 but read that 9 has multiple issues as well):
http://jsfiddle.net/ws472q71/
For the life of me I can't get this to work properly. The above code works correctly in Firefox and Chrome, but fails in IE. I read about IE issues, but I couldn't find anything that works.
What am I doing wrong?
Is there any other similar solution that can merge SVGs into one file and use them as responsive images?
Thanks!

As you have discovered, IE has a bug where it doesn't scale the SVG properly if you don't provide both the width and height.
To get it working in IE, you can use a trick discovered (?) by Nicolas Gallagher.
http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/
The trick uses a <canvas> element. IE does properly scale canvas elements. So if you place one in the <div> with the SVG, the SVG will end up the correct size. You just need to give the canvas the same aspect ratio as your SVG.
<div style="position:relative;width:100%;background:blue;">
<canvas width="254" height="108"></canvas>
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
<use xlink:href="#mys"></use>
</svg>
</div>
with CSS
canvas {
display: block;
width: 100%;
visibility: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
canvas {
display: block;
width: 100%;
visibility: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<svg style="display:none;">
<defs>
<symbol id="mys">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
<canvas width="254" height="108"></canvas>
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
<use xlink:href="#mys"></use>
</svg>
</div>
The trick works whether you are trying to get it to match a width or a height.

On a side note to help anyone struggling to implement this fix or finding its not working with external svg files rather than in-page svg markup
You need to ensure that when editing your svg file in a text editor it is not missing viewBox or preserveAspectRatio attributes in the opening <svg> tag. If these are missing regardless of what fixes you apply the svg will still not scale in IE - even though it'll scale in other browsers without issue.
If these options are set you can define the width/height on the image element used to pull in the svg to 100% and use max-width or max-height to limit the scaling and it will perform as expected. Though - you could still get some alignment issues.

Nicolas Gallagher's solution works great, however, I ran into some responsive issues as I decreased the viewport. I thought I would pass along the fix I used:
<div class="parent-div">
<canvas width="3" height="1"></canvas>
<svg class="mys" viewBox="0 0 254 108">
<use xlink:href="#mys"></use>
</svg>
</div>
I updated the "parent-div" with max-width:100%;
.parent-div{
position: relative;
display: inline-block;
height: 550px;
max-width: 100%;
}
This will not solve all your scaling issues. You will still have to use media queries to change the height as you go, but at least the svg doesn't blow out its container. Hope this helps someone.

This can be rewritten like so if you're working with <img>
HTML
<div class="ie-svgHeight">
<img src="path.svg" class="ie-svgHeight-img">
<canvas class="ie-svgHeight-canvas"></canvas>
</div>
SCSS
.ie-svgHeight {
position: relative;
&-canvas {
display: block;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
&-img { height: 100%; }
}

SVG - Accessing individual nodes on xlink:href external source

I was looking at Chris Coier's SVG tricks on CSS-tricks.com and also recently saw him at a conference where he talked about the powers of SVGs and how you can keep all assets in one external svg file.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="beaker" viewBox="214.7 0 182.6 792">
<!-- <path>s and whatever other shapes in here -->
</symbol>
<symbol id="shape-icon-2" viewBox="0 26 100 48">
<!-- <path>s and whatever other shapes in here -->
</symbol>
</svg>
Then, you could just use it like this:
<svg class="icon">
<use xlink:href="#shape-icon-1" />
</svg>
<svg class="icon">
<use xlink:href="#shape-icon-2" />
</svg>
Sounds great! BUT, I want to be able to access individual nodes in each symbol and altering them with CSS like I normally would if the SVG was inline in the HTMl.
Take a look at this CodePen:
http://codepen.io/chriscoyier/pen/Hwcxp
I thought I could do this, but I can't get it to work:
.icon path{
fill: green;
}
This does, but this alters the actual source svg
#beaker path {
fill: green;
}
What I want to do is reuse a graphical element in a grid. And on hover, alter a node in the svg. But only on the node in that particular parent. Not all of them.

Firefox does some unknown thing where you can style it this way.
edit:
To be more precise:
Firefox seems to turn that symbol kinda into in the DOM.
http://codepen.io/Type-Style/pen/EaGbam
.hoverME:hover path, .hoverME:hover circle {
fill: red;
}
This also works with an external file. (Unfortunatly it does not with crossDomain Files)
"But you can insert just the class name of the path. That will work."
I mean as long as you stay within the SVG with your selectors it will work.
circle:hover, path:hover {
fill: red;
}

how to change svg fill color when used as base-64 background image data?

I'm using SVG for a project, loaded in css like this:
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2238px%22%20viewBox%3D%220%200%2022%2038%22%20enable-background%3D%22new%200%200%2022%2038%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.style0%7Bfill%3A%09%23f47216%3B%7D%3C/style%3E%3Cpath%20d%3D%22M2.643%2038c-0.64%200-1.282-0.231-1.79-0.699c-1.074-0.988-1.143-2.661-0.154-3.735l13.13-14.258L0.664%204.4%20c-0.967-1.094-0.865-2.765%200.229-3.732s2.765-0.864%203.7%200.229L19.37%2017.592c0.898%201%200.9%202.545-0.035%203.542L4.588%2037.1%20C4.067%2037.7%203.4%2038%202.6%2038z%22%20class%3D%22style0%22/%3E%3C/svg%3E');
I have some hover states to highlight by changing the fill color of the arrow.
For now, I'm simply applying the same svg data with the fill portion (fill%3A%09%23f47216%3B%7D%3C where f47216 is the color) changed with the right/new color. Works pretty well. Though, I'd like to know if there's maybe some other smarter method.

Use filter property of CSS.
For me I wanted to change the color of the icon to white on Hover:
filter: grayscale(1) brightness(2);

Or if you want to do it dynamically try :
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

Base64 for that would be:
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOgkjZjQ3MjE2O308L3N0eWxlPjxwYXRoIGQ9Ik0yLjY0MyAzOGMtMC42NCAwLTEuMjgyLTAuMjMxLTEuNzktMC42OTljLTEuMDc0LTAuOTg4LTEuMTQzLTIuNjYxLTAuMTU0LTMuNzM1bDEzLjEzLTE0LjI1OEwwLjY2NCA0LjQgYy0wLjk2Ny0xLjA5NC0wLjg2NS0yLjc2NSAwLjIyOS0zLjczMnMyLjc2NS0wLjg2NCAzLjcgMC4yMjlMMTkuMzcgMTcuNTkyYzAuODk4IDEgMC45IDIuNTQ1LTAuMDM1IDMuNTQyTDQuNTg4IDM3LjEgQzQuMDY3IDM3LjcgMy40IDM4IDIuNiAzOHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=');
using a tool like http://www.base64encode.org/
This doesn't answer your question directly, but it does let us do the following. We can now test to see if:
.icon:hover .style0 {
fill: red;
}
will work, or use
.icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOgkjZjQ3MjE2O308L3N0eWxlPjxwYXRoIGQ9Ik0yLjY0MyAzOGMtMC42NCAwLTEuMjgyLTAuMjMxLTEuNzktMC42OTljLTEuMDc0LTAuOTg4LTEuMTQzLTIuNjYxLTAuMTU0LTMuNzM1bDEzLjEzLTE0LjI1OEwwLjY2NCA0LjQgYy0wLjk2Ny0xLjA5NC0wLjg2NS0yLjc2NSAwLjIyOS0zLjczMnMyLjc2NS0wLjg2NCAzLjcgMC4yMjlMMTkuMzcgMTcuNTkyYzAuODk4IDEgMC45IDIuNTQ1LTAuMDM1IDMuNTQyTDQuNTg4IDM3LjEgQzQuMDY3IDM3LjcgMy40IDM4IDIuNiAzOHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=');
height: 40px;
width: 40px;
}
.icon:hover {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOglyZWQ7fTwvc3R5bGU+PHBhdGggZD0iTTIuNjQzIDM4Yy0wLjY0IDAtMS4yODItMC4yMzEtMS43OS0wLjY5OWMtMS4wNzQtMC45ODgtMS4xNDMtMi42NjEtMC4xNTQtMy43MzVsMTMuMTMtMTQuMjU4TDAuNjY0IDQuNCBjLTAuOTY3LTEuMDk0LTAuODY1LTIuNzY1IDAuMjI5LTMuNzMyczIuNzY1LTAuODY0IDMuNyAwLjIyOUwxOS4zNyAxNy41OTJjMC44OTggMSAwLjkgMi41NDUtMC4wMzUgMy41NDJMNC41ODggMzcuMSBDNC4wNjcgMzcuNyAzLjQgMzggMi42IDM4eiIgY2xhc3M9InN0eWxlMCIvPjwvc3ZnPg==');
}
which seems inefficient to me because we are forced to replicate a lot of the same information for the hover when all we want to change is the color.
working example

I want to post an answer to my own question. No exactly an answer, since it doesn't imply svg as background and base64, but it's my current alternative way, much more effective if you just need mono-color icons: just use svg as css mask, and change background color. Then you can also apply transitions on mouse events. I mean something like this:
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" xml:space="preserve"><path d="M11.432 9.512a.636.636 0 0 1 0 .918L2.12 19.742a.636.636 0 0 1-.458.201.637.637 0 0 1-.46-.201l-1-.998C.068 18.609 0 18.459 0 18.285s.068-.329.199-.461l7.854-7.852L.199 2.118A.638.638 0 0 1 0 1.66c0-.174.068-.327.199-.46l1-.998A.634.634 0 0 1 1.66 0c.172 0 .325.068.458.201l9.314 9.311z"/></svg>');
mask-size: auto 12px;
mask-repeat: no-repeat;
transition: background-color 200ms;
background-color: #ff0000;
Please see this fiddle for come more code and demo:
https://jsfiddle.net/o25beLqj/
Also note a couple of things:
mask-image does not have base64 code inside. It's just preceeded by data:image/svg+xml;utf8,
mask css properties are quite about the same of css background properties, take a look to docs, and you'll see you can do really a lot and they can substitute background images in a variety of use cases

Resources