: 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

@Si6392903

Like everything else, you need to take decisions.

Here are some sample questions.

1) Does the image need to be vector? Is it going to scale up and down depending on something external like a media query? A logo for example.

2) Is the vector really optimized? Not too many overlaping shapes, not too many "layers" or objects one over another. Some kinds of maps can work in svg, but some are too complex and its better to deliver them as image. Try to avoid lines with thickness and open paths.

3) Do you really need to zoom it? Probably you have a mechanical design blueprint where you need to zoom in to see some value. In that case use svg.

4) Do you need to interact with it? select some zones and not others? You did that some years ago with area maps, but they do not scale. So it is a perfect candidate for a svg.

5) Do you need to animate them in some special way? you can built some with transparent png, but again individual pices works fine with svg too, for example if you need a morphing shape.

6) Do you want to relese the source images? In this case I do not think so, becouse they are your ilustrations, so it is safer for you to release a non editable one. PNG on this case.

At the end, it is your call.

Vote Up Vote Down

@Martha945

I wouldn't describe SVG as being a smaller image format. It really depends on the artwork ,but generally I'd say SVGs are usually bigger.

The advantage of SVG on the web is that it looks great at all sizes and can be scaled as needed. I particularly like using them instead of raster images so I don't have to make separate hi-dpi versions of graphics. The file size of SVG ends up being bigger than standard sized graphics, but smaller than the 2x Hi-DPI version. I think it's a nice compromise in file size and I don't have to maintain 2 sets of graphics.

I say save an SVG with all the art you want in it, place it in an HTML page then open it in a browser. Scroll and resize the window to see if you notice any performance issues.

Here is an example of a site that is mostly (maybe all) SVG and runs well: pbskids.org/
It was done with a library called snapSVG: snapsvg.io/
I haven't seen any bad/poor performing websites, but here's a SVG load test jsfiddle that lets you add animating squares to an HTML page: jsfiddle.net/inkfood/n6LZk/
I got to about 3000 squares before I saw a performance difference.

Vote Up Vote Down

@Cugini998

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.

Vote Up Vote Down

@Murray976

I'm no expert but I do know a little about SVG format:

As I understand SVG files have to be read/rendered by the browser. So the answer depends: if you are using complex SVG files with many points you are going to put a drastic load on your performance, but if you are using simple shapes with a few points you will not. A definite benefit of SVG is that it can be resized dynamically with no loss of quality (like you would get in bitmap files) — so if you are using multiple sizes of the same file; and especially if you are loading them on-demand, then SVG would be best.

Vote Up Vote Down