Decoded Chats – Sarah Drasner on SVG

In this edition of Decoded Chats we talked with Sarah Drasner (@sarah_edo) live at SmashingConf Freiburg about SVG and how this rather old file format managed to become the new hotness.

hxI9M6He

Sarah is an award-winning speaker, consultant and writer for @Real_CSS_Tricks. Cofounder of webanimationworkshops.com, formerly working for Trulia (Zillow).
She has a lot of code examples to play with at http://codepen.io/sdras/. She is about to release her first book for O’Reilly called “SVG Animations”. You can find her on the web at sarahdrasnerdesign.com.

The video follows:

If you prefer to have an audio version, you can download it here (MP3, 24MB)

We asked Sarah a lot about SVG, how to use it and the current state of tooling. Here are the questions in detail:

  1. SVG used to be a major “this is the future of the web” and then it vanished for a while. What is the reason of the new interest in a format that old?
  2. Tooling in SVG seems to be still lagging behind in what Flash gave us. Are there any good tools that have – for example – a full animation timeline?
  3. SVG syntax on first glance seems rather complex due to its XML format and lots of shortcut notations. Or is it just a matter of getting used to it?
  4. Coordinate systems seem to be easy to understand, however when it comes to dynamic coordinate systems and vector basics people get lost much easier. When you teach, is this an issue?
  5. What about prejudices towards SVG? It is rumoured to be slow and very memory intense. Is this true?
  6. Presets of tools seem to result in really large SVG files which is why we need extra tools to optimise them. Is this improving with the new-found interest in SVG?
  7. There seems to be a “war of animation tools”. You can use SVG, CSS Animations, The Web Animation API, or JavaScript libraries. What can developer do about this? Should we learn all of them?
  8. There are security issues with linking to external SVG files which makes them harder to use than – for example – images. This can be discouraging and scary for implementers, what can we do there?
  9. Does SVG live in the uncanny valley between development and design?
    Is there one thing you’d love people to stop saying about SVG as it is not true but keeps coming up in conversations?

3 Comments

  1. Pingback: Decoded Chats – fourth edition featuring Sarah Drasner on SVG | Christian Heilmann

  2. I enjoyed the talk as a beginner in svg.
    Here are some of the links referenced in the talk

    Sarah Drasner CSS tricks high performance SVG, Aug 2016
    https://css-tricks.com/high-performance-svgs/

    Chris Coyier
    eg
    https://www.youtube.com/watch?v=tsGa-gcckwY
    https://css-tricks.com/video-screencasts/147-starting-react-powered-comment-form/

    cleaning up svg export (if needed)
    svgomg
    https://jakearchibald.github.io/svgomg/

    Dimitri Baranovskiy
    You don’t know svg
    https://www.youtube.com/watch?v=SeLOt_BRAqc
    also did Raphaël—JavaScript Library
    https://dmitrybaranovskiy.github.io/raphael/

    Greensock animations
    http://greensock.com/

Leave a Reply

Your email address will not be published. Required fields are marked *