Past Meetup

Cracking the SVG Code with Brenda Storer

This Meetup is past

39 people went

Happy Cog

1315 Walnut Street, Suite 201 · Philadelphia, PA

How to find us

Check in at the desk - Happy Cog is on the second floor.

Location image of event venue


Cracking the SVG Code

SVGs: their code looks kind of familiar, but have you ever tried to edit one and up breaking the whole darn thing? I have been digging into the nitty gritty of SVG code, and it’s helped me optimize my own SVGs and get started more quickly with libraries that work with SVG like d3 and snap.svg. Here are a few topics I’ll cover:

• Understand the mystery of the “viewBox”, the SVG Coordinate system and viewport, even what all those numbers and punctuation within a “path” actually mean
• How much of all that stuff that Sketch, Illustrator, and Inkscape exports out is actually necessary? And what does it all do? (“xlmns”, “enable-background”, etc.)
• What are the CSS properties that I can use to style SVGs, and when, how and why?
• How can I use this information to animate SVGs?

Brenda Storer (

Twitter (

Brenda is a Silicon Valley native who moved to New York to escape the tech world, only to discover that tech is actually pretty awesome. She’s a designer at Thoughtbot ( in NYC where her role ranges from product designer, user experience and interface designer, to front end developer. She also teaches with Girl Develop It (, is a co-organizer for ManhattanJS (, and specializes in belting out 80's hair metal at karaoke.

Happy Cog (

is an American interaction design studio headquartered in Philadelphia with a publishing division headquartered in New York. Happy Cog’s influence is widespread due to Founder Jeffrey Zeldman’s well known work on establishing a set of web standards between all browser companies. Their design is heavily influenced not only by what is visually appealing, but also by best practices in web production. As such, Happy Cog’s main focus is to “never lose sight of the human being” using their products.