SVGs not displaying Chrome

Question

I am trying to figure out why my SVG icons are not displaying in Chrome. I am calling the svg with a standard <image src=... />, and I am able to see the image in dev tools (dev tools) and by visiting the direct path. I am also able to see the svgs in any other browser.

I've tried:

Saving the svg in Illustrator with "Embed" instead of "Link" : Chrome not rendering SVG referenced via <img> tag
Explicitly registering SVG mime type
Using Rails' <%= image_tag %> ERB helper
Using SVG export settings suggested by Adobe: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Here is my view:

<a class="collapsed accordion-box">
  <div class="panel-heading">
    <img class="collapse-bullet" src="<%= asset_path 'blue-right-bullet.svg' %>"/>
  </div>
</a>

Edit:

Found that other random SVGs show up fine:

This one is working: https://goo.gl/Hcs7Sx (white on white)
This one does not: https://goo.gl/WGkY3r

Both are called with <img src="..."/> via the <%= image_tag %> helper

Try to use an absolute path in your source, and see how that works — Holger Will, Sep 25 '15 at 03:09
Well these SVGs display fine in Chrome as standaklone SVGs. So you are probably going to have to make a sample fiddle or page that shows the problem. — Paul LeBeau, Sep 25 '15 at 05:35
As a last ditch effort, try this https://github.com/jamesmartin/inline_svg I have however been able to get SVGs to also render as the background image via CSS using `image-url`. — Michael De Silva, Sep 26 '15 at 03:45
I had the same problem. How did you export your svg? Initially I used Photoshop but when I tried exporting the same svg in Illustrator, then it worked. — sammiepls, Sep 23 '18 at 13:07
@sammiepls Yep! its been two years, but IFRC exporting I ended up redrawing this asset myself in Ai and it worked. — dimitry_n, Sep 23 '18 at 16:11

SVGs not displaying Chrome

Edit:

0 Answers0