SVG not displaying in Chrome browser

A simple solution for a situation when a SVG fails to display in Google Chrome but works in other browsers.

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) and has become quite popular in recent years.

A common problem for web developers inserting SVG’s within <img> tags on web pages is that the graphic will display in all common browsers (Mozilla Firefox, Microsoft Edge, Opera, Apple Safari) except Google Chrome.

There is an easy fix for this where it occurs.

Because SVG’s are written in code, they can be opened in a plain-text editor such as Notepad. Simply locate this piece of code :

xlink:href="data:img/png;base64,

and change it to:

xlink:href="data:image/png;base64,

Voila! The SVG should now display in Google Chrome as well as the other major browsers.

Have Your Say

Δ