{"id":7112,"date":"2025-09-15T11:12:53","date_gmt":"2025-09-15T16:12:53","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7112"},"modified":"2025-09-15T12:49:02","modified_gmt":"2025-09-15T17:49:02","slug":"replace-your-animated-gifs-with-svgs","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/replace-your-animated-gifs-with-svgs\/","title":{"rendered":"Replace Your Animated GIFs with SVGs"},"content":{"rendered":"\n<p>No one loves dancing hamster GIFs more than I do. But all those animated frames can add up to files so large you don\u2019t even see the dancing hamster. Your other tab has already loaded and you\u2019ve followed the dopamine hits down another social media rabbit hole. <\/p>\n\n\n\n<p>There\u2019s an alternative for those giant animated GIFs: <strong>animated SVGs.<\/strong><\/p>\n\n\n\n<p>Along with much smaller file size you also get infinite scalability and the use of some \u2014 though, sadly, not all \u2014 media queries. Let\u2019s take a look.<\/p>\n\n\n\n<p class=\"learn-more\"><strong>Warning:<\/strong>&nbsp;some of the animations in this article do not use a <code>prefers-reduced-motion<\/code> media query. We\u2019ll discuss why that is later in the article.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-it-works\">How it works<\/h2>\n\n\n\n<p>First let&#8217;s create a simple rhombus in SVG. You could do a square, but rhombus is more fun to say.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span> <span class=\"hljs-attr\">xmlns<\/span>=<span class=\"hljs-string\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span> <span class=\"hljs-attr\">xml:space<\/span>=<span class=\"hljs-string\">\"preserve\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"evenodd\"<\/span> <span class=\"hljs-attr\">stroke-linejoin<\/span>=<span class=\"hljs-string\">\"round\"<\/span> <span class=\"hljs-attr\">stroke-miterlimit<\/span>=<span class=\"hljs-string\">\"2\"<\/span> <span class=\"hljs-attr\">clip-rule<\/span>=<span class=\"hljs-string\">\"evenodd\"<\/span> <span class=\"hljs-attr\">viewBox<\/span>=<span class=\"hljs-string\">\"0 0 500 500\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"rhombus\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#fc0000\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m454 80-68 340H46l68-340h340Z\"<\/span>\/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Next let&#8217;s do a quick spinning motion that we\u2019ll run infinitely.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#rhombus<\/span> {\n  <span class=\"hljs-attribute\">transform-origin<\/span>: center;\n  <span class=\"hljs-attribute\">rotate<\/span>: <span class=\"hljs-number\">0deg<\/span>;\n  <span class=\"hljs-attribute\">animation<\/span>: spinny-spin <span class=\"hljs-number\">3.5s<\/span> forwards infinite ease-in-out;\n}\n<span class=\"hljs-keyword\">@keyframes<\/span> spinny-spin {\n  0% {\n    <span class=\"hljs-attribute\">rotate<\/span>: <span class=\"hljs-number\">0deg<\/span>;\n  }\n  90%, 100% {\n    <span class=\"hljs-attribute\">rotate<\/span>: <span class=\"hljs-number\">720deg<\/span>;\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NPGogKK\" src=\"\/\/codepen.io\/anon\/embed\/NPGogKK?height=450&amp;theme-id=1&amp;slug-hash=NPGogKK&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NPGogKK\" title=\"CodePen Embed NPGogKK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We&#8217;ve done this as essentially a separate CSS file that looks into the SVG to style parts of it. We could pluck up that CSS and put it right inside the <code>&lt;svg&gt;<\/code> if we wanted. SVG is cool with that.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span> <span class=\"hljs-attr\">xmlns<\/span>=<span class=\"hljs-string\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span> <span class=\"hljs-attr\">xml:space<\/span>=<span class=\"hljs-string\">\"preserve\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"evenodd\"<\/span> <span class=\"hljs-attr\">stroke-linejoin<\/span>=<span class=\"hljs-string\">\"round\"<\/span>\n    <span class=\"hljs-attr\">stroke-miterlimit<\/span>=<span class=\"hljs-string\">\"2\"<\/span> <span class=\"hljs-attr\">clip-rule<\/span>=<span class=\"hljs-string\">\"evenodd\"<\/span> <span class=\"hljs-attr\">viewBox<\/span>=<span class=\"hljs-string\">\"0 0 500 500\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-selector-id\">#rhombus<\/span> {\n            <span class=\"hljs-attribute\">transform-origin<\/span>: center;\n            <span class=\"hljs-attribute\">rotate<\/span>: <span class=\"hljs-number\">0deg<\/span>;\n            <span class=\"hljs-attribute\">animation<\/span>: spinny-spin <span class=\"hljs-number\">3.5s<\/span> forwards infinite ease-in-out;\n        }\n        <span class=\"hljs-keyword\">@keyframes<\/span> spinny-spin {\n            0% { <span class=\"hljs-attribute\">rotate<\/span>: <span class=\"hljs-number\">0deg<\/span>; }\n            90%, 100% { <span class=\"hljs-attribute\">rotate<\/span>: <span class=\"hljs-number\">720deg<\/span>; }\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"rhombus\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#fc0000\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m454 80-68 340H46l68-340h340Z\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now that the SVG is all one contained thing, we could save it as an independent file (let&#8217;s call it <code>rhombus.svg<\/code>) and load it using an <code>&lt;img&gt;<\/code>&nbsp;element:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"rhombus.svg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"a spinning red rhombus\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Even when loaded in an&nbsp;<code>img<\/code>, the animation still runs (!):<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBKNbmY\" src=\"\/\/codepen.io\/anon\/embed\/wBKNbmY?height=450&amp;theme-id=1&amp;slug-hash=wBKNbmY&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBKNbmY\" title=\"CodePen Embed wBKNbmY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is why this technique is viable as a <code>.gif<\/code> replacement.<\/p>\n\n\n\n<p>This technique works best for animations that move and\/or transform the elements as opposed to a sprite-based or successive image animation (which is basically what an animated GIF is). Also, for security reasons, an SVG loaded through an&nbsp;<code>img<\/code>&nbsp;element can not load external files i.e., the sprite image. You could base64 the sprite and embed it, but it would likely increase the file size to animated GIF levels anyway.<\/p>\n\n\n\n<p>Let\u2019s look at a more complicated example:<\/p>\n\n\n\n<p>Here\u2019s a zombie playing an accordion (yes, it\u2019s random, unless you know about&nbsp;<a href=\"https:\/\/undead.institute\/\">my silly little site<\/a>, then it\u2019s still random, but not unexpected). On the left is the GIF version. On the right is the SVG.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"350\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/09\/Yk1F0yFw.gif?resize=200%2C350&#038;ssl=1\" alt=\"\" class=\"wp-image-7120\" style=\"width:auto;height:350px\"\/><figcaption class=\"wp-element-caption\">GIF<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/09\/zombieaccordion.svg\" alt=\"\" class=\"wp-image-7121\" style=\"width:auto;height:350px\"\/><figcaption class=\"wp-element-caption\">SVG<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>As an animated GIF, this polka-playing image is about 353Kb in size, but as an animated SVG it\u2019s just 6Kb, less than 2% of the GIF\u2019s size. That&#8217;s massive size (performance) savings with the SVG, while looking crisper doing it.<\/p>\n\n\n\n<p>I drew the character in a graphics program and outputted it as an SVG. I used Affinity Designer but you could use Adobe Illustrator, Inkscape, Figma, or anything else that exports SVG.<\/p>\n\n\n\n<p class=\"learn-more\"><strong>Side Note<\/strong><em>:<\/em>&nbsp;In my export, I made certain to check the \u201creduce transformations\u201d box in order to make it easier to animate it. If you don\u2019t reduce transformations, the elements can appear in all kinds of cockamamie contortions: scaled, translated and rotated. This is fine if the element is static, but if you want to move it in any way with transformations, you\u2019ll have to figure out how editing the transformations will affect your element. It almost certainly won\u2019t be straightforward and may not even be decipherable. With reduced transformations, you get an element in its natural state. You can then transform it in whatever way you need to.<\/p>\n\n\n\n<p>After outputting, I created the CSS animation using <code>@keyframes<\/code> then added that to an SVG&nbsp;<code>style<\/code>&nbsp;element (which works just about exactly the same as an HTML&nbsp;<code>style<\/code>&nbsp;element).<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>See Complete SVG File<\/summary><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span> <span class=\"hljs-attr\">xmlns<\/span>=<span class=\"hljs-string\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span> <span class=\"hljs-attr\">xml:space<\/span>=<span class=\"hljs-string\">\"preserve\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"evenodd\"<\/span> <span class=\"hljs-attr\">stroke-linejoin<\/span>=<span class=\"hljs-string\">\"round\"<\/span> <span class=\"hljs-attr\">stroke-miterlimit<\/span>=<span class=\"hljs-string\">\"2\"<\/span> <span class=\"hljs-attr\">clip-rule<\/span>=<span class=\"hljs-string\">\"evenodd\"<\/span> <span class=\"hljs-attr\">viewBox<\/span>=<span class=\"hljs-string\">\"0 20 250 440\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n    <span class=\"hljs-comment\">\/* Music Note Animation *\/<\/span>\n    <span class=\"hljs-selector-class\">.musicnote<\/span> {\n      <span class=\"hljs-attribute\">animation<\/span>: <span class=\"hljs-number\">4s<\/span> ease-in-out <span class=\"hljs-built_in\">calc<\/span>(var(--multiplier) * <span class=\"hljs-number\">1s<\/span> - <span class=\"hljs-number\">1s<\/span>) notes forwards infinite;\n      <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n    }\n    <span class=\"hljs-comment\">\/* These custom properties allow for some variation in the timing of each note so that there animations overlap and seem more random while also allowing one set of keyframes to be used for all seven notes *\/<\/span>\n    <span class=\"hljs-selector-id\">#n1<\/span> { <span class=\"hljs-attribute\">--multiplier<\/span>: <span class=\"hljs-number\">1<\/span> }\n    <span class=\"hljs-selector-id\">#n2<\/span> { <span class=\"hljs-attribute\">--multiplier<\/span>: <span class=\"hljs-number\">1.2<\/span> }\n    <span class=\"hljs-selector-id\">#n3<\/span> { <span class=\"hljs-attribute\">--multiplier<\/span>: <span class=\"hljs-number\">1.4<\/span> }\n    <span class=\"hljs-selector-id\">#n4<\/span> { <span class=\"hljs-attribute\">--multiplier<\/span>: <span class=\"hljs-number\">1.6<\/span> }\n    <span class=\"hljs-selector-id\">#n5<\/span> { <span class=\"hljs-attribute\">--multiplier<\/span>: <span class=\"hljs-number\">1.8<\/span> }\n    <span class=\"hljs-selector-id\">#n6<\/span> { <span class=\"hljs-attribute\">--multiplier<\/span>: <span class=\"hljs-number\">2<\/span> }\n    <span class=\"hljs-selector-id\">#n7<\/span> { <span class=\"hljs-attribute\">--multiplier<\/span>: <span class=\"hljs-number\">2.2<\/span> }\n    <span class=\"hljs-keyword\">@keyframes<\/span> notes {\n      <span class=\"hljs-comment\">\/* move the notes up 2em while also varying their opacity *\/<\/span>\n      0% {\n        <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n        <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(<span class=\"hljs-number\">0<\/span>);\n      }\n      30%, 80% {\n        <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">1<\/span>;\n      }\n      100% {\n        <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n        <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(-<span class=\"hljs-number\">2em<\/span>);\n      }\n    }\n    <span class=\"hljs-selector-id\">#zright<\/span>, <span class=\"hljs-selector-id\">#zleft<\/span> {\n      <span class=\"hljs-comment\">\/* Sets the initial state for each hand and side of the accordion *\/<\/span>\n      <span class=\"hljs-attribute\">--multiplier<\/span>: -<span class=\"hljs-number\">1<\/span>;\n      <span class=\"hljs-attribute\">transform-origin<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">0<\/span>) <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">0<\/span>);\n      <span class=\"hljs-attribute\">animation<\/span>: <span class=\"hljs-number\">4s<\/span> ease-in-out <span class=\"hljs-number\">0s<\/span> play forwards infinite;\n    }\n    <span class=\"hljs-selector-id\">#zleft<\/span> {\n      <span class=\"hljs-comment\">\/* allows the same keyframes to be used for both sides by reversing the translation and rotation *\/<\/span>\n      <span class=\"hljs-attribute\">--multiplier<\/span>: <span class=\"hljs-number\">1<\/span>;\n    }\n    <span class=\"hljs-keyword\">@keyframes<\/span> play {\n      0%, 100% {\n        <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">0<\/span>) <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">0<\/span>);\n      }\n      50% {\n        <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translate<\/span>(calc(var(--multiplier) * <span class=\"hljs-number\">31px<\/span>), <span class=\"hljs-built_in\">calc<\/span>(var(--multiplier) * -<span class=\"hljs-number\">1px<\/span>)) <span class=\"hljs-built_in\">rotate<\/span>(calc(var(--multiplier) * <span class=\"hljs-number\">2deg<\/span>));\n      }\n    }\n    <span class=\"hljs-comment\">\/* Animates the squeeze and stretch of the accordion bellows *\/<\/span>\n    <span class=\"hljs-selector-id\">#accord<\/span> {\n      <span class=\"hljs-attribute\">animation<\/span>: <span class=\"hljs-number\">4s<\/span> linear <span class=\"hljs-number\">0s<\/span> squeeze forwards infinite;\n      <span class=\"hljs-attribute\">transform-origin<\/span>: center center;\n      <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scaleX<\/span>(<span class=\"hljs-number\">1<\/span>);\n    }\n    <span class=\"hljs-keyword\">@keyframes<\/span> squeeze {\n      0%, 100% {\n        <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scaleX<\/span>(<span class=\"hljs-number\">1<\/span>);\n      }\n      50% {\n        <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scaleX<\/span>(<span class=\"hljs-number\">0.8<\/span>);\n      }\n    }\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">g<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"zombie\"<\/span>&gt;<\/span>\n  <span class=\"hljs-comment\">&lt;!-- The main zombie head and body, everything except the hands --&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#676767\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M62 207h121v47H62z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#91c1a3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M99 190h46v26H99z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#3a3a3a\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M156 87h10v19H78V87h9v-9h69v9Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#9cd3b3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M155 105h9v18h19v29h-10v27h-9v9h-9v10h-18v9h-29v-9H90v-10H80v-9h-9v-27h-9v-29h18v-18h10v-9h65v9Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"eyes\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#fbeb8e\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M127 114h31v28h-31zm-37 0h28v28H90z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#758b7c\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M108 170h11v9h-11z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#91c1a3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M118 133h9v28h-9z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#444445\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M90 123h9v9h-9zm46-9h9v9h-9z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#3a3a3a\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M164 102h9v39h-9zm-93 0h9v39h-9z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#676767\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M118 393v57H46v-37h34v-58h38v38Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#9cd3b3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M80 384h38v10H80z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#676767\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M128 393v-38h38v58h34v37h-72v-57Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#9cd3b3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M128 384h38v10h-38z\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">g<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">g<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"accord\"<\/span>&gt;<\/span>\n<span class=\"hljs-comment\">&lt;!-- THe accordion bellows --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#9e6330\"<\/span>\n      <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m191 201-20 7-25 7-20 4-25-2-25-7-24-3-14-2-18 147 23 9 24 6 29 5 30 4 25-6 27-8 29-1 17-9-19-152-14 1Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#774b24\"<\/span>\n      <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m107 214-10-1-6 162 10 1 6-162Zm14 2h10v162h-10zm31-5-10 1 4 162 10-1-4-162Zm23-6h-10l7 162h10l-7-162Zm20-8-10 1 17 166 10-1-17-166ZM81 208l-10-1-10 162h10l10-161Zm-20-5-10-1-16 162 10 1 16-162Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">g<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">g<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"notes\"<\/span>&gt;<\/span>\n  <span class=\"hljs-comment\">&lt;!-- The seven musical notes --&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"n7\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"musicnote\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#2f2f2f\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m200 153 5-23 2 1 2 1v1h2l-1 1h2l4 1 1 1v1h2l-1 2h1v1l2 1h1l-1 2-1-1v1h-4l1-1h-2v-1h-4l-1 1-3-1v-1h-2l-4 19h-1v2h-1l-1 1-1 1-2-1v1h-3v-1l-2-1v-1h-1l1-1h-1v-1h6v-1h2v-1h3v-1h-5v1h-2v-1l-1 1v-1l-3 1h-1l1-2h1v-2h1v-1h1v-1l2 1 1-1h3l-1 1 3 1-1 1h1Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"n6\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"musicnote\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#2f2f2f\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m16 78 3-23h2v1h3v1h1v1h6v1h1v2h2l-1 2h1v1h2v1h1v1h-3v1h-2v-1h-2v-1h-2v1l-2-1v1h-4v-1h-2l-2 19h-1l-1 2h-1v1h-1v1h-2v1l-3-1v-1H7v-1H6v-1H5v-1h2v-1h5v-1h1v-1h3v-1h-4v1H5h1l-1 1v-2h1v-2h1v-1h1v-1h2l1-1h3l-1 1 3 1-1 1h1Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"n5\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"musicnote\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#2f2f2f\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m40 111 1-7h2l-1 13h-1v2h-1v1h-1v1h-2v1h-4l1-1h-2v-1l-1-1v-1h-1v-2h-1v-3h1v-2h1v-1h1l1-1h2v-1l3 1v1h2v1Zm3-13-1 6h-2l1-16h2v1h3v1h1v1h6v1h1v1h2v2h1v1h1v1h1v1h-1v1h-4l-1-1h-5v1l-3-1h-2Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"n4\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"musicnote\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#2f2f2f\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M220 79h2l1 1 1-1v1h2l-1-1h6v1h2v2h1l1 1 1-1v1h1l1 1h-2l1 1h-2v1h-4v-1l-2 1-2 1v1h-6l2 7 1-1 2 13h-1l1 2-1 1v1h-1v1h-2v1l-3 1v-1h-2v-1h-1v-1h-1l-1-2-1 1v-3l1-1-1-2h1v-1h1v-1h2v-1l3-1v1h2v1l1-1-1-6h-2l-3-16 2-1 1 1Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"n3\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"musicnote\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#2f2f2f\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M226 183v-7h2l-1 13h-1v2h-1v1h-1v1h-2v1h-3v-1l-2-1v-1h-1v-1h-1v-2h-1v-3h1v-2h2v-1h1v-1h2v-1l3 1v1h2v1h1Zm2-14-1 7h-2l1-16h2l3 1v1h1v1h2v-1l4 1v1h1v1h2v2h1v1h1v1h1v1h-2v1h-3l1-1h-2l-3-1v1h-5v-1h-2Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"n2\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"musicnote\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#2f2f2f\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m23 164 2 13h-1v2l-1 1 1 1h-1v1h-2v1l-3 1v-1h-2l-1-1h-1v-1h-1v-2h-1l-1-3h1v-2h1v-1h1v-1l2-1v-1h3v1h2v1l1-1-1-6 2-1Zm-1-15 2-1 1 1h1v1h1v-1l5-1v1h1v1h2v2h1l1 1 1-1v1h1v1h-1v1h-1v1h-2v-1l-2 1v-1l-3 1h1l-2 1-4 1v-1h-2m-2-9h-2l3 17 2-1-3-16Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"n1\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"musicnote\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#2f2f2f\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m188 72 3 13h-1v2h-1v2l-2 1v1h-3v-1l-2 1-1-1h-1v-1h-1v-2l-1 1-1-3 1-1v-2h1l-1-1h1v-1l2-1v-1h3v1l2-1 1 1-1-7h2Zm-2-16h3v1l1-1v1h2l4-1h1l1 1h1l1 2h1v1l1-1 1 1h1v1h-1v1h-1v1h-4l-1-1-2 1-2 1v1h-5l1 7h-2l-3-16h2Z\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">g<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">g<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"zleft\"<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- The left hand and left side of the accordion --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#676767\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m11 255-5-1-2 17v19l10 22 9-49-12-8Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#9cd3b3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m15 257 4-16-9-2-4 16 9 2Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#581610\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m11 294 7-87h6v-5h6l1-5h6v-5l6 1-16 184h-6v-5l-5-1v-5l-6-1v-5l-5-1 6-65Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#9cd3b3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m24 283-1 9-19-2 2-35 20 2v8l8 1-1 18-9-1Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#330d09\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M17 249h7l-5 51h-7l5-51Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#48120d\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m16 256 7 1-3 36-7-1 3-36Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#6b6108\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M19 251h3l-1 3-2-1v-2Zm-4 44h3l-1 3h-2v-3Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">g<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">g<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"zright\"<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- The right hand and right side of the accordion --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#676767\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M237 253h3l4 18 2 19-11 25-11-51 13-11Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#9cd3b3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m231 258-6-15 8-3 6 15-8 3Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#581610\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m224 366-27-176 6-1 1 5h6l1 5 6-1v5l6-1 14 89 8 55-5 2v5l-6 1 1 5-6 1 1 5-6 1Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#9cd3b3\"<\/span> <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m221 266-2-8 20-3 5 35-20 2-1-8-9 1-2-17 9-2Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#330d09\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m228 249-7 1 8 51 7-1-8-51Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#48120d\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m229 256-7 2 6 36 7-1-6-37Z\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"#6b6108\"<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m226 251-3 1 1 3 3-1-1-3Zm7 44-3 1 1 3 3-1-1-3Z\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">g<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p>Then, you save the SVG as a file and bring it into the webpage with an HTML&nbsp;<code>img<\/code>&nbsp;tag.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"zombieaccordion.svg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"A zombie playing ear-bleeding notes on an accordion\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"background-images\">Background Images<\/h2>\n\n\n\n<p>These animated SVGs don\u2019t just work in the&nbsp;<code>img<\/code>&nbsp;element, they also work as a CSS&nbsp;<code>background-image<\/code>. So you can have a hundred little zombies playing the accordion in your background. That said, repeating the animation potentially infinitely takes a hit on page performance. For instance, during testing, when I had the zombie playing as a background image, another copy of the SVG in an&nbsp;<code>img<\/code>&nbsp;element struggled to animate.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_myevZMo\" src=\"\/\/codepen.io\/anon\/embed\/myevZMo?height=450&amp;theme-id=1&amp;slug-hash=myevZMo&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed myevZMo\" title=\"CodePen Embed myevZMo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"media-queries\">Media Queries<\/h2>\n\n\n\n<p>Some media queries from within the SVG pierce the vale and work normally! Queries for width, height and even prefers-color-scheme worked just fine. But it\u2019s a mixed bag. I couldn\u2019t get print, pointer or, worst of all, prefers-reduced-motion to work. But those media queries that do work can give you even more flexibility in how you work with these animated SVGs.<\/p>\n\n\n\n<p>Using&nbsp;<code>@media (max-width: 300px)<\/code>, the animation below only plays when the&nbsp;<code>img<\/code>&nbsp;is 300 pixels wide or larger. To be clear, the max-width media query is based on the size of the&nbsp;<code>img<\/code>&nbsp;element, and&nbsp;<em>not<\/em>&nbsp;the size of the screen.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GgpzVgg\" src=\"\/\/codepen.io\/anon\/embed\/GgpzVgg?height=650&amp;theme-id=1&amp;slug-hash=GgpzVgg&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GgpzVgg\" title=\"CodePen Embed GgpzVgg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Plus media queries work even in background images! They can be a little trickier because, for instance, the width queries work on the size the image appears at, not the size of the container.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"gotchas\">Gotchas<\/h2>\n\n\n\n<p>While most of this works the way any other CSS animation would, there are some limitations to how the CSS works in the SVG file shown in&nbsp;<code>img<\/code>&nbsp;vs. how it would work embedded in the HTML directly. As replaced content, the SVG is in a sort of sandbox and cannot access much outside the file.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The animation has to run automatically. You can\u2019t use hover effects or clicks to start the animation.<\/li>\n\n\n\n<li>Despite width and height media queries working within the SVG, viewport units do not work within the SVG.<\/li>\n\n\n\n<li>As mentioned above, the animation won\u2019t recognize&nbsp;<code>prefers-reduced-motion<\/code>, whether the&nbsp;<code>prefers-reduced-motion<\/code>&nbsp;declaration is within the SVG or in the larger site. While neither would an animated GIF recognize it, it unfortunately won\u2019t give you that additional built-in functionality. On the plus side, any system you had that would prevent an animated GIF from playing should be easily modifiable to also apply to the SVG.<\/li>\n\n\n\n<li>The SVG won\u2019t run JavaScript from within the SVG. While a GIF wouldn\u2019t run JavaScript either, I had hoped to get around&nbsp;<code>prefers-reduced-motion<\/code>&nbsp;not working by implementing it with JavaScript, but that too didn\u2019t work. It\u2019s probably a good thing it doesn\u2019t, though, as that would be a massive security hole.<\/li>\n\n\n\n<li>Modern CSS may or may not work. I was delighted to see custom properties and nested selectors working fine in my tests, but exactly what modern features are available and what may not work (like&nbsp;<code>prefers-reduced-motion<\/code>) will require more testing.<\/li>\n<\/ul>\n\n\n\n<p>This technique works in all versions of the latest browsers and should theoretically work as far back as&nbsp;<code>style<\/code>&nbsp;elements and CSS animations are supported in SVG.<\/p>\n\n\n\n<p>Alright let\u2019s get those hamsters\u2026 errr\u2026 zombies dancing!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/09\/zombiedance.svg\" alt=\"\" class=\"wp-image-7125\" style=\"width:272px;height:auto\"\/><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>You can animate an .svg and it will play even with an `<img>` or `background-image`, making it a viable GIF replacement if you can pull it off! <\/p>\n","protected":false},"author":36,"featured_media":7178,"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":[1],"tags":[100,7,133,91],"class_list":["post-7112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-animation","tag-css","tag-images","tag-svg"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/09\/Replace-Your-Animated-GIFs-with-SVGs.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7112","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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7112"}],"version-history":[{"count":17,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7112\/revisions"}],"predecessor-version":[{"id":7175,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7112\/revisions\/7175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7178"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}