0

Currently have following code with an image source with an svg extension, works fine in Chrome and Firefox, image does not appear in Safari, even with the "onerror" added:

 <li><img src="/assets/ResnateThickerSquare.svg", onerror="/assets/ResnateLiHome.png", onclick="home()", id="homeSquare"></li>

Assumed this was because of the svg extension, tried following advice from this stackoverflow question (Do I use <img>, <object>, or <embed> for SVG files?) and rewrote the code as follows:

<li><object data="/assets/ResnateThickerHome.png" type="image/svg+xml", onclick="home()" , id="homeSquare"><img src="/assets/ResnateLiHome.png"></object></li>

Again, it worked in Chrome + Firefox, but not Safari. Should I be eschewing img and object for an svg tag as per this question: Svg with image inside is not showing in safari (I was under the impression that the tag was reserved for svg polygons and not imgs?)?

Community
  • 1
  • 1
Amir
  • 281
  • 5
  • 15
  • Is your server sending down the file with the correct MIME type (`image/svg+xml`)? Also, your `object` code doesn't actually point at an SVG file, but rather a PNG - is that a typo? Your onerror doesn't look right either. It's a javascript event handler, so should be more like `onerror="this.onerror=null; this.src='image.png'"`. See http://css-tricks.com/using-svg/ – Olly Hodgson Mar 19 '14 at 10:04
  • Sorry, that's just a typo. And I realised in my actual code the extension was .png.svg, that was what was causing the confusion in Safari (weird that it worked in other browsers, though). Thanks for the link, think I had a look at that before for the image bit but hadn't read the onerror segment. – Amir Mar 19 '14 at 11:21

2 Answers2

0

Refer this link to check ur safari ver meet the requiremant of svg

http://caniuse.com/svg

i found this on stackoverflow if ur browser support still error try this

<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>
Arjun Chaudhary
  • 2,373
  • 2
  • 19
  • 36
  • Yeah, I checked that link before, I'm on Safari 7.0 so there shouldn't be a problem, was wondering if the reason the error came about was because it's an img with an svg as a src as opposed to a "pure" svg. – Amir Mar 19 '14 at 05:29
  • The svg code you posted for the rectangle works fine in Safari, so I'm confused why the img+svg isn't working. – Amir Mar 19 '14 at 05:32
0

Error was down to having .png.svg as the file extension, changed it to .svg and now it appears in Safari.

Amir
  • 281
  • 5
  • 15