How much SVG is too much SVG?


I make vector illustrations and I also do a little bit of web design. I really want to combine the two. I have some ideas for some image heavy websites that use vector images in SVG format, and I basically want to experiment and play around with some ideas.

I've read that SVG is a good format because they're small in size, but I've also been told that there's a limit to how much a browser can take, and therefore maybe it's best to go easy on the SVG.

So Im wondering if anyone has any thoughts, or examples of SVG websites that have got the balance right? Or any examples of sites that use too much.. I'm just trying to see what people's general views are on this. I think a heavily vectored website could look pretty awesome, but how practical is it?

1/30/2016 6:39:00 PM

SVG is not a particularly good format, not entirely terrible either*. Its just the only vector format you'd expect to work on a webpage. Basically your choices for delivering vector content to the masses are, SVG or PDF.

Since all the other competing vector formats including PDF and EPS are much less verbose than SVG, it can hardly be said that SVG is small. Granted that, a SVGZ file can often be much smaller than a bitmap (raster) image format. But that is just the nature of vector graphics, when the illustration is simple. Conversely it is certainly possible that a vector is bigger than the pixel based graphic if its very complex, or badly done.

The main problem with vector images is that you end up with the programmers problem. You see, browsers implement the rendering differently. So now you end up with needing to test the image in many different browsers for rendering flaws. Also you must pay attention to possible conflation artifacts that differ from browser to browser, which affects how you should build your vector files. While not as bad as it sounds it certainly takes some experience to get it right in some cases. The only way to know what is too much is to test it on different devices.

I would avoid the effects layer of SVG for the time being. Pixel based images are just simpler to deal with, and have better support in browsers. On the other hand you can not compose your stuff as freely as in SVG.

The great downside of SVG is similar to any vector content. Your delivering the viewer a much more high fidelity image that is much closer to your original source. This means that the other user can get high quality prints and has more or less as much ease of editing as you would unless you invest heavily in trying to make this harder. But then all conflation artifacts would be even worse, and in the end the person stealing is just slightly discouraged.

It is best not to dwell much on this downside. In many cases a competent illustrator would copy your style with little work. Besides art that's not shared is not art, it is fantasy.

* Design by committee, at its best.

1/31/2016 1:05:00 PM