{"id":41,"date":"2025-06-23T16:47:05","date_gmt":"2025-06-23T11:17:05","guid":{"rendered":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/?p=41"},"modified":"2025-06-23T17:08:18","modified_gmt":"2025-06-23T11:38:18","slug":"animations-part-4-optimising-svgs","status":"publish","type":"post","link":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/culture\/animations-part-4-optimising-svgs.html","title":{"rendered":"Animations Part 4: Optimising SVGs"},"content":{"rendered":"<p>SVG animations take me back to the Hanna-Barbera cartoons I watched as a kid. Shows like\u00a0<em>Wacky Races<\/em>,\u00a0<em>The Perils of Penelope Pitstop<\/em>, and, of course,\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Yogi_Bear\"><em>Yogi Bear<\/em><\/a>. They inspired me to lovingly recreate some classic\u00a0<a href=\"https:\/\/stuffandnonsense.co.uk\/toon-titles\">Toon Titles<\/a>\u00a0using CSS, SVG, and SMIL animations.<\/p>\n<p>But getting animations to load quickly and work smoothly needs more than nostalgia. It takes clean design, lean code, and a process that makes complex SVGs easier to animate. Here\u2019s how I do it.<\/p>\n<p>Whether for personal projects or commercial work, preparing SVGs well ensures they\u2019re accessible. Optimising them ensures they load quickly, especially on mobile, and thinking carefully about how they\u2019re structured makes maintaining them easier. I\u2019ve developed a\u00a0<strong>process that balances visuals with accessibility and performance<\/strong>\u00a0and makes complex SVGs easier to work with.<\/p>\n<p>So, to explain my process, I\u2019ve chosen an episode of\u00a0<em>The Yogi Bear Show<\/em>\u00a0called \u201cBewitched Bear,\u201d first broadcast in January 1960. In this story, Yogi steals a witch\u2019s broom to help him grab \u201cpic-a-nic\u201d baskets.<\/p>\n<p>\u201cHey, hey, hey!\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SVG animations take me back to the Hanna-Barbera cartoons I watched as a kid. [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":23,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"coauthors":[4],"class_list":["post-41","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-culture"],"acf":[],"_links":{"self":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":1,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/posts\/41\/revisions\/42"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/media\/23"}],"wp:attachment":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/tags?post=41"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/coauthors?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}