{"id":3315,"date":"2019-12-01T15:41:10","date_gmt":"2019-12-01T13:41:10","guid":{"rendered":"https:\/\/blog.tomayac.com\/2019\/12\/01\/animated-svg-favicons\/"},"modified":"2019-12-01T15:41:10","modified_gmt":"2019-12-01T13:41:10","slug":"animated-svg-favicons","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2019\/12\/01\/animated-svg-favicons\/","title":{"rendered":"Animated SVG favicons"},"content":{"rendered":"\n\t\t\t

When it comes to animating SVGs, there're three options: using\nCSS<\/abbr>,\nJS<\/abbr>, or\nSMIL<\/abbr>.\nEach comes with its own pros and cons, whose discussion is beyond the scope of this article,\nbut Sara Soueidan<\/a> has a great\narticle<\/a> on the topic.\nIn this post, I add a repeating shrink<\/em> animation to a circle with all three methods,\nand then try to use these SVGs as favicons.<\/p>\n

Animating SVG with CSS \u2693<\/a><\/h2>\n

Here's an example of animating an SVG with CSS based on the\nanimation<\/code><\/a> and the\ntransform<\/code><\/a> properties.\nI scale the circle from the center and repeat the animation forever:<\/p>\n

<<\/span>svg<\/span> viewBox<\/span>=<\/span>\"<\/span>0 0 100 100\"<\/span><\/span> xmlns<\/span>=<\/span>\"<\/span>http:\/\/www.w3.org\/2000\/svg\"<\/span><\/span>><\/span><\/span>
  <<\/span>style<\/span>><\/span><\/span>
    svg<\/span> {<\/span>
      max-width<\/span>:<\/span> 100px;<\/span>
    }<\/span>

    circle<\/span> {<\/span>
      display<\/span>:<\/span> block;<\/span>
      animation<\/span>:<\/span> 2s linear infinite both circle-animation;<\/span>
      transform-origin<\/span>:<\/span> 50% 50%;<\/span>
    }<\/span>

    @keyframes<\/span> circle-animation<\/span> {<\/span>
      0%<\/span> {<\/span>
        transform<\/span>:<\/span> scale<\/span>(<\/span>1)<\/span>;<\/span>
      }<\/span>
      100%<\/span> {<\/span>
        transform<\/span>:<\/span> scale<\/span>(<\/span>0)<\/span>;<\/span>
      }<\/span>
    }<\/span>
  <\/span><\/span><\/<\/span>style<\/span>><\/span><\/span>
  <<\/span>circle<\/span> fill<\/span>=<\/span>\"<\/span>red\"<\/span><\/span> cx<\/span>=<\/span>\"<\/span>50\"<\/span><\/span> cy<\/span>=<\/span>\"<\/span>50\"<\/span><\/span> r<\/span>=<\/span>\"<\/span>45\"<\/span><\/span>\/><\/span><\/span>
<\/<\/span>svg<\/span>><\/span><\/span><\/code><\/pre>\n
Animating SVG with JS \u2693<\/a><\/h2>\n
The SVG <script><\/code><\/a>\ntag allows to add scripts to an SVG document.\nIt has some subtle differences<\/a>\nto the regular HTML <script><\/code>, for example, it uses the href<\/code> instead of the src<\/code> attribute,\nbut above all it's important to know that any functions defined within any <script><\/code> tag\nhave a global scope<\/em> across the entire current document.\nBelow, you can see an SVG script used to reduce the radius of the circle until it's equal to zero,\nthen reset it to the initial value, and finally repeat this forever.<\/p>\n
<<\/span>svg<\/span> viewBox<\/span>=<\/span>\"<\/span>0 0 100 100\"<\/span><\/span> xmlns<\/span>=<\/span>\"<\/span>http:\/\/www.w3.org\/2000\/svg\"<\/span><\/span>><\/span><\/span>
  <<\/span>circle<\/span> fill<\/span>=<\/span>\"<\/span>blue\"<\/span><\/span> cx<\/span>=<\/span>\"<\/span>50\"<\/span><\/span> cy<\/span>=<\/span>\"<\/span>50\"<\/span><\/span> r<\/span>=<\/span>\"<\/span>45\"<\/span><\/span> \/><\/span><\/span>
  <<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/javascript\"<\/span><\/span>><\/span><\/span><![CDATA[<\/span>
    const<\/span> circle =<\/span> document.<\/span>querySelector<\/span>(<\/span>'circle'<\/span>)<\/span>;<\/span>
    let<\/span> r =<\/span> 45<\/span>;<\/span>
    const<\/span> animate<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
      circle.<\/span>setAttribute<\/span>(<\/span>'r'<\/span>,<\/span> r--<\/span>)<\/span>;<\/span>
      if<\/span> (<\/span>r ===<\/span> 0<\/span>)<\/span> {<\/span>
        r =<\/span> 45<\/span>;<\/span>
      }<\/span>
      requestAnimationFrame<\/span>(<\/span>animate)<\/span>;<\/span>
    }<\/span>;<\/span>
    requestAnimationFrame<\/span>(<\/span>animate)<\/span>;<\/span>
  <\/span>]]><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
<\/<\/span>svg<\/span>><\/span><\/span><\/code><\/pre>\n
Animating SVG with SMIL \u2693<\/a><\/h2>\n
The last example uses SMIL, where, via the\n<animate><\/code><\/a>\ntag inside of the <circle><\/code> tag, I declaratively describe that I want to\nanimate the circle's r<\/code> attribute (that determines the radius) and repeat it indefinitely.<\/p>\n
<<\/span>svg<\/span> viewBox<\/span>=<\/span>\"<\/span>0 0 100 100\"<\/span><\/span> xmlns<\/span>=<\/span>\"<\/span>http:\/\/www.w3.org\/2000\/svg\"<\/span><\/span>><\/span><\/span>
  <<\/span>circle<\/span> fill<\/span>=<\/span>\"<\/span>green\"<\/span><\/span> cx<\/span>=<\/span>\"<\/span>50\"<\/span><\/span> cy<\/span>=<\/span>\"<\/span>50\"<\/span><\/span> r<\/span>=<\/span>\"<\/span>45\"<\/span><\/span>><\/span><\/span>
    <<\/span>animate<\/span> attributeName<\/span>=<\/span>\"<\/span>r\"<\/span><\/span> from<\/span>=<\/span>\"<\/span>45\"<\/span><\/span> to<\/span>=<\/span>\"<\/span>0\"<\/span><\/span> dur<\/span>=<\/span>\"<\/span>2s\"<\/span><\/span> repeatCount<\/span>=<\/span>\"<\/span>indefinite\"<\/span><\/span>\/><\/span><\/span>
  <\/<\/span>circle<\/span>><\/span><\/span>
<\/<\/span>svg<\/span>><\/span><\/span><\/code><\/pre>\n
Using Animated SVGs as Images \u2693<\/a><\/h2>\n
Before using animated SVGs as favicons, I want to briefly discuss\nhow you can use each of the three examples on a website.\nAgain there're three options: referenced via the src<\/code> attribute of an <img><\/code> tag,\nin an <iframe><\/code>, or inlined in the main document.\nAgain, SVG scripts have access to the global scope<\/em>, so they should definitely be used with care.\nSome user agents, for example, Google Chrome, don't run scripts for SVGs in <img><\/code>.\nThe Glitch<\/a> embedded below shows all variants in action.\nMy recommendation would be to stick with CSS animations whenever you can,\nsince it's the most compatible and future-proof variant.<\/p>\n
\n