Chrome not rendering SVG referenced via img tag

Question

I am having issues  with google chrome not rendering svg with an img tag   This happens when refreshing the page and initial page load   I can get the image to show up by  Inspecting Element  then right clicking the svg file and opening the svg file in a new tab   The svg image will then be rendered on the original page    lt img src     images Aged-Brass svg  gt    Totally at loss here as to what the issue is   The svg image renders fine in IE9 and FF just not in Chrome or Safari   I have my MIME types set as well    image svg xml   EDIT  Here is a simple html page that I built to help illustrate my issue    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt SVG Test lt  title gt        lt style gt           BackgroundImage              background  url     images Aged-Brass svg   no-repeat scroll left top              width  400px              height  600px                      ImageTag              width  400px              height  600px              margin  0px              padding  0px                 lt  style gt   lt  head gt   lt body gt       lt div id  ImageTag  gt           lt img src     images Aged-Brass svg  gt       lt  div gt       lt div id  BackgroundImage  gt  lt  div gt   lt  body gt   lt  html gt    As you can see I am trying to use an svg file in both an img tag and in css as a background image   Neither work on the initial page load in chrome or safari   When I inspect element right click svg or click link to svg load in another window the svg file will render in original tab

User · Answer

Just replace  lt img gt  tag to  lt object gt  tag for SVG image    lt object data  quot assets twitter-wrap svg quot  type  quot image svg xml quot  gt  lt  object gt

User · Answer

looks like a Chrome bug  i did something else as i almost got crazy because of this    using Chrom debugger if you change the css of the svg object it shows on the screen   so what i did was  1  check for screen size 2  listen to the  load  event of my SVG object 3  when the element is loaded i change its css using jQuery 4  it did the trick for me   x000D   x000D  if  jQuery window  width    lt  769    x000D   x000D    jQuery  object mysvg-logo   0  addEventListener  load   function     x000D         jQuery  object mysvg-logo   css  width   181px    x000D       true   x000D   x000D    x000D  width  180px  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt object id  mysvg-logo  type  image svg xml  data  my svg logo url here  gt Your browser does not support SVG lt  object gt  x000D   x000D   x000D

User · Answer

Content type in the HTTP header from the server was the problem for me  I have a node js server  added   if  pageName substring pageName lastIndexOf            svg        res writeHead 200     Content-Type    image svg xml          pageName is my local variable for what is requested   My guess is this is a common problem  Am using the current version of Chrome  Mar 2020

User · Answer

In my case this problem persisted when I created and saved the svg using Photoshop   What helped  was opening the file using Illustrator and exporting the svg afterwards

User · Answer

Use  lt object gt  instead  of course  replace each URL with your own     x000D   x000D   BackgroundImage   x000D          background  url  https   upload wikimedia org wikipedia commons b bd Test svg   no-repeat scroll left top  x000D          width  400px  x000D          height  600px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D       lt title gt SVG Test lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt div id  ObjectTag  gt  x000D           lt object type  image svg xml  data  https   upload wikimedia org wikipedia commons b bd Test svg  width  400  height  600  gt  x000D            Your browser does not support SVG  x000D           lt  object gt  x000D       lt  div gt  x000D       lt div class  BackgroundImage  gt  lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I make sure that I add the Style of the Image  It worked for me  style   width 320  height 240

User · Answer

I also got the same issue with chrome  after adding DOCTYPE it works as expected   lt  DOCTYPE svg PUBLIC  -  W3C  DTD SVG 1 1  EN   http   www w3 org Graphics SVG 1 1 DTD svg11 dtd  gt    Before       lt  xml version  1 0  encoding  iso-8859-1   gt   lt svg version  1 1  id  Capa 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  x  0px  y  0px       width  792px  height  792px  viewBox  0 0 792 792  style  enable-background new 0 0 792 792   xml space  preserve  gt       lt g fill  none  stroke  black  stroke-width  15  gt                                 lt  g gt   lt  svg gt    After       lt  xml version  1 0  encoding  iso-8859-1   gt   lt  DOCTYPE svg PUBLIC  -  W3C  DTD SVG 1 1  EN   http   www w3 org Graphics SVG 1 1 DTD svg11 dtd  gt   lt svg version  1 1  id  Capa 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  x  0px  y  0px       width  792px  height  792px  viewBox  0 0 792 792  style  enable-background new 0 0 792 792   xml space  preserve  gt       lt g fill  none  stroke  black  stroke-width  15  gt                                 lt  g gt   lt  svg gt

User · Answer

The svg-tag needs the namespace attribute xmlns    lt svg xmlns  http   www w3 org 2000 svg  gt  lt  svg gt

User · Answer

For me setting width   height to the img worked   lt asp Image runat  quot server quot  ID  quot Icon quot  Style  quot max-width  50px  max-height  50px  position  relative  quot    gt

User · Answer

A simple and easy way  according to  https   css-tricks com forums topic svg-css-background-image-not-showing-in-chrome  You have to open the  SVG file with a text editor  like notepad  and change   xlink href  data img png base64    to   xlink href  data image png base64    it worked for me

User · Answer

Had the same problem  If server is configured correctly and  htacces is not the answer  might want to look the svg source you are embedding  Mine were created with text editor  rendered well on Chrome amp Safari inside html5 code  once embedded  nothing was visible  Added correct version  dimensions etc to the svg code and works like a charm  Also  all styles inline   Ie   lt svg version  1 1  baseProfile  full  width  24  height  24  xmlns  http   www w3 org 2000 svg  gt      lt rect x  0  y  0  rx  2  ry  2  width  24  height  24  style  fill  fbc800 width 24px height 24px      gt     lt  svg gt

User · Answer

On problems try to open the images first with a program that is capable to read svg-images  If that fails  then the svg-image is somehow corrupted     I had that case and copied the svg-paths in a new svg-image and adjusted all details of the svg-tags   I never tested the reason that it was not rendering but suppose that some invisible special signs caused the render-error  Getting sometimes files edited on Mac I had this issue in other context already

User · Answer

I exported my svg from Photoshop CC initially and had to manually add   version  1 1  into the  lt svg gt  tag   to get it showing on chrome

User · Answer

i came here because i had the same problem  when i inspect the element i can see the file  but on the site i can t  even when using localhost   the answer to my problem was in saving the SVG file  If you saved it from illustrator make sure to click  embed  and not  link   as link will just refer to your local files rather than include the data  If i understand it correctly     I read about it on the adobe website which has some other useful tips for exporting http   www adobe com inspire 2013 09 exporting-svg-illustrator html  This worked for me  hope it was useful

User · Answer

I was having the same issue with an SVG image included via the IMG tag  It turned out for me that Chrome didn t like there being a blank line directly at the top of the file   I removed the blank line and my SVG immediately started rendering

User · Answer

Lighttpd My problem was that was missing a mime handler for svg files in lighttpd configuration file  Adding these to your lighttpd conf could solve your problem  mimetype assign                    quot  pdf quot             gt        quot application pdf quot      quot  sig quot             gt        quot application pgp-signature quot      quot  spl quot             gt        quot application futuresplash quot      quot  class quot           gt        quot application octet-stream quot      quot  ps quot              gt        quot application postscript quot      quot  torrent quot         gt        quot application x-bittorrent quot      quot  dvi quot             gt        quot application x-dvi quot      quot  gz quot              gt        quot application x-gzip quot      quot  pac quot             gt        quot application x-ns-proxy-autoconfig quot      quot  swf quot             gt        quot application x-shockwave-flash quot      quot  tar gz quot          gt        quot application x-tgz quot      quot  tgz quot             gt        quot application x-tgz quot      quot  tar quot             gt        quot application x-tar quot      quot  zip quot             gt        quot application zip quot      quot  mp3 quot             gt        quot audio mpeg quot      quot  m3u quot             gt        quot audio x-mpegurl quot      quot  wma quot             gt        quot audio x-ms-wma quot      quot  wax quot             gt        quot audio x-ms-wax quot      quot  ogg quot             gt        quot application ogg quot      quot  wav quot             gt        quot audio x-wav quot      quot  gif quot             gt        quot image gif quot      quot  jpg quot             gt        quot image jpeg quot      quot  jpeg quot            gt        quot image jpeg quot      quot  png quot             gt        quot image png quot      quot  svg quot             gt        quot image svg xml quot      quot  xbm quot             gt        quot image x-xbitmap quot      quot  xpm quot             gt        quot image x-xpixmap quot      quot  xwd quot             gt        quot image x-xwindowdump quot      quot  css quot             gt        quot text css quot      quot  html quot            gt        quot text html quot      quot  htm quot             gt        quot text html quot      quot  js quot              gt        quot text javascript quot      quot  asc quot             gt        quot text plain quot      quot  c quot               gt        quot text plain quot      quot  cpp quot             gt        quot text plain quot      quot  log quot             gt        quot text plain quot      quot  conf quot            gt        quot text plain quot      quot  text quot            gt        quot text plain quot      quot  txt quot             gt        quot text plain quot      quot  spec quot            gt        quot text plain quot      quot  dtd quot             gt        quot text xml quot      quot  xml quot             gt        quot text xml quot      quot  mpeg quot            gt        quot video mpeg quot      quot  mpg quot             gt        quot video mpeg quot      quot  mov quot             gt        quot video quicktime quot      quot  qt quot              gt        quot video quicktime quot      quot  avi quot             gt        quot video x-msvideo quot      quot  asf quot             gt        quot video x-ms-asf quot      quot  asx quot             gt        quot video x-ms-asf quot      quot  wmv quot             gt        quot video x-ms-wmv quot      quot  bz2 quot             gt        quot application x-bzip quot      quot  tbz quot             gt        quot application x-bzip-compressed-tar quot      quot  tar bz2 quot         gt        quot application x-bzip-compressed-tar quot      quot  odt quot             gt        quot application vnd oasis opendocument text quot       quot  ods quot             gt        quot application vnd oasis opendocument spreadsheet quot       quot  odp quot             gt        quot application vnd oasis opendocument presentation quot       quot  odg quot             gt        quot application vnd oasis opendocument graphics quot       quot  odc quot             gt        quot application vnd oasis opendocument chart quot       quot  odf quot             gt        quot application vnd oasis opendocument formula quot       quot  odi quot             gt        quot application vnd oasis opendocument image quot       quot  odm quot             gt        quot application vnd oasis opendocument text-master quot       quot  ott quot             gt        quot application vnd oasis opendocument text-template quot      quot  ots quot             gt        quot application vnd oasis opendocument spreadsheet-template quot      quot  otp quot             gt        quot application vnd oasis opendocument presentation-template quot      quot  otg quot             gt        quot application vnd oasis opendocument graphics-template quot      quot  otc quot             gt        quot application vnd oasis opendocument chart-template quot      quot  otf quot             gt        quot application vnd oasis opendocument formula-template quot      quot  oti quot             gt        quot application vnd oasis opendocument image-template quot      quot  oth quot             gt        quot application vnd oasis opendocument text-web quot      make the default mime type application octet-stream     quot  quot                 gt        quot application octet-stream quot      References Alternative of AddType in lighthttpd

User · Answer

Adding the width attribute to the  svg  tag  by editing the svg source XML  worked for me  eg    lt  -- This didn t render -- gt   lt svg version  1 1  baseProfile  full  xmlns  http   www w3 org 2000 svg  gt         lt  svg gt    lt  -- This did -- gt   lt svg version  1 1  baseProfile  full  width  1000  xmlns  http   www w3 org 2000 svg  gt         lt  svg gt

User · Answer

svg image does not have it s initial height and width  Therefore it is not visible  You have to set it   You can do either in-line or in css file   In-line    lt img src     images Aged-Brass svg  class  image  alt  logo  style  width  100px  height  50px   gt    Css file    lt img src     images Aged-Brass svg  class  image  alt  logo  gt     image       width  100px      height  50px

User · Answer

I had a similar problem and the existing answers to this either weren t applicable  or worked but we couldn t use them for other reasons  So I had to figure out what Chrome disliked about our SVGs   In our case in turned out to be that the id attribute of the symbol tag in the SVG file had a   in it  which Chrome didn t like  Soon as I removed the   it worked fine   Bad    lt svg     xmlns  http   www w3 org 2000 svg      xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 72 72  gt       lt defs gt           lt symbol id  ThisIDHasAColon AndChromeDoesNotLikeIt  gt                       lt  symbol gt       lt  defs gt       lt use                      xlink href   ThisIDHasAColon AndChromeDoesNotLikeIt        gt   lt  svg gt    Good    lt svg     xmlns  http   www w3 org 2000 svg      xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 72 72  gt       lt defs gt           lt symbol id  NoMoreColon  gt                       lt  symbol gt       lt  defs gt       lt use                      xlink href   NoMoreColon        gt   lt  svg gt

User · Answer

I was able to use your sample to create a test page  and it worked just fine  My assumption is that there is something wrong with your svg file  Can you paste that here as well  Here is the sample I used      lt svg width  100  height  100  xmlns  http   www w3 org 2000 svg  gt      lt  -- Created with SVG-edit - http   svg-edit googlecode com  -- gt      lt g gt         lt title gt Layer 1 lt  title gt         lt ellipse ry  30  rx  30  id  svg 1  cy  50  cx  50  stroke-width  5  stroke   000000  fill   FF0000   gt      lt  g gt    lt  svg gt

User · Answer

Be careful that you don t have transition css property for you svg images   I don t now why  but if you make   transition  all ease 0 3s  for svg image on Chrome the images do not appear   e g          transition  all ease 0 3s        Chrome do not render svg    Remove any transition css property and try again

User · Answer

I came here because I had a similar problem  the image was not being rendered  What I found out was that the content type header of my testing server wasn t correct  I fixed it by adding the following to my  htaccess file   AddType image svg xml svg svgz AddEncoding gzip svgz

[google-chrome] Chrome not rendering SVG referenced via <img> tag

Examples related to google-chrome

Examples related to svg