{"id":199370,"date":"2015-05-04T11:10:08","date_gmt":"2015-05-04T18:10:08","guid":{"rendered":"http:\/\/css-tricks.com\/?p=199370"},"modified":"2020-12-28T15:30:30","modified_gmt":"2020-12-28T23:30:30","slug":"a-complete-guide-to-svg-fallbacks","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-complete-guide-to-svg-fallbacks\/","title":{"rendered":"A Complete Guide to SVG Fallbacks"},"content":{"rendered":"\n<p>Here at CSS-Tricks, there&#8217;s a lot of information telling you <a href=\"https:\/\/css-tricks.com\/using-svg\/\">how<\/a> <a href=\"https:\/\/css-tricks.com\/mega-list-svg-information\/\">wonderful<\/a> <a href=\"https:\/\/css-tricks.com\/svg-sprites-use-better-icon-fonts\/\">SVG<\/a> <a href=\"https:\/\/css-tricks.com\/svg-symbol-good-choice-icons\/\">is<\/a>. And as much as we want to convince you that <a href=\"https:\/\/css-tricks.com\/video-screencasts\/137-svg-is-for-everybody\/\">SVG is for Everybody<\/a>, SVG isn&#8217;t as widely used as we would like. In fact, some people still (literally) don&#8217;t get SVG.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Maybe they are stuck on an office computer that hasn&#8217;t been updated since the IT guy quit six years ago, maybe they&#8217;re using a second-hand refurbished phone they can&#8217;t afford to upgrade, or maybe they just don&#8217;t understand or don&#8217;t care about updating to a new browser. Whatever the reason, approximately 5% of users browsing the web are doing so with web browsers that can&#8217;t display SVG \u2014 more in the USA (according to <a href=\"http:\/\/caniuse.com\/#search=svg\" rel=\"noopener\">caniuse data<\/a>).<\/p>\n\n\n\n<p>Some tech-oriented web sites (like this one) can afford to say that they only support modern web browsers. But for most sites, you can&#8217;t ignore 1 in 20 potential customers. If you want to give the 95% of users on modern browsers all the benefits of SVG, but still provide a functional experience for the others, you need a fallback plan.<\/p>\n\n\n\n<p class=\"explanation\">The guide is written by <a href=\"https:\/\/twitter.com\/AmeliasBrain\" rel=\"noopener\">Amelia Bellamy-Royds<\/a> and me, Chris Coyier. Amelia and I presented at the same conference together. We both covered SVG, yet neither of us SVG fallbacks comprehensively. It&#8217;s such a huge topic, after all. While I&#8217;ve covered <a href=\"https:\/\/css-tricks.com\/svg-fallbacks\/\">SVG fallbacks<\/a> before, it&#8217;s been a few years and we figured we could do that subject better justice now. Here we go!<\/p>\n\n\n\n<details >\n  <summary>\n          <h3>What KIND of fallback do you need?<\/h3>\n      <\/summary>\n  \n\n<p>Before getting into the technical options for implementing fallbacks, it helps to stop and think of what <strong>kind<\/strong> of fallback you need:<\/p>\n\n\n\n<ul><li><strong>No fallback.<\/strong> If the SVG is an icon whose meaning is clearly expressed by a text label, you may be able to let that icon disappear without compromising the site&#8217;s functionality.<\/li><li><strong>Text fallback.<\/strong> If the SVG is an icon whose meaning <em>could<\/em> be expressed by a text label, maybe all you need is to ensure that alt text shows up in its place.<\/li><li><strong>Image fallback.<\/strong> This is what most people think of as an SVG fallback: a PNG or GIF image that represents the same graphic, just with a larger file size and poorer resolution.<\/li><li><strong>Interactive fallback.<\/strong> For replacing animated and interactive SVG, a PNG may not do justice. You&#8217;ll need a graphics language with an interactive DOM.<\/li><\/ul>\n\n\n\n<p>On the interactive front, your options are limited. You could <a href=\"http:\/\/svg2swf.sourceforge.net\/\" rel=\"noopener\">convert the SVG to Flash<\/a> and then rewrite all your interaction code in ActionScript. Or you could use <a href=\"http:\/\/raphaeljs.com\/\" rel=\"noopener\">Rapha\u00ebl<\/a> to both draw and manipulate the graphic. It provides a single JavaScript interface to both SVG and the VML vector graphics supported in Internet Explorer 6-8. Which means that Rapha\u00ebl doesn&#8217;t help with old mobile browsers, but it does cut down the number of unsupported users significantly.<\/p>\n\n\n\n<p>The rest of this post covers the ways to create text and image fallbacks for your SVG. Your options will depend almost entirely on how you&#8217;re including that SVG in the web page in the first place: as an embedded object, as inline SVG code, as an image in the HTML, or as an image in the CSS.<\/p>\n\n\n<\/details>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<details >\n  <summary>\n          <h3>Fallback for SVG as <code>&lt;img><\/code><\/h3>\n      <\/summary>\n  \n\n<p>SVG can be used like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img src=\"image.svg\" alt=\"\"><\/code><\/pre>\n\n\n\n<p>Here are some options for browsers that don&#8217;t support that.<\/p>\n\n\n\n<div class=\"wp-block-group ticss-2e71e089\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<details >\n  <summary>\n          How to Test for Support      <\/summary>\n  \n\n<p>Even though this test&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/www.w3.org\/TR\/SVG11\/feature#Image\" rel=\"noopener\">is supposed to test<\/a>&nbsp;for the&nbsp;<code>&lt;image&gt;<\/code>&nbsp;element within SVG, thanks to&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/test-support-svg-img\/\">some testing<\/a>&nbsp;we\u2019ve proven it works for SVG used as the source for&nbsp;<code>&lt;img&gt;<\/code>&nbsp;elements as well. It\u2019s&nbsp;<strong>this easy<\/strong>:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function svgasimg() {\n  return document.implementation.hasFeature(\"http:\/\/www.w3.org\/TR\/SVG11\/feature#Image\", \"1.1\");\n}<\/code><\/pre>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Source Swapping      <\/summary>\n  \n\n<p>The test above is what the&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/http:\/\/benhowdle.im\/svgeezy\/\" rel=\"noopener\">SVGeezy library<\/a>&nbsp;uses to do SVG-as-img fallbacks. If the browser fails this test, it will swap out the SVG with a PNG as needed. As in&nbsp;<code>&lt;img src=\"image.svg\"&gt;<\/code>&nbsp;turns to&nbsp;<code>&lt;img src=\"image.png\"&gt;<\/code>. You create the PNG versions yourself and have them available in the same directory.<\/p>\n\n\n\n<ul><li><strong>Advantages:<\/strong>&nbsp;It\u2019s easy. It works. You can even write your own source-swapping JavaScript pretty easily.<\/li><li><strong>Disadvantages:<\/strong>&nbsp;It\u2019s likely the non-supporting browsers will download two images, which is a performance penalty. It will download the SVG version (at least enough to know it can\u2019t use it) and then the PNG version.<\/li><\/ul>\n\n\n\n<p>Here\u2019s a very simple no-dependency example of source swapping:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_emoPVL\" src=\"\/\/codepen.io\/anon\/embed\/emoPVL?height=450&amp;theme-id=1&amp;slug-hash=emoPVL&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed emoPVL\" title=\"CodePen Embed emoPVL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/img-swapjs-IE6.png?resize=1024%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-324366\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/img-swapjs-IE6.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/img-swapjs-IE6.png?resize=300%2C225&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/img-swapjs-IE6.png?resize=768%2C576&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/img-swapjs-IE6.png?resize=1000%2C750&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Swapping in a fallback image, in Internet Explorer 6(!)<\/p>\n\n\n\n<p>If for some reason you couldn\u2019t get this into external JavaScript and had to do it inline\u2026<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img src=\"image.svg\" onerror=\"this.src='image.png'; this.onerror=null;\"><\/code><\/pre>\n\n\n\n<p>If you were doing feature detects with Modernizr and also utilizing jQuery on a project, it could be as simple as this:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">if (!Modernizr.svg) {\n  $(\"img[src$='.svg']\")\n    .attr(\"src\", fallback);\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/github.com\/iconic\/SVGInjector\" rel=\"noopener\">SVGInjector<\/a>&nbsp;is a JavaScript library that can help with&nbsp;<code>&lt;img&gt;<\/code>&nbsp;fallbacks in specific scenarios. It\u2019s main purpose is to replace&nbsp;<code>&lt;img&gt;<\/code>&nbsp;with inline SVG.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img class=\"inject-me\" src=\"image-one.svg\"><\/code><\/pre>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var mySVGsToInject = document.querySelectorAll('img.inject-me');\nvar injectorOptions = {\n  pngFallback: 'assets\/png'\n};\nSVGInjector(mySVGsToInject, injectorOptions);<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/dirkgroenen.github.io\/SVGMagic\/\" rel=\"noopener\">SVGMagic<\/a>&nbsp;is another JavaScript library that swaps out sources with PNG versions, including SVG used in&nbsp;<code>&lt;img&gt;<\/code>, background-image, or even inline. It\u2019s biggest advantage is that it creates the PNG version for you automatically, by request to a third-party server. So just beware the dependencies (jQuery and third-parties) and test for speed and reliability.<\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          The <code>&lt;picture><\/code> Element      <\/summary>\n  \n\n<p>The&nbsp;<code>&lt;picture&gt;<\/code>&nbsp;element allows for fallback images when the browser doesn\u2019t support a specified image format.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;picture>\n  &lt;source type=\"image\/svg+xml\" srcset=\"image.svg\">\n  &lt;img src=\"image.png\" alt=\"\">\n&lt;\/picture><\/code><\/pre>\n\n\n\n<p>Unfortunately that\u2019s not much use when support for SVG is much better than support for&nbsp;<code>&lt;picture&gt;<\/code>.<\/p>\n\n\n\n<p>You can polyfill the picture element though, with&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/scottjehl.github.io\/picturefill\/\" rel=\"noopener\">Picturefill<\/a>. Sara Soueidan&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/http:\/\/sarasoueidan.com\/blog\/svg-picture\/\" rel=\"noopener\">has an article that covers this<\/a>.<\/p>\n\n\n\n<ul><li><strong>Advantages:<\/strong>&nbsp;Not only can you get fallback images, you can specify&nbsp;<em>different<\/em>&nbsp;fallbacks at different media queries, as part of the picture syntax. Meaning differently sized fallbacks for different screens, art direction, etc.<\/li><li><strong>Disadvantages:<\/strong>&nbsp;Polyfill needed. To avoid double-downloads, you need to skip the src on the&nbsp;<code>&lt;img&gt;<\/code>&nbsp;within&nbsp;<code>&lt;picture&gt;<\/code>, which is invalid and means you\u2019ll need the polyfill forever.<\/li><\/ul>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          The <code>&lt;image><\/code> Trick      <\/summary>\n  \n\n<p>With some inline SVG trickery we can pull this off:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg width=\"96\" height=\"96\">\n  &lt;image xlink:href=\"image.svg\" src=\"image.png\" width=\"96\" height=\"96\" \/>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<p>Be sure to add sizing attributes to the image so that it fills up the entire SVG, and then size both&nbsp;<code>svg<\/code>&nbsp;(for modern browsers) and&nbsp;<code>image<\/code>&nbsp;(for old ones) in your CSS.<\/p>\n\n\n\n<p>Besides excluding a few older browsers that can support SVG images but not inline SVG, the main limitation here is that it will be a lot more work to get the images to display the correct size on a fluid site. You\u2019ll need to use the&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/scale-svg\/\">same tricks used to get an SVG to scale to a consistent aspect ratio<\/a>, instead of just setting&nbsp;<code>width: 100%;<\/code>&nbsp;and letting the height adjust automatically.<\/p>\n\n\n\n<ul><li><strong>Advantages:<\/strong>&nbsp;Requires no JavaScript or any other dependencies.<\/li><li><strong>Disadvantages:<\/strong>&nbsp;Triggers multiple (aborted) requests in IE. Older iOS can display fallback even though SVG is supported.&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/codepen.io\/chriscoyier\/pen\/cmybF\" rel=\"noopener\">Tests<\/a>.<\/li><\/ul>\n\n\n<\/details><\/div><\/div>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          <h3>Fallback for SVG as <code>&lt;object><\/code><\/h3>\n      <\/summary>\n  \n\n<p>As inline SVG has become better supported, SVG as&nbsp;<code>&lt;object&gt;<\/code>&nbsp;has fallen out of favor. That\u2019s unfortunate from a progressive enhancement\/graceful degradation perspective, because this is the easiest way to provide fallback content.<\/p>\n\n\n\n<p>The child content of the&nbsp;<code>&lt;object&gt;<\/code>&nbsp;element is displayed if the object itself cannot be. That content can be&nbsp;<em>any<\/em>&nbsp;html content: images, formatted text, even another object (for example, one containing a Flash version of your animated SVG).<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;object type=\"image\/svg+xml\" data=\"svg-ok.svg\">\n  &lt;img src=\"svg-no.png\" alt=\"No SVG support\">\n&lt;\/object><\/code><\/pre>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;object type=\"image\/svg+xml\" data=\"svg-ok.svg\">\n  &lt;p class=\"warning\">\n    Your browser does not support SVG!\n  &lt;\/p>\n&lt;\/object><\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/codepen.io\/AmeliaBR\/pen\/myvGPN\" rel=\"noopener\">See a simple test of this.<\/a><\/p>\n\n\n\n<p>Another progressive-enhancement benefit of&nbsp;<code>&lt;object&gt;<\/code>: some users on Internet Explorer 8 (and under) will be able to see the SVG! Objects trigger plug-ins, and the no-longer-updated&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/www.adobe.com\/devnet\/svg\/adobe-svg-viewer-download-area.html\" rel=\"noopener\">Adobe SVG Viewer plug-in<\/a>&nbsp;is still available for download for old IE.<\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          <h3>Fallback for SVG as CSS <code>background-image<\/code><\/h3>\n      <\/summary>\n  \n\n<p>For most CSS properties, you can trust in CSS error handling to get the browser to ignore a new syntax and apply a value declared earlier in the cascade. However, the&nbsp;<em>syntax<\/em>&nbsp;of a CSS rule using an SVG image file is perfectly correct for the old browsers. So they apply the rule, download the file, but then don\u2019t know what to do with it.<\/p>\n\n\n\n<p>The trick here is to find syntax that is supported by (nearly all) browsers that support SVG, but not by the older browsers. Here\u2019s the magic:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  background: url(fallback.png);\n  background: url(background.svg),\n    linear-gradient(transparent, transparent);\n}<\/code><\/pre>\n\n\n\n<p>This combines two features that, together, target the perfect combo. If a browser supports both multiple backgrounds and linear gradients, it supports SVG too. So here we declare the SVG with a completely transparent linear-gradient. If that fails in an older browser, the fallback declared above will kick in.<\/p>\n\n\n\n<p>You might add a&nbsp;<em>slight<\/em>&nbsp;performance hit on modern browsers from having to calculate the transparent gradient, but it\u2019s probably negligible.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pvGgWd\" src=\"\/\/codepen.io\/anon\/embed\/pvGgWd?height=450&amp;theme-id=1&amp;slug-hash=pvGgWd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pvGgWd\" title=\"CodePen Embed pvGgWd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-IE7.png?resize=906%2C680&#038;ssl=1\" alt=\"\" class=\"wp-image-324367\" width=\"906\" height=\"680\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-IE7.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-IE7.png?resize=300%2C225&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-IE7.png?resize=768%2C576&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-IE7.png?resize=1000%2C750&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Replacement background images, in Internet Explorer 7\n<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-android2.2.png?resize=289%2C422&#038;ssl=1\" alt=\"\" class=\"wp-image-324368\" width=\"289\" height=\"422\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-android2.2.png?w=352&amp;ssl=1 352w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-android2.2.png?resize=205%2C300&amp;ssl=1 205w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Replacement background images, in Android 2.2\n<\/figcaption><\/figure><\/div>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          <h3>Fallback for inline <code>&lt;svg><\/code><\/h3>\n      <\/summary>\n  \n\n<p>Inline SVG is popular for many reasons. All the code to draw what needs to be drawn is either right there in the markup (reducing requests), or referenced from a file that can be cached. You have lots of control over SVG that is inline. It\u2019s in the DOM, so it can be controlled with CSS and JavaScript from the same document.<\/p>\n\n\n\n<div class=\"wp-block-group ticss-cf1f10c5\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<details >\n  <summary>\n          How to test for support      <\/summary>\n  \n\n<p>There are&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/github.com\/Modernizr\/Modernizr\/tree\/master\/feature-detects\/svg\" rel=\"noopener\">some great tests from Modernizr<\/a>&nbsp;that we can look at. Your best bet for inline SVG, extracted out into a function, is this:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function supportsSvg() {\n  var div = document.createElement('div');\n  div.innerHTML = '&lt;svg\/>';\n  return (div.firstChild &amp;&amp; div.firstChild.namespaceURI) == 'http:\/\/www.w3.org\/2000\/svg';\n};<\/code><\/pre>\n\n\n\n<p>This tests if the HTML parser (which is what is used to parse content sent to innerHTML) can correctly generate an SVG element, basically by creating an element, injecting SVG, and testing the namespace.<\/p>\n\n\n\n<p>As with&nbsp;<code>&lt;object&gt;<\/code>, a browser that doesn\u2019t recognize&nbsp;<code>&lt;svg&gt;<\/code>&nbsp;will just ignore your SVG markup and treat its contents as HTML. But its not that simple. With&nbsp;<code>&lt;object&gt;<\/code>, browsers that&nbsp;<em>do<\/em>&nbsp;support the object will know to ignore the child content. With inline SVG, there\u2019s no such built-in fallback. However, there are a few workarounds you can use.<\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Plain text fallback inside inline SVG      <\/summary>\n  \n\n<p>You&nbsp;<em>can<\/em>&nbsp;include plain text inside your inline SVG code, and it will be ignored by any browser that supports SVG, because SVG text must be contained in a&nbsp;<code>&lt;text&gt;<\/code>&nbsp;element. You can even include hyperlinks within that text.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"-20 -20 40 40\">\n\n  &lt;!--Text Fallback-->\n  I'm sorry, your browser does not support\n\n  &lt;circle fill=\"limegreen\" r=\"19\" \/>\n  &lt;path stroke=\"forestgreen\" fill=\"none\" stroke-width=\"6\"\n        d=\"M-12,3 L-3,10 11,-12\" \/>\n  &lt;text dy=\"0.35em\" text-anchor=\"middle\" font-weight=\"bold\"\n        font-size=\"18px\" font-family=\"sans-serif\"\n        fill=\"indigo\">SVG&lt;\/text>\n\n  &lt;!--Fallback with links-->\n  Please upgrade to a &lt;a href=\"http:\/\/browsehappy.com\/?locale=en\">modern browser&lt;\/a>.\n\n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bNJrNP\" src=\"\/\/codepen.io\/anon\/embed\/bNJrNP?height=450&amp;theme-id=1&amp;slug-hash=bNJrNP&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bNJrNP\" title=\"CodePen Embed bNJrNP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"352\" height=\"515\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-android2.2-1.png?resize=352%2C515&#038;ssl=1\" alt=\"\" class=\"wp-image-324378\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-android2.2-1.png?w=352&amp;ssl=1 352w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cssbg-nojs-android2.2-1.png?resize=205%2C300&amp;ssl=1 205w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Plain text fallback, as it appears in Android 2.3<br><\/figcaption><\/figure>\n\n\n\n<p>Things to note:<\/p>\n\n\n\n<ul><li>The SVG text (the word \u201cSVG\u201d in this demo) becomes part of the fallback text. We\u2019ll talk about how to avoid this in a moment.<\/li><li>The SVG&nbsp;<code>&lt;title&gt;<\/code>&nbsp;text does&nbsp;<em>not<\/em>&nbsp;become part of the fallback text. That\u2019s because the no-SVG browsers interpret this as an invalid second HTML title element, and ignore it.<\/li><\/ul>\n\n\n\n<p>You cannot include any other HTML content within inline SVG: when the HTML parser in a modern browser reaches an HTML tag, it assumes that you forgot to close your&nbsp;<code>&lt;svg&gt;<\/code>&nbsp;tag, and closes it for you. Which means that (a) your SVG is corrupted and (b) your fallback text is visible in modern browsers. The only reason you can use links (<code>&lt;a&gt;<\/code>&nbsp;tags) is because they are valid tags in SVG, but don\u2019t draw anything themselves.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Another approach here would be to start with HTML text, and swap it out with inline SVG should you detect with JavaScript it is supported. Imagine a \u201clike\u201d button in HTML:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;button aria-label=\"Like\">\n  &lt;span class=\"inline-svg\" data-xlink=\"#icon-heart\">&#x2665;&lt;\/span> Like\n&lt;\/button><\/code><\/pre>\n\n\n\n<p>The span with the &#x2665; is the fallback there. The data attribute is what we\u2019ll use for a fallback, in this case, a&nbsp;<code>&lt;svg&gt;<\/code>\/<code>&lt;use&gt;<\/code>&nbsp;element.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">if (supportsSvg()) { \/\/ see test above\n  var inlineSvgs = document.querySelectorAll('span.inline-svg');\n\n  for(i = 0; i &lt; inlineSvgs.length; i++) {\n    var span = inlineSvgs[i];\n    var svgns = \"http:\/\/www.w3.org\/2000\/svg\";\n    var xlinkns = \"http:\/\/www.w3.org\/1999\/xlink\";\n    var svg = document.createElementNS(svgns, \"svg\");\n    var use = document.createElementNS(svgns, \"use\");\n\n    \/\/ Prepare the &lt;use> element\n    use.setAttributeNS(xlinkns, 'xlink:href', span.getAttribute('data-xlink') );\n\n    \/\/ Append it\n    svg.appendChild(use);\n\n    \/\/ Prepare the SVG\n    svg.setAttribute('class', \"inline-svg\");\n\n    \/\/ Set a title if necessary.\n    if (span.getAttribute('title')) {\n      svg.setAttribute('title', span.getAttribute('title'));\n    }\n\n    \/\/ Inject the SVG\n    span.parentNode.insertBefore(svg, span);\n\n    \/\/ Remove fallback\n    span.remove();\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GgqWGm\" src=\"\/\/codepen.io\/anon\/embed\/GgqWGm?height=450&amp;theme-id=1&amp;slug-hash=GgqWGm&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GgqWGm\" title=\"CodePen Embed GgqWGm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          HTML formatted-text fallback within inline SVG      <\/summary>\n  \n\n<p>You&nbsp;<em>can<\/em>&nbsp;use HTML text-formatting markup without ruining the SVG by including it within SVG&nbsp;<code>&lt;desc&gt;<\/code>&nbsp;(description) tags, which allow content from other namespaces.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"-20 -20 40 40\">\n\n  &lt;desc>\n    &lt;p class=\"warning\">\n        Fallback text.\n    &lt;\/p>\n  &lt;\/desc>\n\n  &lt;!-- ... SVG content ... -->\n\n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_myvGbY\" src=\"\/\/codepen.io\/anon\/embed\/myvGbY?height=450&amp;theme-id=1&amp;slug-hash=myvGbY&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed myvGbY\" title=\"CodePen Embed myvGbY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-descContent-IE8.png?resize=1024%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-324379\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-descContent-IE8.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-descContent-IE8.png?resize=300%2C225&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-descContent-IE8.png?resize=768%2C576&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-descContent-IE8.png?resize=1000%2C750&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Formatted text fallback, as it appears in Internet Explorer 8<br><\/figcaption><\/figure>\n\n\n\n<p>Things to note:<\/p>\n\n\n\n<ul><li>The main purpose of the&nbsp;<code>&lt;desc&gt;<\/code>&nbsp;tag is to provide alternative text description. Make sure the content of the tag makes sense to a screen reader.<\/li><li>In order for&nbsp;<code>&lt;desc&gt;<\/code>&nbsp;to be recognized by accessibility technologies on all browsers, it should be at the top of the SVG, right after the&nbsp;<code>&lt;title&gt;<\/code>.<\/li><li>You&nbsp;<em>should<\/em>&nbsp;also be able to use an SVG&nbsp;<code>&lt;metadata&gt;<\/code>&nbsp;tag to include all sorts of arbitrary markup without affecting the SVG or its alternative text. However, this doesn\u2019t work in browsers tested (they insert implicit&nbsp;<code>&lt;\/svg&gt;<\/code>&nbsp;end tags).<\/li><li>The SVG text content still gets included in the fallback text.<\/li><\/ul>\n\n\n\n<p>You&nbsp;<em>could<\/em>&nbsp;even include an&nbsp;<code>&lt;img&gt;<\/code>&nbsp;tag with a fallback image within the&nbsp;<code>&lt;desc&gt;<\/code>&nbsp;and it would display correctly in the old browsers without breaking your SVG in the new browsers.&nbsp;<strong>Don\u2019t do this!<\/strong>&nbsp;Although modern browsers do not&nbsp;<em>display<\/em>&nbsp;the fallback image, they do&nbsp;<em>download<\/em>&nbsp;it, and we\u2019re always trying to avoid double-downloads.<\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          <code>background-image<\/code> fallback for inline SVG      <\/summary>\n  \n\n<p>A possibility for an inline&nbsp;<code>&lt;svg&gt;<\/code>&nbsp;fallback is to set a background-image that is only used if the browser doesn\u2019t support inline&nbsp;<code>&lt;svg&gt;<\/code>. So, using the test above, you give yourself a class to work with:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">if (!supportsSvg()) {\n  document.documentElemement.classList.add(\"no-svg\");\n  &lt;em>\/\/ or even .className += \" no-svg\"; for deeper support&lt;\/em>\n}<\/code><\/pre>\n\n\n\n<p>Then say you\u2019re using some inline SVG like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;button>\n  &lt;svg class=\"icon icon-key\">\n    &lt;use xlink:href=\"#icon-key\">&lt;\/use>\n  &lt;\/svg>\n  Sign In\n&lt;\/button><\/code><\/pre>\n\n\n\n<p>You could use that new class to apply a background-image if needed:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html.no-svg .icon-key {\n  background: url(fallback-key.png) no-repeat;\n}<\/code><\/pre>\n\n\n\n<p>Demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zxwMQv\" src=\"\/\/codepen.io\/anon\/embed\/zxwMQv?height=450&amp;theme-id=1&amp;slug-hash=zxwMQv&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zxwMQv\" title=\"CodePen Embed zxwMQv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You\u2019ll have to create the PNG and size it yourself. There is&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/inline-svg-grunticon-fallback\/\">a walkthrough article here on CSS-Tricks<\/a>&nbsp;about using Grunticon to automate all this.<\/p>\n\n\n\n<p>For the deepest possible support, you\u2019d wrap the&nbsp;<code>&lt;svg&gt;<\/code>&nbsp;in a&nbsp;<code>&lt;div&gt;<\/code>&nbsp;and apply the background to that, so even if the browser totally rejects the SVG element, the fallback will still work on the known <code>&lt;div&gt;<\/code> element.<\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          <code>&lt;img><\/code> fallback within inline SVG      <\/summary>\n  \n\n<p>We covered this above in \u201cthe&nbsp;<code>&lt;image&gt;<\/code>&nbsp;trick\u201d section for inline&nbsp;<img>&nbsp;fallbacks, but since this is really using inline SVG, let\u2019s cover it in more detail here. To get an image fallback in SVG, without extra downloads, you need a way of including an image:<\/p>\n\n\n\n<ul><li>That old browsers will recognize as valid HTML<\/li><li>That the HTML 5 parser will allow inside&nbsp;<code>&lt;svg&gt;<\/code><\/li><li>That modern browsers will&nbsp;<em>not<\/em>&nbsp;interpret as an image to download.<\/li><\/ul>\n\n\n\n<p>As strange as it may seem, the SVG&nbsp;<code>&lt;image&gt;<\/code>&nbsp;element serves this purpose. The SVG&nbsp;<code>&lt;image&gt;<\/code>&nbsp;element is used to embed other image files&nbsp;<em>within<\/em>&nbsp;SVG. However, within HTML, every browser tested recognizes&nbsp;<code>&lt;image&gt;<\/code>&nbsp;as a non-standard synonym for&nbsp;<code>&lt;img&gt;<\/code>. In SVG, you specify the URL of the image file with the&nbsp;<code>xlink:href<\/code>&nbsp;attribute. In HTML, you specify it with the&nbsp;<code>src<\/code>&nbsp;attribute.<\/p>\n\n\n\n<p>In most browsers, therefore, it is sufficient to include an&nbsp;<code>&lt;image&gt;<\/code>&nbsp;tag with a&nbsp;<code>src<\/code>&nbsp;attribute (pointing to your fallback image) inside your inline SVG: the old browsers will download the fallback, the new browsers won\u2019t.&nbsp;<em>Except<\/em>&nbsp;for Internet Explorer, which downloads the fallback image even when it doesn\u2019t display it. The solution is to put a null&nbsp;<code>xlink:href<\/code>&nbsp;attribute on the element. The IE developer tools still show it&nbsp;<em>requesting<\/em>&nbsp;the fallback, but it aborts almost immediately (&lt;1ms in IE11 or IE10\/IE9 emulation mode), before downloading anything. It looks like this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"-20 -20 40 40\">\n  &lt;!-- SVG code snipped -->\n  &lt;image src=\"fallback.png\" xlink:href=\"\" \/>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBZrog\" src=\"\/\/codepen.io\/anon\/embed\/wBZrog?height=450&amp;theme-id=1&amp;slug-hash=wBZrog&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBZrog\" title=\"CodePen Embed wBZrog\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-image-IE8.png?resize=1024%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-324380\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-image-IE8.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-image-IE8.png?resize=300%2C225&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-image-IE8.png?resize=768%2C576&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-image-IE8.png?resize=1000%2C750&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Image fallback, as it appears in Internet Explorer 8<br><\/figcaption><\/figure>\n\n\n\n<p>Now to address that one remaining fallback problem: the text from the SVG that gets dumped to the screen. It somewhat ruins our perfect fallback image replacement. We can use CSS to help us fix this, but it\u2019s not straightforward. We can\u2019t use a simple&nbsp;<code>svg text { display: none; }<\/code>&nbsp;because that would ruin the SVG graphic. You could use the detection JavaScript to set classes that will hide or display the text accordingly. But even then, you\u2019ll be stymied by IE8\u2019s non-standard approach to unrecognized tags: they are always treated as empty void tags with no child content. You\u2019ll need to adapt the&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/github.com\/aFarkas\/html5shiv\" rel=\"noopener\">HTML5 Shiv<\/a>&nbsp;code to include all the SVG tags if you want to be able to treat them as stylable containers.<\/p>\n\n\n\n<p>A no-JavaScript option is to wrap all your SVG graphics code (except the fallback&nbsp;<code>&lt;image&gt;<\/code>) inside an&nbsp;<code>&lt;a&gt;<\/code>&nbsp;element. Without a hyperlink destination, an&nbsp;<code>&lt;a&gt;<\/code>&nbsp;element in SVG acts exactly like a&nbsp;<code>&lt;g&gt;<\/code>&nbsp;grouping element, so there is no harm to your SVG code. And because IE8 recognizes&nbsp;<code>&lt;a&gt;<\/code>&nbsp;as a valid container element, any styles applied to it will apply to all the text within it.<\/p>\n\n\n\n<p>So the trick is then to apply styles that will hide an HTML link\u2019s contents, but won\u2019t have an effect on an SVG group. Absolute positioning and hidden overflow do the trick:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.hide-on-fallback {\n  display: block;\n  position: absolute;\n  left: -100%;\n  height: 0;\n  width: 0;\n  overflow: hidden;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OPGxxW\" src=\"\/\/codepen.io\/anon\/embed\/OPGxxW?height=450&amp;theme-id=1&amp;slug-hash=OPGxxW&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OPGxxW\" title=\"CodePen Embed OPGxxW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-imagev2-IE8.png?resize=1024%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-324381\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-imagev2-IE8.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-imagev2-IE8.png?resize=300%2C225&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-imagev2-IE8.png?resize=768%2C576&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineSVG-imagev2-IE8.png?resize=1000%2C750&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Image fallback, without stray text, in Internet Explorer 8.<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/github.com\/jonathantneal\/svg4everybody\" rel=\"noopener\">SVG for Everybody<\/a>&nbsp;is a JavaScript library for inline SVG fallbacks as well. It\u2019s approach is to start with the most modern possible inline SVG: Inline SVG referenced via&nbsp;<code>&lt;use&gt;<\/code>&nbsp;pointing to symbols defined in an external file.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;svg role=\"img\" title=\"CodePen\"&gt;\n  &lt;use xlink:href=\"spritemap.svg#codepen\"&gt;&lt;\/use&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>If that\u2019s supported, it does nothing. In the case of IE, it Ajax\u2019s for the spritemap and injects it, making it work in modern IE where&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/svg-use-external-source\/\">that normally doesn\u2019t work<\/a>. In the case of non-SVG supporting browsers, it helps you inject a PNG.<\/p>\n\n\n\n<p>It\u2019s only disadvantage is that the UA test it does isn\u2019t very accurate. You\u2019re probably better off&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/ajaxing-svg-sprite\/\">Ajaxing for the SVG<\/a>&nbsp;and injecting it all the time, which makes for good support and browser caching.<\/p>\n\n\n<\/details><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<details >\n  <summary>\n          <h3>Stuff about Icon Systems<\/h3>\n      <\/summary>\n  \n\n<p>The point of having an icon system is that it makes icons efficient and easy to use.&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/svg-sprites-use-better-icon-fonts\/\">SVG makes for a great icon system.<\/a>&nbsp;You\u2019ll probably want the fallback for your icon system to still be both efficient and easy to use. Meaning something like the&nbsp;<code>&lt;image&gt;<\/code>&nbsp;trick would be a pretty bad fallback. It complicates the markup and means every individual icon is a separate request.<\/p>\n\n\n\n<p>You\u2019ll probably want to approach an icon system fallback with one of these methods:<\/p>\n\n\n\n<ul><li>Use background images as fallbacks, but have them be a&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/css-sprites\/\">CSS sprite<\/a>&nbsp;so it still just one request.<\/li><li>Use an icon font for a fallback. You\u2019ll need an empty element (<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/html-for-icon-font-usage\/\">suggested markup<\/a>), but @font-face works a lot further back than SVG does so it can be a good fallback.<\/li><li>Use&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/http:\/\/www.grunticon.com\/\" rel=\"noopener\">Grunticon<\/a>, which has you start with an empty element and progressively enhances up to SVG and handles fallbacks (through a JavaScript test). You can also use Grunticon while still starting with inline SVG if you wish, as detailed&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/css-tricks.com\/inline-svg-grunticon-fallback\/\">in this tutorial<\/a><\/li><\/ul>\n\n\n\n<p>Usually any of these fallbacks require some JavaScript to work. If you have a goal of an SVG icon system fallback with no JavaScript (that works in Android 2.2\/2.3), here\u2019s a way.<\/p>\n\n\n\n<p>This requires a little extra markup (the&nbsp;<code>&lt;a&gt;<\/code>&nbsp;in addition to the&nbsp;<code>&lt;use&gt;<\/code>):<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg class=\"icon\">\n  &lt;a class=\"svg-status\">&lt;\/a>\n  &lt;use xlink:href=\"#svg-status\" \/>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<p>Then in CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.icon a, .icon + a {\n  \/* styles for every icon *\/\n}\n.icon .svg-status,\n.icon + .svg-status {\n  \/* styles for this particular icon *\/\n}<\/code><\/pre>\n\n\n\n<p>The first selector is for Android, the second for IE. The sibling selector is because old IE won\u2019t treat an unrecognized element as a container.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bdVNEV\" src=\"\/\/codepen.io\/anon\/embed\/bdVNEV?height=450&amp;theme-id=1&amp;slug-hash=bdVNEV&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bdVNEV\" title=\"CodePen Embed bdVNEV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineicon-background-best-IE7.png?resize=909%2C682&#038;ssl=1\" alt=\"\" class=\"wp-image-324386\" width=\"909\" height=\"682\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineicon-background-best-IE7.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineicon-background-best-IE7.png?resize=300%2C225&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineicon-background-best-IE7.png?resize=768%2C576&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/inlineicon-background-best-IE7.png?resize=1000%2C750&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Background image on an anchor inside an SVG, in Internet Explorer 7<br><\/figcaption><\/figure>\n\n\n\n<p>If you don\u2019t like the extra anchor element, and don\u2019t mind losing the fallback when JavaScript is disabled, another strategy is to use JavaScript to inject an element (<code><\/code>) that both old Android and old IE browsers can style.<\/p>\n\n\n\n<p>The script tests for inline SVG support by seeing if the elements with tag name \u201cuse\u201d have the&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200808153404\/https:\/\/www.w3.org\/TR\/SVG11\/types.html#InterfaceSVGElement\" rel=\"noopener\"><code>ownerSVGElement<\/code>&nbsp;property<\/a>. Use your icon&nbsp;<code>id<\/code>&nbsp;values (from the&nbsp;<code>&lt;use&gt;<\/code>&nbsp;element\u2019s&nbsp;<code>xlink:href<\/code>&nbsp;attribute) as the class names for the new spans, so no extra markup is required.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eNpmZG\" src=\"\/\/codepen.io\/anon\/embed\/eNpmZG?height=450&amp;theme-id=1&amp;slug-hash=eNpmZG&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eNpmZG\" title=\"CodePen Embed eNpmZG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          <h3>Conclusion<\/h3>\n      <\/summary>\n  \n\n<p>You can totally do fallbacks for SVG.<\/p>\n\n\n<\/details>","protected":false},"excerpt":{"rendered":"<p>If you&#8217;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.<\/p>\n","protected":false},"author":223301,"featured_media":280598,"comment_status":"open","ping_status":"closed","sticky":false,"template":"guide-special.php","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":[4],"tags":[469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":199370,"position":0},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":303798,"url":"https:\/\/css-tricks.com\/tools-for-optimizing-svg\/","url_meta":{"origin":199370,"position":1},"title":"Tools for Optimizing SVG","date":"March 17, 2020","format":false,"excerpt":"This is our straight-to-the-point list of SVG optimizing tools across a number of categories. They are all largely based around SVGO, but how you use it depends. There are web apps, desktop apps, apis, and even design tool add-ons.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/svg-services.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":171038,"url":"https:\/\/css-tricks.com\/svg-text-typographic-designs\/","url_meta":{"origin":199370,"position":2},"title":"SVG `text` and Small, Scalable, Accessible Typographic Designs","date":"May 27, 2014","format":false,"excerpt":"Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word. This is something we might tell a graphic\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340692,"url":"https:\/\/css-tricks.com\/svg-loader-a-different-way-to-work-with-external-svg\/","url_meta":{"origin":199370,"position":3},"title":"svg-loader: A Different Way to Work With External SVG","date":"May 19, 2021","format":false,"excerpt":"SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format\u2019s customization powers. For instance,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333618,"url":"https:\/\/css-tricks.com\/svg-within-css\/","url_meta":{"origin":199370,"position":4},"title":"SVG within CSS","date":"February 8, 2021","format":false,"excerpt":"Stefan Judis has a \"Today I Learned\" (TIL) post explaining how SVGs filters can be inlined in CSS. The idea is that CSS has the filter property which supports some built-in functions, like grayscale(100%) and stuff like that. But it can also point to a filter defined by SVG. So\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/svg-in-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301914,"url":"https:\/\/css-tricks.com\/simple-image-placeholders-with-svg\/","url_meta":{"origin":199370,"position":5},"title":"Simple Image Placeholders with SVG","date":"January 27, 2020","format":false,"excerpt":"A little open-source utility from Tyler Sticka\u00a0that returns a data URL of an SVG to use as an image placeholder as needed. I like the idea of self-running utilities like that, rather than depending on some third-party service, like placekitten or whatever. Not that I'd advocate for feature bloat here,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/Screen-Shot-2020-01-13-at-8.34.41-PM.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/199370"}],"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\/223301"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=199370"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/199370\/revisions"}],"predecessor-version":[{"id":331763,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/199370\/revisions\/331763"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/280598"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=199370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=199370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=199370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}