1

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?

Improve this question
2
  • Hey 123D, welcome to GD. I voted to close this question as opinion based because it really does depend on what the product is and even then it's not a sure thing but up to opinion. Some thing you need to keep in mind are 1) Total load size and 2) performance. HTML and CSS is pretty capable and can likely do much of what you're imagining
    – Zach Saucier
    Jan 30, 2016 at 20:31
  • You say you make vector illustrations which to me would suggest your SVGs will likely be quite large and complex, possibly larger than an equivalent raster image. Test this yourself. Convert one of your vector illustrations to a high quality JPEG, and compare the file size with the SVG. You might get a surprise. Also note that the more complex an SVG, the more work the browser has to do to render it. In particular, SVG's with SVG effects will be more resource hungry than an equivalent raster image.
    – Billy Kerr
    Sep 21 at 9:09

6 Answers 6

Reset to default
3

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.

Improve this answer
1

Yes, SVG can cause performance issue if you have a lot of it depending on the content and length of the SVG tags.

If you have multiple SVG in your platform with large xml content then there will be rendering issue for the elements under the SVG file as the browser will be busy calculating the necessary math required to render it.

EG of SVG content and load illustrations.

< svg >..< /svg > 100 of this will load super fast without any performance issue.

< svg >..............< /svg > But 100 of this will cause heave performance issue, the higher the content inside the svg the more resource it need, your time to first bite will be horrible.

Bottom line use SVG only when you need to use it! or you can convert the SVG mark up (XML) to an SVG image without any loss to the quality.

https://svgomg.net/ this is a good place to get that conversation to SVG image from markups. It's not my work, but I have used it severally and it does the job.

Improve this answer
1
  • Welcome Dexter.
    – Rafael
    Sep 21 at 0:29
0

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.

Improve this answer
0

As far as I know you could have hundereds of svg's on a page without any problems, if they all are just a simple rectagles. If on the other hand you have just one svg that is massive in size, that alone can be an issue. It really depends on its complexity.

Things that could cause issues are:
– Svg's with effects or blending modes
– Auto-traced pictures
– Vector drawings made with complex paint brushes
– Other SVG's with too many paths
– SVG has multiple layers (this may cause them to load one layer after another, which may look odd)

As a general rule of thumb my recommendation would be to look at the file-size of a svg compared to a compresed jpg file. If the svg is signivically smaller then that's the best to use. If not use jpg unless it needs to be a svg for animation/zooming-in purposes.

Improve this answer
5
  • Probably comparing an SVG to a PNG, is a better option for that kind of graphics.
    – Rafael
    Sep 21 at 0:30
  • PNG should only ever be used when transparency in needed, which is relativly rarly on websites.
    – Julian Steinmann
    Sep 21 at 7:49
  • No. PNG is also a good option for flat design, like logos and flat illustrations. Jpg introduces artifacts on flat zones of color.
    – Rafael
    Sep 21 at 10:22
  • But jpg are a lot smaller, even with quality set to 100. While quality 100 jpgs are not technically loss-less, nobody will see any artifacts without 10x zooming into the picture...
    – Julian Steinmann
    Sep 21 at 16:43
  • Again, It depends on the content of the file. Here is a simple random image, and the weight of PNG and JPG with some compression(80). i.stack.imgur.com/jV84e.png i.stack.imgur.com/yrjG3.png The wording "should" I think does not apply. Using or not PNG is always an option.
    – Rafael
    Sep 21 at 20:54
0

Like everything else, you need to make decisions.

Here are some sample questions.

1) Does the image need to be a 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 overlapping 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 images. Try to avoid lines with thickness and open paths.

3) Do you really need to zoom in? 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 an SVG.

5) Do you need to animate them in some special way? you can build some with transparent PNG, but again individual pieces work fine with SVG too, for example, if you need a morphing shape.

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

In the end, it is your call.

Some years later... One way to test is actually to test complex SVG like the ones on this website. www.svgator.com (pretty cool)

Improve this answer
-1

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: http://pbskids.org/

It was done with a library called snapSVG: http://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: http://jsfiddle.net/inkfood/n6LZk/

I got to about 3000 squares before I saw a performance difference.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.