Experts Blog

Interview with Sara Soueidan: SVGs – The synergie between drawing and coding

  • Nicole Buri

As a diamond sponsor of the Frontend Conference Zurich on 1 and 2 september, we had the exclusive opportunity to conduct interviews with selected speakers. They shared their experiences and opinions about the exciting interplay between design and technology. Thank you for the inspirational food for thought!

Sara Soueidan – Freelance Front-End Web Developer

About Sara

You are one of the most influential proponents of using SVGs (Scalable Vector Graphics) in responsive web design. How did your fascination with this asset start?

I fell in love with SVG because I was fascinated with the idea of controlling the contents of an image with code. As a teenager, I used to draw a lot of animated manga characters and, for a few years, wanted to become a cartoon animator. With SVG, I found the ability to literally animate images that I can draw on a conceptually infinite canvas. And even though I’m not entirely focused on animation these days, I still absolutely love the fact that I can draw using code. SVG gives me the ability to use one passion of mine (coding) for another (drawing). So instead of drawing on pen and paper, I now draw on screen, using code. I just love that. And SVG images look *really* good, so that’s an added bonus.

What are the key benefits of using SVGs for icons, e.g.?

SVG images are crisp. They look gorgeous on both high and low resolution screens alike. They are images, which means they provide a more semantic approach to marking icons up, and since an SVG image is also an XML document, we get all the benefits of controlling the contents of the image using CSS and JavaScript, thus we get the ability to style and script the contents of the image to our heart’s content. The contents of an SVG image are also accessibility-friendly, which means that they can also enhance the experience for users using assistive technologies. These are possibly the main advantages to using SVG over other image formats and over icon fonts, for example.

What is the most exciting development with regards to SVGs? What can we expect for the near future?

The most exciting thing about the development of SVG is that it’s not finished yet! It’s still very much work in progress, just like much or most of the Web, really. There are some very bright people working behind the scenes, writing specifications, suggesting, adding and implementing new features that are currently missing in SVG and that would make working with SVG a whole lot easier in the future. There are still some limitations to what can be done in and with SVG, and many of the new features address these limitations. We, as developers, also play a role in helping to push these new features forward and even suggesting new ones that would solve our real world problems. SVG2 brings a lot of new features that are too many to list here, but it suffices to say that the future is looking quite exciting for SVG and for the Web in general. I’m very much looking forward to it.