Xmlns W3 Url for Svg Spec Now Throwing Error in Chrome

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 */
}

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.

Why doesn't my SVG data URL inside HTML inside an SVG data url show in Chrome?

You need to encode special characters, I don't know exactly which one was the culprit, but when using encodeURIComponent on the whole <CSSImage url>, then encoding again the whole markup to pass it in the <img>, everything works fine in Chrome.

<div>Standalone:</div>

<svg xmlns="http://www.w3.org/2000/svg" width="75" height="50" style="position:relative"><circle cx="25" cy="25" r="25" fill="red" /><foreignObject style="width: 100%; height: 100%"><html xmlns="http://www.w3.org/1999/xhtml"><style>.x {position: absolute;background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'100'%20height%3D'50'%3E%3Ccircle%20cx%3D'50'%20cy%3D'25'%20r%3D'25'%20fill%3D'blue'%2F%3E%3C%2Fsvg%3E"); width: 100%; height: 100%;}</style><div class="x"></div></html></foreignObject></svg>

<div>As image source:</div>

<img style="position:relative" src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2275%22%20height%3D%2250%22%20style%3D%22position%3Arelative%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2225%22%20fill%3D%22red%22%20%2F%3E%3CforeignObject%20style%3D%22width%3A%20100%25%3B%20height%3A%20100%25%22%3E%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%3Cstyle%3E.x%20%7Bposition%3A%20absolute%3Bbackground%3A%20url(%22data%3Aimage%2Fsvg%2Bxml%3Butf8%2C%253Csvg%2520xmlns%253D'http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg'%2520width%253D'100'%2520height%253D'50'%253E%253Ccircle%2520cx%253D'50'%2520cy%253D'25'%2520r%253D'25'%2520fill%253D'blue'%252F%253E%253C%252Fsvg%253E%22)%3B%20width%3A%20100%25%3B%20height%3A%20100%25%3B%7D%3C%2Fstyle%3E%3Cdiv%20class%3D%22x%22%3E%3C%2Fdiv%3E%3C%2Fhtml%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E">

SVG Text does not render in Chrome or Safari

Use a path instead of the circle:

<svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <!--<circle id="CS1_01-intro" cx="32" cy="32" r="25" fill="rgba(0,0,0,.3)"/>-->

  

  <path id="CS1_01-intro"  d="M57,32A25,25 0 0 1 7,32  A25,25,0 0 1 57,32z" />

    <text class="spinner-text spinner-text__casestudy" font-size="16" fill="black">

        <textPath xlink:href="#CS1_01-intro">Longform  case  study</textPath>

    </text>

</svg>

Adding filter feGaussianBlur to SVG circle is disappeared on Safari, on Chrome

I was able to manage this problem and I think this is not exactly SVG issue.

So I had to have different filter for each circle on Safari.
To render each filter properly while global filter worked for different browsers.

{circles.map((circle, index) => {
  return (
    <div key={`circle-${index}`}>
      <filter
        id={`circle-${index}`}
        filterRes="1200"
        colorInterpolationFilters="sRGB"
        x="-50%"
        y="-50%"
        width="200%"
        height="200%"
      >
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
      </filter>
      <circle
        r={baseBubbleR}
        style={{
        filter: skillType === 'soft' ? 'url(#soft)' : '',
        fill: circleColor
      />
     </div>
   )
 })

Above code is just example.

Firefox throwing error while reading #hex color codes inside inline SVG

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

You need to URL encode the # as %23.

It's a Chrome bug that it does not enforce this rule or indeed parse URLs correctly.

File Url Cross Domain Issue in Chrome- Unexpected

You are hitting the cross domain/file security limitations of Chrome.

You can, disable this by following the instructions in Disable same origin policy in Chrome and details in How can access and the origin policy in chrome as I'm not using a server on how to start Chrome with these turned off.

A word of warning, though: they are called "security limitations" for a reason so do not go applying this when browsing 3rd party sites. This is extremely dangerous to turn off whilst browsing the web normally. For example, with this turned off I can now make requests on your behalf to sites like gmail.com, facebook.com and yourbank.com, and your cookies will be set allowing me to masquerade as yourself.

If you still really need this, you need to run chrome with the --disable-web-security flag:

chrome --disable-web-security # unix/linux only

If you need cross OS instructions on how to apply the flag, see http://www.chromium.org/developers/how-tos/run-chromium-with-flags.

Xmlns W3 Url for Svg Spec Now Throwing Error in Chrome