Build resilient systems at scale
October 12–14, 2015 • New York, NY

Tips for avoiding common SVG pitfalls

Sara Soueidan (Freelance)
1:15pm–1:55pm Wednesday, 10/14/2015
Location: Gramercy
Average rating: ****.
(4.09, 11 ratings)

Prerequisite Knowledge

Knowledge of HTML and CSS and some SVG


Even though SVG is not difficult to learn if you come from an HTML-CSS-y background, working with SVG is not as straightforward as working with HTML, because they are fundamentally different in many aspects.

We tend to work with SVG and expect it to behave similarly to the way HTML does, or maybe expect the tools, properties, functions, etc. to work with SVG just like they do with HTML. But, unfortunately, our expectations are not always met, and we are stuck trying to figure out what went wrong, and why what we expected to work simply didn’t. Why isn’t the element translated as I expected it to? Why are those coordinates wrong? Why aren’t my styles applied? Why isn’t the script working?

In this talk, we’ll go over some of the common pitfalls that you are likely to face when working with SVG. We’ll go over solutions to avoid these pitfalls, and workarounds for some of SVG’s quirks, as well as cover some powerful techniques that can take your SVG skills to the next level.

Photo of Sara Soueidan

Sara Soueidan


Sara Soueidan is a Lebanese self-employed front-end web developer, writer, and speaker, focusing on HTML5, SVG, CSS, and JavaScript. She has a bachelor’s degree in computer science, and works with companies across the globe to deliver websites for small and medium businesses. She also works as an outsourcing partner to various web and design agencies. Sara is the author of the Codrops CSS Reference and co-author of Smashing Book 5, which covers time-saving, practical techniques for crafting fast, maintainable, and scalable responsive websites. Sara recently won an O’Reilly Web Platform Award (April 2015), and is currently a nominee for a net award under two categories: Developer of the Year and Outstanding Contribution.

Comments on this page are now closed.


Picture of Sara Soueidan
Sara Soueidan
10/14/2015 10:50am EDT

Talk slides can be found here:

Thank you very much for listening!

Stay Connected

Follow Velocity on Twitter Facebook Group Google+ LinkedIn Group


More Videos »

O’Reilly Media

Tech insight, analysis, and research