XMLNS W3 URL for SVG spec now throwing error in Chrome XMLNS W3 URL for SVG spec now throwing error in Chrome xml xml

XMLNS W3 URL for SVG spec now throwing error in Chrome


I had a similar issues. For cross-browser support several filter lines were added in the CSS.

It seemed to be caused by the SVG filter being the last in line. By moving it up before other filter lines Chrome used another filter and the error disapeared.

.gray-out {    -webkit-filter: grayscale(100%);    filter: grayscale(100%);    filter: gray;    filter: url("data:image/svg+xml;utf8,<svg>...</svg>");/* Move this line up */}


This issue was occurring for me on Chrome Version 59.0.3071.115 (Official Build) (64-bit)

It is working after I made the change based on previous answer

@media only screen and (min-width: 820px) {            .brand-slider img {                filter: grayscale(100%);                -webkit-filter: grayscale(100%);                -moz-filter: grayscale(100%);                -ms-filter: grayscale(100%);                -o-filter: grayscale(100%);                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */             transition: all 1000ms ease 0s;            }        }

Changed code is

@media only screen and (min-width: 820px) {        .brand-slider img {            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */            filter: grayscale(100%);            -webkit-filter: grayscale(100%);            -moz-filter: grayscale(100%);            -ms-filter: grayscale(100%);            -o-filter: grayscale(100%);         transition: all 1000ms ease 0s;        }    }


This might help someone who's not using an SVG filter but is still receiving a similar error message.

Unsafe attempt to load URL data:image/svg+xml;utf8...

I'm guessing that least Chrome and Firefox are using SVG filters under the hood even when you have defined just CSS filter rule.

So in my case problem was a filter under incorrectly formatted CSS nesting selector which happened because I was switching from SASS style nesting to CSS spec style nesting. The spec requires you to start each nested selector with &.