Did Chrome 72 Break 'Data:Image/Svg+Xml;Utf8' for CSS Background Svgs

Did Chrome 72 break 'data:image/svg+xml;utf8' for css background svgs?

It is not valid for data URIs to contain # characters like yours has, you must escape them as %23.

Chrome 71 and earlier version are supporting # in URIs but not after 72 they don't.

SVG data image not working as a background-image in a pseudo element

The # character in a URL is reserved to indicate the start of a fragment identifier.

You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23

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.

Is there a way to use SVG as content in a pseudo element ::before or ::after

Yes you can! Just tested this and it works great, this is awesome!

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

Or if you prefer to put the SVG directly in the CSS:

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E ");
  width: 200px;
  height: 200px;
}

<div id="test"></div>

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'.

Filters on SVG objects not being applied when they are drawn to canvas in Firefox

~~There might be some character that doesn't pass well into the blob.~~
_{(as pointed out by Robert Longson, its actually an FF bug, but there were other issues reported with this method anyway)}

The solution, is to replace the [string to blob to blobURI] into [encodedString to dataURI] :

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="223" height="223">' +  '<defs>' +  '<filter id="f1" x="0" y="0">' +  '<feGaussianBlur in="SourceGraphic" stdDeviation="5" />' +  '</filter>' +  '</defs>' +  '<rect class="shape" x="0" y="0" width="100" height="150" transform="translate(40,15) rotate(15,50,75)" fill="#006791" filter="url(#f1)"></rect></svg>';
// first encode the special charactersvar svg_data = encodeURIComponent(data);// create a dataURI versionvar url = 'data:image/svg+xml; charset=utf8, ' + svg_data;
var img = new Image();img.onload = function() {  ctx.drawImage(img, 0, 0, 223, 223);}
img.src = url;

<canvas id="canvas" style="border:2px solid black;" width="223" height="223"></canvas>

Firefox does not correctly process a svg image, but it does Chrome

For Firefox, it is necessary to indicate not only the width, but also the height of the image

<img style="width:100%; height:100%"

Try opening the SVG file in a text editor and delete the line preserveAspectRatio="none"

The none attribute stretches the image to the full width of the parent container without maintaining proportions

preserveAspectRatio

Update

Thank you very much to @enxaneta for this comment:

You are using a very strange liniar gradient just to fill the text
with a solid color.

It helped to find a solution.

As it turned out, if one of the two colors is black, then the vector editors: Figma, Sketch write a linear gradient with only one
attribute stop-color instead of two

<linearGradient id="linearGradient858">
       <stop offset="0" id="stop856" style="stop-color:#c00000;stop-opacity:1"/> 
</linearGradient>

Chrome processes this form of writing the gradient, butFirefox does not understand it because it more strictly complies with the requirements of the SVG specification

Gradients are used to style text, so there is such a difference in rendering text.

I used the SVG-EDITOR code optimizer, that's what happened in
the end

Note

It is necessary to add * .svg files to the optimizer

We remove the gradients, add text as a separate line using the usual
text decoration attributes

<text x="74.96" y="62.37" id="text3785" style="font-size:50;font-weight:bold; fill:crimson">PONENTES </text>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="93" width="350" height="93" viewBox="0 0 350 93" version="1.1" id="svg74">  <metadata id="metadata78"/>  <title id="title45">    block1m-dn  </title>  <desc id="desc47">    Created with Sketch.  </desc>  <defs id="defs51">    <!-- <linearGradient id="linearGradient858"> -->      <!-- <stop offset="0" id="stop856" style="stop-color:#c00000;stop-opacity:1"/> -->    <!-- </linearGradient> -->    <circle id="path-1" cx="30" cy="30" r="30"/>    <path d="m102.3 31h-3.36V13.98h3.36zm6.84-6.79V31h-3.19V19.19h3.1v1.46c0.72-1.22 2.14-1.78 3.41-1.78 2.93 0 4.27 2.09 4.27 4.68V31h-3.19v-6.89c0-1.32-0.65-2.35-2.18-2.35-1.39 0-2.21 1.08-2.21 2.45zm22.08-10.58v15.24c0 0.79 0.05 1.66 0.1 2.14h-3.05c-0.05-0.24-0.12-0.82-0.12-1.37-0.53 0.94-1.73 1.66-3.31 1.66-3.36 0-5.76-2.64-5.76-6.22 0-3.46 2.33-6.17 5.66-6.17 2.04 0 3 0.84 3.34 1.46v-6.74zm-8.93 11.45c0 2.11 1.25 3.36 2.93 3.36 1.63 0 2.9-1.25 2.9-3.38 0-2.11-1.27-3.29-2.9-3.29-1.63 0-2.93 1.2-2.93 3.31zM137.78 31H134.68V13.62h3.14v6.86c0.53-0.84 1.82-1.61 3.58-1.61 3.46 0 5.45 2.66 5.45 6.17 0 3.58-2.21 6.24-5.57 6.24-1.63 0-2.88-0.72-3.5-1.73zm5.88-5.93c0-2.16-1.3-3.34-2.93-3.34-1.61 0-2.95 1.18-2.95 3.34 0 2.14 1.34 3.36 2.95 3.36 1.63 0 2.93-1.2 2.93-3.36zm12.91-5.93v3.22c-0.36-0.07-0.67-0.1-0.96-0.1-1.63 0-3.05 0.79-3.05 3.34V31h-3.19V19.19h3.1v1.75c0.72-1.56 2.35-1.85 3.36-1.85 0.26 0 0.5 0.02 0.74 0.05zM166.53 31c-0.05-0.24-0.1-0.79-0.1-1.27-0.65 1.1-2.02 1.58-3.26 1.58-2.86 0-4.49-2.09-4.49-4.66v-7.46h3.19v6.82c0 1.32 0.67 2.38 2.16 2.38 1.42 0 2.23-0.96 2.23-2.33v-6.86h3.19v9.67c0 0.91 0.07 1.73 0.12 2.14zm17.54-17.38v15.24c0 0.79 0.05 1.66 0.1 2.14H181.12C181.07 30.76 181 30.18 181 29.63c-0.53 0.94-1.73 1.66-3.31 1.66-3.36 0-5.76-2.64-5.76-6.22 0-3.46 2.33-6.17 5.66-6.17 2.04 0 3 0.84 3.34 1.46v-6.74zm-8.93 11.45c0 2.11 1.25 3.36 2.93 3.36 1.63 0 2.9-1.25 2.9-3.38 0-2.11-1.27-3.29-2.9-3.29-1.63 0-2.93 1.2-2.93 3.31z" id="path-3"/>    <linearGradient xlink:href="#linearGradient858" id="linearGradient3613" gradientUnits="userSpaceOnUse" gradientTransform="translate(10)" x1="78.92" y1="44.38" x2="323.81" y2="44.38"/>  </defs>  <g id="Page-1" fill="none">    <g id="block1m-dn">      <g id="Text-Copy" transform="translate(97,7)"/>      <g id="Group-Copy" transform="translate(20,7)" fill="#fff">        <g id="Oval" style="fill:#fff;stroke-width:4;stroke:#818388">          <g id="g971">            <circle r="30" cy="38" cx="20" id="circle55" fill="#fff"/>          </g>        </g>        <g id="Artboard-17@4x-Clipped" fill="#fff">          <mask id="mask-2" fill="white">            <use xlink:href="#path-1" id="use58" x="0" y="0" width="100" height="100"/>          </mask>          <g id="g61" fill="#fff"/>          <g id="g968"/>        </g>      </g>    </g>  <!--  <text xml:space="preserve" x="84.96" y="62.37" id="text3785" style="-inkscape-font-specification:'Bahnschrift, Bold';fill:url(#linearGradient3613);font-family:Bahnschrift;font-feature-settings:normal;font-size:50.67;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:bold;letter-spacing:0;line-height:1.25;text-align:start;text-anchor:start;word-spacing:0;writing-mode:lr-tb">      <tspan id="tspan850" x="84.96" y="62.37" fill="url(#linearGradient3613)">        PONENTES      </tspan>    </text> -->   <!-- Add text --> <text  x="74.96" y="62.37" id="text3785" style="font-size:50;font-weight:bold; fill:crimson">PONENTES </text>     <image y="19.55" x="16.95" id="image847" xlink:href="data:image/png;base64,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 " preserveAspectRatio="none" height="46.17" width="46.17" fill="#c83737"/>    <path d="M35.48 76.58C17.38 73.68 5.48 57 8.71 39.11 10.56 28.91 18.04 19.63 27.63 15.66c4.29-1.78 7.35-2.36 12.39-2.35 5.52 0.01 8.84 0.73 13.42 2.9 3.96 1.87 6.48 3.7 9.49 6.86 3.93 4.12 6.3 8.24 7.87 13.64 0.66 2.26 0.74 3.25 0.73 8.41-0.02 5.4-0.08 6.07-0.9 8.7C67.21 64.96 58.91 72.91 47.5 75.99 45.56 76.51 37.51 76.91 35.48 76.58ZM46.94 72.23C55.43 70.06 62.73 63.7 66.04 55.58 72.65 39.35 62.86 21.11 45.55 17.43c-1.64-0.35-3.52-0.44-6.67-0.34-3.79 0.13-4.81 0.29-7.47 1.16-4.6 1.51-7.74 3.48-11.37 7.16-3.42 3.46-5.28 6.39-6.63 10.46-2.6 7.8-1.71 16.66 2.33 23.32 4.53 7.47 11.82 12.36 20.39 13.68 2.7 0.42 7.82 0.11 10.81-0.66z" id="path862" style="fill:none;stroke-width:0.32"/>  </g></svg>

svg with inline css to image data uri

#markdown-preview doesn't occur as an id of any element of your svg - or of the posted html for that matter. This means it won't render as you expect as original svg (see second attached image below).
Probably the html originally surrounding the div does contain an element with that id.
Quick fix: give the outer group in the svg the markdown-preview id: replace </style><g><g class="output"> with </style><g id="markdown-preview"><g class="output"> (see attached and HTML snippet image below)
Permanent fix: file an issue with the software that rendered the svg.

results

I've uncommented the parent.removeChild(svgElement); in your code so I could see both the img (first in each) and the original svg (second).

Fixed:

Fixed HTML

The original HTML:

Original HTML

The code I used to reproduce 'fixed'

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <script type="text/javascript" defer>            var svgToDataUri = function(svgElement){
                    console.log("converting svg to datauri");
                    // Create canvas for converting image to data URL                    var image = document.createElement("img");                    var parent = svgElement.parentElement;                    image.style.width = svgElement.width + "px";                    image.style.height = svgElement.height + "px";
                    // get svg data                    var xml = new XMLSerializer().serializeToString(svgElement);
                    // make it base64                    var svg64 = btoa(xml);                    var image64 = 'data:image/svg+xml;base64,' + svg64;
                    // Get data URL encoding of image                    image.setAttribute("src", image64);                    parent.insertBefore(image, svgElement);                    // parent.removeChild(svgElement);                };
        </script>
    </head>    <body>
        <div class="mermaid" data-processed="true"><svg id="mermaidChart1" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 1112 268" style="max-width:1112px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */        #mermaidChart1 .node { fill:#ffa; stroke:#666; stroke-width:3px; }        #mermaidChart1 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }        #mermaidChart1 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }        #mermaidChart1 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: transparent; }        #markdown-preview .mermaid .label { color: rgb(51, 51, 51); }        #markdown-preview .node rect, #markdown-preview .node circle, #markdown-preview .node polygon { fill: rgb(238, 238, 238); stroke: rgb(51, 51, 51); stroke-width: 1px; }        #markdown-preview .edgePath .path { stroke: rgb(51, 51, 51); }        #markdown-preview .cluster rect { fill: rgb(255, 255, 222) !important; rx: 4px !important; stroke: rgb(170, 170, 51) !important; stroke-width: 1px !important; }        #markdown-preview .cluster text { fill: rgb(51, 51, 51); }        #markdown-preview text { font-family: 'Roboto Slab', verdana, arial; font-size: 14px; }        /*  */        </style><g id="markdown-preview"><g class="output"><g class="clusters"><g class="cluster" id="subGraph2" transform="translate(969,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph2</div></foreignObject></g></g><rect width="206" height="208" x="-103" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Effects</text></g><g class="cluster" id="subGraph1" transform="translate(581.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-48,-12)"><foreignObject width="96" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph1</div></foreignObject></g></g><rect width="469" height="208" x="-234.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Combat Scenario</text></g><g class="cluster" id="subGraph0" transform="translate(158.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph0</div></foreignObject></g></g><rect width="277" height="208" x="-138.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Weapon & Target</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M257,77L297,77L322,77L347,77L403.9148936170213,102" marker-end="url(#arrowhead125)" style="fill:none"></path><defs><marker id="arrowhead125" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M272,171L297,171L322,171L347,171L403.9148936170213,146" marker-end="url(#arrowhead126)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead126" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,102L561,77L595,77" marker-end="url(#arrowhead127)" style="fill:none"></path><defs><marker id="arrowhead127" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,146L561,171L586,171" marker-end="url(#arrowhead128)" style="fill:none"></path><defs><marker id="arrowhead128" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M782,77L816,77L841,77L866,77L891,77" marker-end="url(#arrowhead129)" style="fill:none"></path><defs><marker id="arrowhead129" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M791,171L816,171L841,171L866,171L908.5,171" marker-end="url(#arrowhead130)" style="fill:none"></path><defs><marker id="arrowhead130" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="Damage" transform="translate(688.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-93.5" y="-22" width="187" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-83.5,-12)"><foreignObject width="167" height="24"><div style="display: inline-block; white-space: nowrap;">DamageCalculator</div></foreignObject></g></g></g><g class="node" id="Output" transform="translate(969,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-78" y="-22" width="156" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-68,-12)"><foreignObject width="136" height="24"><div style="display: inline-block; white-space: nowrap;">Bonus Damage</div></foreignObject></g></g></g><g class="node" id="Visual" transform="translate(688.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-102.5" y="-22" width="205" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-92.5,-12)"><foreignObject width="185" height="24"><div style="display: inline-block; white-space: nowrap;">VisualEffectHandler</div></foreignObject></g></g></g><g class="node" id="Output2" transform="translate(969,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-60.5" y="-22" width="121" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-50.5,-12)"><foreignObject width="101" height="24"><div style="display: inline-block; white-space: nowrap;">Set On Fire</div></foreignObject></g></g></g><g class="node" id="CombatHandler" transform="translate(454,124)" style="opacity: 1;"><rect rx="5" ry="5" x="-82" y="-22" width="164" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-72,-12)"><foreignObject width="144" height="24"><div style="display: inline-block; white-space: nowrap;">CombatHandler</div></foreignObject></g></g></g><g class="node" id="Tags" transform="translate(158.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-98.5" y="-22" width="197" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-88.5,-12)"><foreignObject width="177" height="24"><div style="display: inline-block; white-space: nowrap;">silver, magic, sharp</div>                         

							       


       Related Topics
          
              How to Use CSS3: :Selection Without Changing The Default Color and Background Color
 Force Last Div on a New Line with Flexbox
 How to Style Radio Button or Checkbox Inside a Bootstrap Table
 Vertically Center Div When Body Height: 100% Without Absolute Pos
 Square Responsive Divs Using Bootstrap 4
 CSS Selector If Exist Adjacent Sibling
 CSS a Href Styling
 Add Scrollbar on Dropdown Menu Options
 CSS and Images on Master Page
 Implementing @Font-Face as of Late 2012
 Webkit-Font-Smoothing: Suddenly Different Results in Chrome and Safari
 Shiny Dashboadpage Lock Dashboardheader on Top
 Stop Div Resizing Parent Div Using CSS
 Abstraction Away from CSS
 How to Make a Blinking Image in CSS3
 Set Size to Responsive Iframe in Bootstrap
 Line Breaks When Using CSS "Display:Inline"
 CSS Col Visibility:Collapse Does Not Work on Chrome


				

						
                                                

						
						
							Leave a reply
							
								
								
								
								


								Submit