SVG 101
My last project as a student at Flatiron School involves a good bit of data visualization, something I had no real experience in beyond simple charts in excel. During my research on simple data visualization techniques, I came across several different charting libraries, many of which relied on SVG’s to create their charts and animations, which begs the question: What are SVG’s and why use them over other image formats?.
SVG’s are an XML based image format used to draw vector graphics. Similar to writing HTML, you can use predefined tags and attributes to add pictures and animations to your website. Unlike image formats that create images with pixels (raster graphics), SVG’s are created using vector graphics, which rely on mathematical formulas to create lines, curves, and various other shapes. There are several benefits to creating images using this technique as opposed to vector graphics, such as scalability and flexibility.
Modern websites need to accommodate a wide variety of screen sizes and resolutions, which creates problems when all of your images are made with raster graphics. SVG’s can be a solution to this problem, as they are mostly resolution independent.
Notice the difference in quality between the two images? This is because raster images contain a fixed number of pixels, which becomes readily apparent the more you zoom in. SVG’s don’t have this problem, as they are constructed using various geometric shapes.
SVG’s also have benefits related to file sizes of images
As you can see there is a significant difference between the size of an SVG vs. a PNG. This probably won’t make much of a difference if you just have a few images here and there on your site, but if your site happens to be image heavy, then cutting down on the file sizes of your images can be a good way of improving your SEO via increasing your page load speed.
In addition to scalability, SVG’s also allow for the creation of fairly complex graphics beyond the scope of what a normal <img> tag in HTML can do.
SVG’s allow for the creation of complex graphs/graphics, which makes it the image format of choice for many charting libraries (including D3, one of the most popular data viz libraries for JavaScript). As shown in the GIF above, a good charting library + SVG’s allow for the creation of fancy transitions and animations to make your data visualizations look very slick.
SVG’s are a tool just like everything else in web dev, and have pros and cons. One main con is potential complexity. D3 has a fairly steep learning curve, and can be overkill if you just want to create simple graphs/charts. As someone who’s been burned by this while building my final project, it’s worth looking into a higher level library that abstracts some of the manual graphic creation away. Another con is that photographs can’t be saved as SVG’s, which rules using them out for a substantial amount of images.
