Twitter's new "favorite" animation is a static image(twitter.com)

over 6 years ago from Pete Lada, Co-founder and Designer at Guidebook

  • Mason LawlorMason Lawlor, over 6 years ago

    Can anyone fill me in? Why would they use a sprite instead of an SVG animation?

    0 points
    • Marc EdwardsMarc Edwards, over 6 years ago (edited over 6 years ago )

      1. SVG support

      iOS doesn't support SVG natively.

      2. Tooling

      If you're using a PNG sequence or texture atlas like this, you can use any tool you like to create it: After Effects, Photoshop, a full 3D app, whatever.

      3. Cross platform

      A texture atlas as a PNG has full support across iOS, Android, OS X, Windows and the web. SVG has some support, but if you wanted to keep the animation vector on all platforms, you'd likely need to use a combination of SVG, Android vector drawable, Core Graphics paths etc.

      4. Performance

      Showing a static animation is more performant than having to draw a complex shape for each frame. If you used a vector format, but pre-rendered, you're going to use the same amount of memory as a PNG, so why bother?

      5 points
      • Mason LawlorMason Lawlor, over 6 years ago (edited over 6 years ago )

        Thanks Marc. Points 1.1-1.3 make sense.

        Point 1.4 is interesting. Do browsers pre-render SVGs? Or why else would they be the same amount of memory? The entire reason I've recently become intrigued by SVGs was because I was under they impression their load times were fastest.

        P.S.- did you guys discontinue the iStat dashboard widget? (I've been wondering this for a long time)

        1 point
        • Marc EdwardsMarc Edwards, over 6 years ago (edited over 6 years ago )

          Thanks Marc. Points 1.1-1.3 make sense.

          Oops. Due to some sloppy writing on my part, the list was changed from 1, 2, 3, 4 to 1, 1, 1, 1 (hello, Markdown!). All fixed now.

          Do browsers pre-render SVGs? Or why else would they be the same amount of memory?

          Yeah, when a vector is displayed on screen, it needs a bitmap buffer, just like a bitmap image does. Depending on what's being drawn, there may actually be lots of temporary images buffers, too. Things like masking often need a few passes to composite all the parts.

          One place this is obvious is with CSS transforms. In all browsers I've tested for it, CSS transforms are also done on the resulting bitmap image, not the original vector — if you draw an SVG that's 10×10 and scale it up to 100×100 using a CSS transform, it won't look crisp.

          That's not a bad thing, it's just how it works. (Please note that I said CSS transform! Other methods of enlarging an SVG might trigger a repaint to the new size.)

          The entire reason I've recently become intrigued by SVGs was because I was under they impression their load times were fastest.

          The files are usually really small, so they download quickly. So, from that perspective they are great.

          P.S.- did you guys discontinue the iStat dashboard widget? (I've been wondering this for a long time)

          Yep, sorry. Dashboard hasn't had much love from Apple for a long time, so we've discontinued all our widgets. But, we do have a new Notification Center widget.

          1 point
          • Mason LawlorMason Lawlor, over 6 years ago

            Haha, we all know Markdown has it's moments. Thanks for the thorough clarification.

            Luckily I still have the dashboard widget backed up. I usually send it to people when they're setting up their new mac, because that one's still my favorite. It's a shame the dashboard has become somewhat of Apple's bastard child. Because that was my favorite way to use iStat. Menu looks a little too distracting/cluttered for my liking. And iStat mini seems a little too simplistic (at first glance). Anyways, thought my opinion might be interesting to you. Keep up the great work man!

            0 points