Skip to content

SVG not displaying in Chrome browser

G31st August 2020

CNo Comments

Tbrowser, SVG

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.

   

Comments:

No comments have yet been submitted. Be the first!

Have your say:

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.