{"id":3290,"date":"2024-07-30T10:15:04","date_gmt":"2024-07-30T15:15:04","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3290"},"modified":"2024-07-30T10:15:05","modified_gmt":"2024-07-30T15:15:05","slug":"svg-triangle-of-compromise","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/svg-triangle-of-compromise\/","title":{"rendered":"SVG triangle of compromise"},"content":{"rendered":"\n

I enjoyed Micah R Ledbetter’s SVG triangle of compromise<\/a> and generally think it’s a fair analysis of how any-which-way you use SVG on a page, you’re giving up some kind of nice ability it could have. For instance, if you use SVG through an <img><\/code> tag, it’s cached nicely, but you give up on CSS reaching in there to style things. If you drop it in as <svg><\/code>, you can style, but then it’s not cached well for repeated uses. <\/p>\n\n\n\n

Then Scott Jehl chimed in<\/a> with a way to “have it all”. The crux of it is using the SVG <use><\/code> element to reference an SVG file (so you get caching and sizing) and you can set CSS --custom-properties<\/code> that “pierce” the shadow DOM that <use><\/code> creates (that’s right, SVG can have a shadow DOM just like web components) and allow for styling. <\/p>\n\n\n\n

This does solve all three angles, the caveats being 1) you can’t cache the SVG (“sprite”, it’s usually called when you combine icons into a single file) on a different domain. 2) it’s a manual pain to set up SVGs to be entirely styled in this way. Scott’s tool<\/a> might help with 2, but browsers need to help with 1. <\/p>\n","protected":false},"excerpt":{"rendered":"

I enjoyed Micah R Ledbetter’s SVG triangle of compromise and generally think it’s a fair analysis of how any-which-way you use SVG on a page, you’re giving up some kind of nice ability it could have. For instance, if you use SVG through an <img> tag, it’s cached nicely, but you give up on CSS […]<\/p>\n","protected":false},"author":1,"featured_media":3292,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,70,91],"class_list":["post-3290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-performance","tag-svg"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-30-at-7.18.42%E2%80%AFAM.png?fit=994%2C786&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=3290"}],"version-history":[{"count":1,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3290\/revisions"}],"predecessor-version":[{"id":3291,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3290\/revisions\/3291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/3292"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=3290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=3290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=3290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}