picking up a copy of Practical SVG<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"📹 by Glen Maddern: I don’t think most front-end developers are as comfortable as SVG as they should be. It’s one of the most powerful technologies available on the web. He makes a very strong case for inline SVG, which I wholeheartedly agree with. This screen from the video does a nice job of that: […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":249249,"url":"https:\/\/css-tricks.com\/presentation-attributes-vs-inline-styles\/","url_meta":{"origin":249008,"position":0},"title":"Presentation Attributes vs Inline Styles","date":"December 23, 2016","format":false,"excerpt":"This is a distinction worth knowing about. They look pretty similar. They can do some of the same things. But, one is very easy to override and the other is not. Inline styles are likely a bit more familiar: Inline styles on an HTML element. SVG can do that too:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/12\/overrides.png?fit=929%2C612&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":285846,"url":"https:\/\/css-tricks.com\/inline-svg-cached\/","url_meta":{"origin":249008,"position":1},"title":"Inline SVG… Cached","date":"April 12, 2019","format":false,"excerpt":"I wrote that using inline icons make for the best icon system. I still think that's true. It's the easiest possible way to drop an icon onto a page. No network request, perfectly styleable. But inlining code has some drawbacks, one of which is that it doesn't take advantage\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/svg-xlink.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":287092,"url":"https:\/\/css-tricks.com\/change-color-of-svg-on-hover\/","url_meta":{"origin":249008,"position":2},"title":"Change Color of SVG on Hover","date":"May 13, 2019","format":false,"excerpt":"There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions \u2014 :hover, :active, :focus, class name change, etc. \u2014 is different. Let's look at the ways. Inline SVG Inline SVG is my favorite way to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/avg-hover-color.gif?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":279882,"url":"https:\/\/css-tricks.com\/accessible-svg-icons-with-inline-sprites\/","url_meta":{"origin":249008,"position":3},"title":"Accessible SVG Icons With Inline Sprites","date":"December 7, 2018","format":false,"excerpt":"This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example: Menu Notes: It's not the itself that is interactive \u2014 it's wrapped in a for that. The .svg-icon class has some nice trickery, like em-based sizing to match the size of the text\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/menu-button.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":237165,"url":"https:\/\/css-tricks.com\/svg-funsville-links\/","url_meta":{"origin":249008,"position":4},"title":"Some Pretty Splendid SVG Links","date":"January 22, 2016","format":false,"excerpt":"I'm always running across wonderful SVG stuff. Demos, tutorials, tools, art... some of the best timeless resources end up in our SVG compendium. Some I think are best suited to posts like this! Some of these are pretty new. Some of them are not, but I found them useful recently\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":199370,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-svg-fallbacks\/","url_meta":{"origin":249008,"position":5},"title":"A Complete Guide to SVG Fallbacks","date":"May 4, 2015","format":false,"excerpt":"If you're using SVG and are worried about unsupported environments, this is the guide for you. There is no single solution, since how you use SVG dictates the fallback.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249008"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"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=249008"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249008\/revisions"}],"predecessor-version":[{"id":249054,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249008\/revisions\/249054"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=249008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=249008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=249008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/12\/inline-is-best.png?ssl=1\")
<\/figure>\n