{"id":177022,"date":"2014-07-30T16:08:51","date_gmt":"2014-07-30T23:08:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=177022"},"modified":"2014-07-30T16:13:59","modified_gmt":"2014-07-30T23:13:59","slug":"svg","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/svg\/","title":{"rendered":"Everything You Need To Know About SVG"},"content":{"rendered":"<p>Using SVG can be very simple, but if you start digging in, there is <em>a lot<\/em> to know about SVG. In this series you&#8217;re going to learn why SVG is such an important part of building websites. From why SVG is useful and how to get your hands on it all the way to implementing it as a system and fancy stuff like animating it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using SVG can be very simple, but if you start digging in, there is a lot to know about SVG. In this series you&#8217;re going to learn why SVG is such an important part of building websites. From why SVG is useful and how to get your hands on it all the way to implementing [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":17923,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-lodge-group.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":177022,"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":177022,"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":177022,"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":177022,"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":177022,"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":177022,"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\/177022"}],"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=177022"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177022\/revisions"}],"predecessor-version":[{"id":177026,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177022\/revisions\/177026"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17923"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=177022"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=177022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}