22

I have a SVG ilustration embeded in an HTML5 file which works in all modern browsers when I try it on local, but when I try to serve them from the web I dont get Chrome to render the SVG image, it only renders the SVG source code. I already added this lines to an .htaccess file which solved the issues in Safari and Firefox:

AddType image/svg+xml svg
AddType image/svg+xml svgz
AddEncoding x-gzip .svgz

But Chrome now is the only browser that doesn't render the image when comes from the web. My local file works fine even in Chrome.

What am I missing?

Here is the link to the sample of the issue, try it on Safari and Firefox, it will work. But in Chrome the story is different.

EDIT: Link was broken and seems to be missing www. prefix: http://www.getformgallery.com/demo/gos-form.html

Jarvix
  • 86
  • 7
user661987
  • 221
  • 1
  • 2
  • 4
  • What it is the problem with Chrome? It seems to be working for me. – kgiannakakis Mar 16 '11 at 07:10
  • Works for me, too (Chrome 10.0). – Mike Baranczak Mar 21 '11 at 00:58
  • For me too, but Firefox won't show those up and down markers. Use only SVG for those cases - easy and more powerful. – Alex Jan 12 '12 at 16:23
  • Are you using an `SVG` or an `SVGZ`? The link is broken so I can't view it. If it is an `SVGZ` file then refer to this question, http://graphicdesign.stackexchange.com/questions/24797/when-should-i-use-svg-or-svgz-for-my-web-graphics. – Josh Powell Nov 24 '13 at 02:38

6 Answers6

12

I have the same problem. Before some Chrome updates the svg I used in my site works but from certain Chrome updates those svg didn't worked and the page won't load either, just loads for 1-2s and then redirected to Aw, snap.

Finally I figure it out. You have to define "width" and "height" in Object tag eg. 

<object height="100%" width="100%"data="images/image.svg" type="image/svg+xml"></object>
Niraj Shakya
  • 145
  • 1
  • 5
  • 1
    I had some SVG icons in a menu where only 2 of 12 were loading in Chrome 55 on Android, but desktop was fine. I was using tags, so my fix was to add `img { height: 100%, width: 100% }` to my .css file. Then all renered fine. What I figured out was the 2 SVG files that did load had defined their own height and width as pixel dimensions. The files that would not render used 100% height/width and relied on the viewbox for sizing. – vim_commando Mar 07 '17 at 20:24
  • I am rendering rtf files in html using rtf.js. Some images load fine others did not. I found that the ones that did not render were image tags inside svg tags. I noticed that the width & height of the image tag itself was 0. So @vim_commando's comment helped me to fix it. I added the following css and fixed it right up. `svg.rtfpict svg image { height: 100%; width: 100%; }` – tolsen64 Nov 18 '18 at 23:14
  • For whatever reason `width="100%" height="100%"` didn't work for me, but it worked when I changed the height to `height="auto"`. – Joe B. Dec 03 '18 at 18:16
1

Did you export the SVG from Photoshop using an extension like SVG Hero? If so, did you export a smart object? I had the same problem, but fixed it by saving the SVG from Illustrator instead. Now my SVG works in all browsers.

rjtkoh
  • 201
  • 3
  • 11
0

If you run lighttpd, you may have to add the svg mime type to configuration file:

mimetype.assign             = (
  ".svg"          =>      "image/svg+xml"
)

and set the style directly into the <img> tag (i.e. <img style="width:100%" src="picture.svg">).

Scrooge McDuck
  • 372
  • 2
  • 14
0

I am using Google Chrome 18 and the sample-page renders fine for me, even after going to the SVG image directly. The problem might be solved by the browser-makers.

Jarvix
  • 86
  • 7
-1

SVG files are supported in chrome but are not supported fully. You might have some issue sometimes. Try this link to get help to your answer.

http://upload.wikimedia.org/wikipedia/commons/f/f6/Western_Australia_Local_Government_Areas.svg

fredtantini
  • 15,966
  • 8
  • 49
  • 55
vicky
  • 101
  • 2
  • 3
-2

Chrome, Firefox, Opera, Safari and all other modern browsers (with the exception of IE) support SVG natively without the need for plugins. so you get plugin First and try do access

user3209468
  • 11
  • 2