<use><\/code><\/a><\/strong><\/td>✅<\/td> | 🙁<\/td> | ✅<\/td> | 🙁<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Let\u2019s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can\u2019t use any graphic editor\u2009\u2014\u2009they need to be generated at runtime\u2009\u2014\u2009so you have to solve it with CSS or within the SVG syntax. Your first question might be: Is there anything like stroke-style: double in […]<\/p>\n","protected":false},"author":274059,"featured_media":338491,"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":"Here's @marianabeldi comparing seven ways to add a double border to SVG shapes \u2014 yes, seven!","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[794,862,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svg-shapes-double-border.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":342448,"url":"https:\/\/css-tricks.com\/how-to-create-css-charts-with-interesting-shapes-glyphs-and-emoji\/","url_meta":{"origin":338478,"position":0},"title":"How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji","date":"June 21, 2021","format":false,"excerpt":"Let\u2019s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is to give the charts a shapely makeover \ud83e\ude84 I\u2019ll show\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/chart-shapes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":172432,"url":"https:\/\/css-tricks.com\/cascading-svg-fill-color\/","url_meta":{"origin":338478,"position":1},"title":"Cascading SVG Fill Color","date":"June 11, 2014","format":false,"excerpt":"One time someone told me their biggest problem with SVG icons is that they didn't match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG icons they were sticking with icon fonts. I didn't think\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334309,"url":"https:\/\/css-tricks.com\/three-ways-to-blob-with-css-and-svg\/","url_meta":{"origin":338478,"position":2},"title":"Three Ways to Blob with CSS and SVG","date":"February 19, 2021","format":false,"excerpt":"Blobs are the smooth, random, jelly-like shapes that have a whimsical quality and are just plain fun. They can be used as illustration elements and background effects on the web. So, how are they made? Just crack open an illustration app and go for it, right? Sure, that\u2019s cool. But\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/blobs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323780,"url":"https:\/\/css-tricks.com\/creating-css-shapes-with-emoji\/","url_meta":{"origin":338478,"position":3},"title":"Creating CSS Shapes with Emoji","date":"October 23, 2020","format":false,"excerpt":"CSS Shapes is a standard that lets us create geometric shapes over floated elements that cause the inline contents \u2014 usually text \u2014 around those elements to wrap along the specified shapes. Such a shaped flow of text looks good in editorial designs or designs that work with text-heavy contents\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/css-shape-emoji.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":251404,"url":"https:\/\/css-tricks.com\/preparing-exporting-svg-icons-sketch\/","url_meta":{"origin":338478,"position":4},"title":"Preparing and Exporting SVG Icons in Sketch","date":"February 11, 2017","format":false,"excerpt":"There is an interesting gotcha about the fill-rule attribute of SVG, detailed here by Anthony Collurafici. Fill-Rule is an SVG property that basically defines how to determine what shapes are filled or subtracted from the shape. The default SVG value is \"nonzero\", and this is what Android requires. Unfortunately, Sketch\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243783,"url":"https:\/\/css-tricks.com\/high-performance-svgs\/","url_meta":{"origin":338478,"position":5},"title":"High Performance SVGs","date":"August 1, 2016","format":false,"excerpt":"I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/338478"}],"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\/274059"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=338478"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/338478\/revisions"}],"predecessor-version":[{"id":339050,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/338478\/revisions\/339050"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/338491"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=338478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=338478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=338478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} |