Forgive me if I’m a bit down on these methods. I’ve never come across a use case where they are definitely the way to go. There was a time when <object> was the only way to use SVG, but those days are over.
See the Pen AmEdC by Chris Coyier (@chriscoyier) on CodePen.
One of the reasons to have done it this way in the past (rather than use <img>) was that the SVG retained interactivity, like hovers and animations. Browsers are starting to make that work with SVG-as-img though, as I write this.
The embed and object placed SVG do not appear in Chrome 38 but they do appear in Safari 8.
Is there a cheatsheet or quick reference anywhere on what browsers support animation, interactivity, etc. for inline vs embed vs background, etc.?
I’m not sure if it has exactly what you’re looking for, but try http://caniuse.com/
Yeah I’m seeing object/embed not working in Chrome here either. Which is weiiiiird because I can’t really see anything wrong with the SVG or code and I’m pretty sure Chrome is fine with those. If you download the .zip of that Pen and open it locally it works. Even at a file:// URL, so it’s not a cross-domain problem. Maybe it’s something weird about the sandboxed iframes CodePen users or the Content Security Policy we use or something.
The “basic support” section of Can I Use that John linked to should reference object/embed support:
Hey im trying these but i want the SVG to be in an a href. I tried adding it with all three ways and when i hover over the svg, any hover effect i have, do not apply on it. Any tips on that?