SVG display difference between >

Question

What's the difference between displaying a SVG image in an <img> or <object> tag? I was facing some problems using SVG images in a <img> tag on Android 3.1:

The shape in the upper example is an <img> tag and the lowest example is the exact same image but display in an <object>. Why is this displayed a different way? And is an <object> cached like an <img>?

What do you guys suggest?

Answer 1

Differences when SVG is used as an image (html <img> SVG <image> or CSS background images)

• no scripting
• no interactivity
• no external dependencies (complete in a single file)
• no DOM (i.e. no script access into them from outside)
• can be copied into canvas via drawImage

I suspect you're suffering from the no external dependencies rule. You may also want to check that the SVG data has a preserveAspectRatio attribute on the root element and if it does that the value of that attribute is not none.