SVG: 5 questions, 10 answers
Dudley Storey and Sarah Drasner explain why SVG has become a fundamental technology.
Retro (source: CDJ)
Leading up to the release of their books, I asked two of our authors, Dudley Storey (Using SVG with CSS3 and HTML5) and Sarah Drasner (SVG Animations) a few questions about SVG (Scalable Vector Graphics). SVG is a fundamental technology that has far more depth than most people realize, and the scope of their answers is revealing.
What is SVG and why is it important to today’s creators and developers on the web?
Sarah: In our age of responsive and with the proliferation of so many devices, having a graphics format that can stay crisp and change in size easily on any display without the need for image replacement is a game-changer. That, and it’s a living, breathing thing. You can reach inside and animate it, you can make it accessible, you can create sprites with it. It can be static and it can bounce and snap. I love how malleable SVG is.
Learn faster. Dig deeper. See farther.
Dudley: I like to call SVG “drawing with markup.” SVG uses tags and attributes similar to HTML markup to create vector images that can be scaled infinitely, at very small sizes, with the drawing integrated directly into the DOM. Combined, these features make them ideal for modern responsive sites and developers.
What do people typically get wrong about SVG?
Sarah: People tend to think that SVG is not well supported. This just isn’t so. Just search for SVG on caniuse.com, and you’ll see just how much support is out there.
Dudley: First, they tend to ignore SVG entirely, limiting their work to the three bitmap formats (JPEG, PNG, and GIF). Second, they don’t optimize the SVG that they have. Third, they don’t make it accessible.
What do you think is the coolest thing you can do with SVG?
Sarah: I love animating SVG. The fact that it offers a navigable DOM (unlike bitmap graphic formats, which are flat) means I can reach inside of it and move certain pieces around. Lately I’ve gotten into animating filters.
Dudley: That’s really difficult to say: I’m always discovering cool new aspects of SVG. I think the coolest work I’ve done recently is the planetary resonance and a scrolling SVG sunset.
What are a few of your favorite tips or takeaways for SVG?
Sarah: Don’t be shy about slapping some classes on pieces of an SVG DOM and altering them with CSS or JavaScript. I think people get really scared looking at the XML syntax, but you don’t need to know everything inside the SVG DOM before you start using it.
Dudley: First, know when and why to add width and height attributes to an SVG. Most vector illustration tools strip these from the SVG document during export (which makes the SVG responsive), but they can be very useful placeholders for SVG icons. If the CSS fails to load, the SVG will be presented at the size set by the width and height, rather than dominating the screen. Secondly, don’t think that SVG is only about vector graphics! SVG can easily integrate bitmap images to create unique effects.
Looking at the next calendar year, are there any specific speakers, conferences, sessions, books, etc. that you’re particularly excited about?
Sarah: I love Nadieh Bremer and Shirley Wu’s work on data sketches, so I’m really excited to see them speak at Open Vis Conf. I also love Chris Coyier’s Practical SVG book. In my humble opinion, he’s one of the best tech writers on the planet, and his book reflects this. He makes even nuanced subjects so approachable and fun to learn. I’m also looking forward to Amelia Bellamy Royds and Dudley Storey’s new Using SVG book as well.
Dudley: Honestly, I’m just looking forward to seeing what people create with SVG. I’m always amazed by its creative possibilities.
Sarah Drasner is an award-winning speaker, consultant, and staff writer at CSS-Tricks. She is also the co-founder of Web Animation Workshops, with Val Head. Sarah is formerly Manager of UX Design & Engineering at Trulia (Zillow). You can find Sarah on Twitter @Sarah_Edo.
Dudley Storey has been making web pages for almost the entire life of the web. An accomplished teacher, writer, and designer, he is the author of Pro CSS Animation (Apress, 2013). Dudley is also a contributing editor at Smashing Magazine and writes weekly web development articles on his blog thenewcode.com. You can find Dudley on Twitter @dudleystorey.