4 ms·

At what point does using a vector SVG is worse than raster image? Level of image complexit, requiring a ton of path elements? the Twitter logo can be create in

At what point does using a vector SVG is worse than raster image? Level of image complexit, requiring a ton of path elements? the Twitter logo can be create in basically 2 path elements. What if my logo is much more complex? Is there a threshold at the complexity of my image results in an SVG payload > than a properly compressed raster image?

weego 9y ago
Yes there is
MRSallee 9y ago
Yes, you can make an image that compresses to a smaller raster image vs. SVG, and complexity is a good way to do that. Especially possible if your image/logo isn’t just solid colors, but contains gradients or textures. I would guess, though, that if you make a logo that is larger as an SVG than a compressed raster, you’ve probably made a bad logo. Logos should be simple.
- Twirrim 9y ago
  > Logos should be simple. Agreed. Simple but important things to also consider with Logos include "What does it look like if printed in black and white?" It's a bit outdated advice in some regards, based as much on letter headers, fax machines, and news print adverts, as anything else. You'll notice that almost all memorable logos work really well in black and white, though.
  - eru 9y ago
    Black and white is a good exercise in general, eg also to check whether divers colourblind people will be ok. Or when you want to carve your logo into metal or wood etc.
  - jordache 9y ago
    "simple" that's a very subjective term. Is there a way to quantify simplicity in terms of SVG? Can we say number of points & number of paths? What other constructs can be used to measure complexity?
    - ovao 9y ago
      For SVG, stripped filesize is actually a fairly good indicator of complexity.
    - gvx 9y ago
      There isn't really. Any of those things could be used as proxies (plus file size, number of XML elements, rendering time, and more), but the thing we are really interested in is subjective anyway. File size after rendering to bitmap and lossy compression, like JPEG, might actually be one of the best quantitative proxies for simplicity, because lossy compression algorithms are designed to compress visual data that's interesting to humans well. Maybe an interesting experiment: take a whole bunch of logos and/or other images, let people rate them on a Likert scale or something on simplicity, and see if there's a correlation with JPEG file size.
      - egypturnash 9y ago
        For what it’s worth, JPEG is great at reproducing photos and terrible at reproducing sharp color translations in "simple" logos.
agumonkey 9y ago
That's my issue with the svg reflex, re-rendering complex geometry is more demanding than byte copy. That said https://edent.github.io/SuperTinyIcons/tiny/twitter.svg https://edent.github.io/SuperTinyIcons/tiny/twitter.svg is really really really simple. I had no idea svg.fill could encode such things, and expected a bad mix of overlapping ovals to create the illustration. Not bad
- edent 9y ago
  I have made a "circles only" version of the Twitter logo - it's at https://shkspr.mobi/blog/2017/05/the-twitter-logo-as-svg-circles/ https://shkspr.mobi/blog/2017/05/the-twitter-logo-as-svg-cir... It's a bit of a silly way to do it - and is probably more complex to render.
  - agumonkey 9y ago
    but easier to understand :)
- mgleason_3 9y ago
  404
thinkloop 9y ago
For tiny images like icons, where intricacies are hard to see, it's likely they will almost always be better in svg. Logos especially are generally by nature clean and simple to be able to quickly communicate brand through different mediums. From a practical sense, I'd be hard pressed to find a real logo/icon that wasn't better in SVG. Theoretically, of course there are limits, but the rule of thumb is strong: always use svg for logos and icons.
- slouch 9y ago
  Gradients are sometimes translated strangely--I used illustrator to cover some .eps graphics to svg that were given to me by some company and the gradients got funky.
  - Vektorweg 9y ago
    Experimental mesh gradients maybe?
egypturnash 9y ago
Yes, there is. I draw comics in Illustrator, and I have created files that are larger than the corresponding 300dpi TIFF. I think the first page in http://egypt.urnash.com/rita/chapter/viii/ http://egypt.urnash.com/rita/chapter/viii/ is one of them, that dense setting at the bottom is super complicated. (And it's a TON larger if I save the file as a pdf, Illustrator is doing a lot of high level abstraction to make this file smaller, that I’m not sure if SVG can handle.)

weego 9y ago

Yes there is

MRSallee 9y ago

Yes, you can make an image that compresses to a smaller raster image vs. SVG, and complexity is a good way to do that. Especially possible if your image/logo isn’t just solid colors, but contains gradients or textures. I would guess, though, that if you make a logo that is larger as an SVG than a compressed raster, you’ve probably made a bad logo. Logos should be simple.

Twirrim 9y ago
> Logos should be simple. Agreed. Simple but important things to also consider with Logos include "What does it look like if printed in black and white?" It's a bit outdated advice in some regards, based as much on letter headers, fax machines, and news print adverts, as anything else. You'll notice that almost all memorable logos work really well in black and white, though.
- eru 9y ago
  Black and white is a good exercise in general, eg also to check whether divers colourblind people will be ok. Or when you want to carve your logo into metal or wood etc.
- jordache 9y ago
  "simple" that's a very subjective term. Is there a way to quantify simplicity in terms of SVG? Can we say number of points & number of paths? What other constructs can be used to measure complexity?
  - ovao 9y ago
    For SVG, stripped filesize is actually a fairly good indicator of complexity.
  - gvx 9y ago
    There isn't really. Any of those things could be used as proxies (plus file size, number of XML elements, rendering time, and more), but the thing we are really interested in is subjective anyway. File size after rendering to bitmap and lossy compression, like JPEG, might actually be one of the best quantitative proxies for simplicity, because lossy compression algorithms are designed to compress visual data that's interesting to humans well. Maybe an interesting experiment: take a whole bunch of logos and/or other images, let people rate them on a Likert scale or something on simplicity, and see if there's a correlation with JPEG file size.
    - egypturnash 9y ago
      For what it’s worth, JPEG is great at reproducing photos and terrible at reproducing sharp color translations in "simple" logos.

agumonkey 9y ago

That's my issue with the svg reflex, re-rendering complex geometry is more demanding than byte copy. That said https://edent.github.io/SuperTinyIcons/tiny/twitter.svg https://edent.github.io/SuperTinyIcons/tiny/twitter.svg is really really really simple. I had no idea svg.fill could encode such things, and expected a bad mix of overlapping ovals to create the illustration. Not bad

edent 9y ago
I have made a "circles only" version of the Twitter logo - it's at https://shkspr.mobi/blog/2017/05/the-twitter-logo-as-svg-circles/ https://shkspr.mobi/blog/2017/05/the-twitter-logo-as-svg-cir... It's a bit of a silly way to do it - and is probably more complex to render.
- agumonkey 9y ago
  but easier to understand :)
mgleason_3 9y ago
404

thinkloop 9y ago

For tiny images like icons, where intricacies are hard to see, it's likely they will almost always be better in svg. Logos especially are generally by nature clean and simple to be able to quickly communicate brand through different mediums. From a practical sense, I'd be hard pressed to find a real logo/icon that wasn't better in SVG. Theoretically, of course there are limits, but the rule of thumb is strong: always use svg for logos and icons.

slouch 9y ago
Gradients are sometimes translated strangely--I used illustrator to cover some .eps graphics to svg that were given to me by some company and the gradients got funky.
- Vektorweg 9y ago
  Experimental mesh gradients maybe?

egypturnash 9y ago

Yes, there is. I draw comics in Illustrator, and I have created files that are larger than the corresponding 300dpi TIFF. I think the first page in http://egypt.urnash.com/rita/chapter/viii/ http://egypt.urnash.com/rita/chapter/viii/ is one of them, that dense setting at the bottom is super complicated. (And it's a TON larger if I save the file as a pdf, Illustrator is doing a lot of high level abstraction to make this file smaller, that I’m not sure if SVG can handle.)