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.

Comments

  1. User Avatar
    Jesse Braddock
    Permalink to comment#

    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.?

    • User Avatar
      John Moore
      Permalink to comment#

      I’m not sure if it has exactly what you’re looking for, but try http://caniuse.com/

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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:

      Method of displaying basic Vector Graphics features using the embed or object elements. Refers to the SVG 1.1 spec.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag