{"id":179172,"date":"2014-08-15T06:44:27","date_gmt":"2014-08-15T13:44:27","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=179172"},"modified":"2015-10-27T08:28:07","modified_gmt":"2015-10-27T15:28:07","slug":"08-using-svg-iframeobjectembed","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/svg\/08-using-svg-iframeobjectembed\/","title":{"rendered":"08: Using SVG: iframe\/object\/embed"},"content":{"rendered":"<p>Forgive me if I&#8217;m a bit down on these methods. I&#8217;ve never come across a use case where they are definitely the way to go. There was a time when <code>&lt;object&gt;<\/code> was the only way to use SVG, but those days are over.<\/p>\n<p data-height=\"761\" style=\"height: 761px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"AmEdC\" data-default-tab=\"result\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/AmEdC\/\" rel=\"noopener\">AmEdC<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>One of the reasons to have done it this way in the past (rather than use <code>&lt;img&gt;<\/code>) 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Forgive me if I&#8217;m a bit down on these methods. I&#8217;ve never come across a use case where they are definitely the way to go. There was a time when &lt;object&gt; was the only way to use SVG, but those days are over. See the Pen AmEdC by Chris Coyier (@chriscoyier) on CodePen. One of [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":177022,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":189560,"url":"https:\/\/css-tricks.com\/lodge\/svg\/32-svg-filters-svg-html-elements\/","url_meta":{"origin":179172,"position":0},"title":"32: SVG Filters on SVG and HTML Elements","date":"November 30, 2014","format":false,"excerpt":"Perhaps you've heard of CSS filters? You can apply them do any element from CSS, like: .apply-css-filter { -webkit-filter: grayscale(0.5); filter: grayscale(0.5); } You can even apply that to a HTML element or an SVG element. But there is also filters you can define within SVG, and there are more\u2026","rel":"","context":"In \"svg filters\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178569,"url":"https:\/\/css-tricks.com\/lodge\/svg\/05-using-svg-svg-img\/","url_meta":{"origin":179172,"position":1},"title":"05: Using SVG &#8211; SVG as img","date":"August 11, 2014","format":false,"excerpt":"Using SVG can be incredibly simple: Yep! See the Pen 7d5d25d7a93f10035b9b19c6f4fce516 by Chris Coyier (@chriscoyier) on CodePen.","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":179169,"url":"https:\/\/css-tricks.com\/lodge\/svg\/07-using-svg-inline-svg\/","url_meta":{"origin":179172,"position":2},"title":"07:  Using SVG &#8211; Inline SVG","date":"August 15, 2014","format":false,"excerpt":"Perhaps the best way to use SVG is \"Inline SVG\" - that is, putting SVG code right into your HTML. It works great! See the Pen gpcDi by Chris Coyier (@chriscoyier) on CodePen. A lot of this series will be about all the great stuff you can do using inline\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":180863,"url":"https:\/\/css-tricks.com\/lodge\/svg\/09-svg-data-uris\/","url_meta":{"origin":179172,"position":3},"title":"09: SVG with Data URIs","date":"August 27, 2014","format":false,"excerpt":"We've covered \"inline SVG\" - which is dropping the SVG syntax right into HTML. You can use that same inline SVG in other places as well, like in an or background-image. It's pretty weird. It's like: You drop the entire SVG syntax in there where you see the start there.\u2026","rel":"","context":"With 20 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":187516,"url":"https:\/\/css-tricks.com\/lodge\/svg\/29-svg-text\/","url_meta":{"origin":179172,"position":4},"title":"29: SVG Text","date":"November 4, 2014","format":false,"excerpt":"There is a element in SVG. No big surprise here: it's for putting text into the SVG. Not outlines of shapes of letters (although you can do that too) but actual normal web text. Selectable, SEO-friendly, accessible, normal ol' web text. The fonts you have access to are the same\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":189034,"url":"https:\/\/css-tricks.com\/lodge\/svg\/31-can-put-raster-images-svg\/","url_meta":{"origin":179172,"position":5},"title":"31: You Can Put Raster Images in SVG","date":"November 30, 2014","format":false,"excerpt":"There probably isn't a tremendously huge use-case for this, other than the obvious: you need a raster graphic amongst other things in a larger SVG design. That way it moves and scales with the rest of the elements. The syntax is: You'd probably never drop a raster graphic in an\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/179172"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=179172"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/179172\/revisions"}],"predecessor-version":[{"id":179175,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/179172\/revisions\/179175"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177022"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=179172"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=179172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}