Embedded Background Svg Doesn't Display on Firefox If It Has a "Fill" Attribute

Embedded background svg doesn't display on Firefox if it has a fill attribute

You should escape "#" character to "%23" because "#" is hash character in URL string.

http://jsfiddle.net/dmen16me/

url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="7px"><g><g><polygon points="8.433,-0.06 4.985,3.325 1.539,-0.06 -0.066,1.546 4.985,6.566 10.037,1.546" fill="%2361B23B"/></g></g></svg>');

But I think using base64 is better too.

SVG Fill not being applied in FireFox

If the behavior was unique to Firefox prior to version 56, it was because #menu-bag refers to a <symbol> element.

The specs say that a re-used <symbol> should be implemented as if it were replaced by a nested <svg>. Firefox used to treat this literally in their shadow DOM. The shadow DOM isn't visible in your DOM inspector, but it is subject to CSS selectors.

Which means that this code:

<a href="#" class="skip-link">
    <svg class="icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"></use>
    </svg>
</a>

WAs implemented like this:

<a href="#" class="skip-link">
    <svg class="icon">  
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag">
          <!--Start of shadow DOM boundary-->
          <svg><!-- replacement for <symbol> -->
             <!-- graphics content -->
          </svg>
          <!--End of shadow DOM boundary-->
        </use>
    </svg>
</a>

The svg.icon matches your .skip-link .icon rule (and as Kyle Mitt points out, that rule will always take precedence over your a:hover svg rule). This value is also inherited by the <use> element.

However, the shadow-DOM <svg> doesn't get the inherited value, because it is styled directly with the svg rule. When you change your selector to .skip-link svg, or when you trigger the a:hover svg rule, then the hidden inner element gets the style directly applied because that SVG is also a descendent of the link.

As Robert Longson noted in the comments, this is not how it is supposed to work. It's a side effect of the way that Firefox implemented <use> elements as complete cloned DOM trees, which just happened to be hidden from your DOM inspector.

Here's a "working" example of your original problem. Which is to say, on Chrome, Safari, Opera, Firefox 56+ or IE you will see a green circle that isn't altered when you hover it, but on Firefox prior to version 56 you will see a blue circle that turns red on hover/focus.

svg {    fill: navy;}a:hover svg, a:focus svg {    fill: red;}.skip-link .icon {    fill: green;}.icon {    height: 50;    width: 50;}

 <a href="#" class="skip-link">        <svg class="icon">            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag" />        </svg></a><svg height="0" width="0">    <symbol id="menu-bag" viewBox="-10 -10 20 20">        <circle r="10" />    </symbol></svg>

Firefox displays SVG as black

content-security-policy: style-src 'none';

is blocking all style sources, including inline sources like <style> elements. You need to set the value 'unsafe-inline'.

How to modify the fill color of an SVG image when being served as background image?

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.

SVG filter only working when added in style attribute (Firefox)

I included the svg as a base64 string directly into the css file.
This solved my problem.

filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)

ng-bind-html in a svg text tag do not display tspan in firefox and IE

Robert was right.

Here is my solution.
The secret was to use createElementNS. so that, The browser understand that it is a svg element and not a html element.

Here is the directive

app.directive('multilinesvgtext',  function () {
    var xmlns = "http://www.w3.org/2000/svg";
    var myLink = function (scope, elem, attrs) {

        attrs.$observe('contenu', function (val) {
            var data = val;

            var generateTSpan = function (lineOftext) {
                var tspanElement = document.createElementNS(xmlns, 'tspan');
                tspanElement.setAttribute('x', attrs.x);
                tspanElement.setAttribute('dy', attrs.dy);
                tspanElement.setAttribute('class', attrs.class);
                tspanElement.setAttribute('xml:space', 'preserve');
                var tspanContent = document.createTextNode(lineOftext);
                tspanElement.appendChild(tspanContent);
                return tspanElement;
            };
            // We delete the old children
            while (elem[0].firstChild) {
                elem[0].removeChild(elem[0].firstChild);
            }
            var lines = data.split('\n');
            for(var i= 0; i < lines.length; i++)
            {
                var textContent = lines[i]!=='' ? lines[i] : ' ';
                var newTspanElement = generateTSpan(textContent);
                elem[0].appendChild(newTspanElement);
            }
        });
    };
    return {
        restrict: 'A',
        link: myLink
    };
 }
);

Which can be uses like that :


<text multilinesvgtext  x="30" y="168" fill="#FFFFFF" data-dy="13" class="myclass" data-contenu="{{mydata}}"></text>

My directive add tspan children for each line of text in mydata and use data-dy attribute as dy attribute for this tspan.

What is wrong with one of 3 SVG images that fill does not work on it?

That's because in the user icon you have <circle> and <path> elements that don't have any fill. In fact, the color that you should be changing is the stroke instead. If you add the following rule, then your user icon will show the desired hover state.

To avoid the circle and path styles from interfering with your other two icons, give the first SVG element a class, e.g. user-icon:

svg.user-icon:hover circle,
svg.user-icon:hover path {
  stroke: red;
}

See proof-of-concept example:

svg {  width: 70px;  height: 70px;}svg:hover {  fill: red !important;}svg.user-icon:hover circle,svg.user-icon:hover path {  stroke: red;}
body {  display: grid;  height: 100vh;  margin: 0;  place-items: center center;}

<div>  <svg class="user-icon" id="6a8da56c-64cb-4c0d-b7e3-2b80c0db2d07" data-name="ICON" xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><circle id="3ad8aabf-2066-47d6-9a2f-c027e5c19606" data-name="<Pfad>" cx="96" cy="63.91" r="36.09" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><path id="243fad7b-53d4-4daa-93b6-31f40d832ead" data-name="<Pfad>" d="M156,164.1c-6.48-43.88-33.17-64.23-59.64-64.23S42.49,120.21,36,164.09" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><rect width="192" height="192" fill="none"/></svg>    <svg width="24" height="24" viewBox="0 0 24 24">    <path d="M11.5,22C11.64,22 11.77,22 11.9,21.96C12.55,21.82 13.09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M18,10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 17.85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z"></path></svg>    <svg width="24" height="24" viewBox="0 0 24 24">    <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg>    </div>

Embedded Background Svg Doesn't Display on Firefox If It Has a "Fill" Attribute