darekkay - 32 minutes ago GitHub posted a write-up [0] on how they switched from icon fonts to SVG icons. It's worth a read.[0] https://github.com/blog/2112 -delivering-octicons-with-svg
jordache - 7 hours ago 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?
thinkloop - 1 hours 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.
agumonkey - 5 hours 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 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 - 5 hours 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- cir...It's a bit of a silly way to do it - and is probably more complex to render.
agumonkey - 5 hours ago but easier to understand :)
weego - 6 hours ago Yes there is
MRSallee - 6 hours 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 - 5 hours 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.
jordache - 3 hours 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?
eru - 5 hours 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.
mgalka - 7 hours ago Really cool. I've always wondered why nobody was doing this. Just about every website in the world could benefit from it. Nice work!
abritinthebay - 9 hours ago I love that people are rediscovering SVGI hope this gathers stream and forces Google (and others, but especially Google) to fix the bugs they have in the format
erdle - 7 hours ago SVG is making a monster come back... and we absolutely need Gmail to get onboard.
stinky613 - 7 hours ago Could you elaborate on the bugs in SVG? Are there any usability issues beyond the bugs? I tried some cursory googling 'why not to use svg', 'svg bugs', etc and didn't really find any common/recurring.
abritinthebay - 1 hours ago One of the most annoying bugs is Chrome?s utterly broken implementation of the Use element for SVG.That?s one of many, but it?s one they?ve know about for years.
spiralganglion - 6 hours ago Historically, the SVG-related systems in most browsers haven't seen a lot of love, so it's lagged behind other web technologies. This seems to be getting better ? I know Safari just landed a nice 3x performance improvement to one of the SVG filters.Here's a handful of issues that I still encounter, due to cross-browser differences. * You can't use the full range of CSS3 colors. * You can't set certain style properties via CSS (requiring the use of attributes). * You can't use self- closing tags for certain elements. * Differing behaviour when you set an attribute to "null" (which is fine, it's just a gotcha) SVG performance also varies wildly, more so than JS perf, HTML DOM perf, or CSS perf. This seems to correlate with the visual quality of the rendered result ? Chrome is the fastest but has excessive smoothing, poor sampling of scaled images, etc; Safari is the slowest but produces the cleanest result.
tyingq - 7 hours ago I mentioned the issue with gradients in another comment. There's also a good presentation here on other issues: http://slides.com/sarasoueidan/tips-for-avoiding-common- svg-...Perhaps not all "bugs", but unexpected anyway.
tyingq - 8 hours ago I wish they had implemented gradients in a way that didn't depend on uri fragments. Not an issue with standalone svg images, but it means you have to manage namespace clashes for inline svg images.
Tloewald - 7 hours ago I wish that CSS could be applied to them consistently.
abritinthebay - 1 hours ago It mostly can, outside of browser bugs anyhow.The browser bugs are a big complication however
NelsonMinar - 7 hours ago I love that SVG survived! It dates back to 1999 and was almost forgotten. When D3js first got started around 2010/2011 I was astonished that SVG support was so good in so many browsers; Mike had been using it even earlier with Protovis and Polymaps. Everything but IE had support as some sort of unnused vestigal thing. And then interactive visualizations started using SVG regularly and now it's vital again.
teej - 7 hours ago In case anyone else was suspicious of the 20k file size for a 512x512 PNG with essentially two colors - it's way off. I dropped it into Photoshop and exported as PNG and it spit out an identical file that weighs in at 6k.
dawnerd - 6 hours ago And if you run it through https://tinypng.com it should get down even smaller. PNG compresses surprisingly well when it?s basically two colors + alpha.
Franciscouzo - 4 hours ago With the caveat that https://tinypng.com uses lossy compression.
vladdanilov - 4 hours ago Photoshop: 6 705 bytes, 128 colors, 1-bit alpha only TinyPNG: 6 179 bytes, 92 colors Optimage: 5 761 bytes, 154 colors TinyPNG + Optimage (lossless): 5 226 bytes, 92 colors https://imgur.com/a/X9DnJTinyPNG tends to use fewer colors. But its compressor is pretty suboptimal. I could reduce the image further by 15.4% with the tool I'm making (http://getoptimage.com).
mrb - 2 hours ago 3545 bytes: https://i.imgur.com/dHIaRh1.png Used Gimp to convert to 4-bit paletted colormap, and processed through optipng.The original PNG icon was very clearly suboptimal at 20?225 bytes...
ricardobeat - 1 hours ago Imgur converts everything both of you posted to JPEG...
icebraining - 50 minutes ago What do you mean? It's serving me a PNG image.
majewsky - 3 hours ago > 92 colorsI see 3 colors (blue, white, transparent).
vladdanilov - 3 hours ago The rest are needed to keep anti-aliased shapes smooth.
makapuf - 6 hours ago yes, was also curious why : it's 16bits per channel color encoding instead of a paletted image.
kekub - 8 hours ago I have been using https://simpleicons.org for a while now. It is super light and looks great. License is CC0. Although I prefer inlining the icons over using tags.
edent - 8 hours ago That's a wonderful resource - thanks for sharing. I'm certainly going to incorporate them into future versions.
aw3c2 - 7 hours ago You can minify those a lot. I tried some on https://jakearchibald.github.io/svgomg/ and got ~20%-30% without any visual changes.
thinkloop - 2 hours ago Cool resource, what do the color codes mean? All the icons seem to be in black when you download them.I've never seen a CC0 license before, looking it up, but if anyone knows what its about, feel free to share!Here is a resource of svgs of cryptocurrency icons: https://github.com/allienworks/cryptocoins/tree/master/SVG
cokernel - 1 hours ago CC0 is Creative Commons's license for dedication to the public domain:https://creativecommons.org/publicdomain/zero/1.0/
thinkloop - 1 hours ago It seems like one of the most permissive licenses, is it taking over MIT?
semi-extrinsic - 1 hours ago As I understand it, "code licenses" like MIT and "content licenses" like Creative Commons have slightly different intended areas of application, and you shouldn't mix them. E.g. "linking" means different things for code and images.So you'd use e.g. CC0 for an icon set together with MIT license for some javascript/whatnot code that goes with your icons.
vanderZwan - 6 hours ago I'm still a bit sad that Rapha?l.js never quite caught on[0]. Same for its successor Snap[1]. I guess the main reason is that SVGs themselves weren't quite popular (and I assume there were also a few bugs) and take a proper illustrator to draw, compared to the ease of fetching JPG assets off the internet.[0] http://dmitrybaranovskiy.github.io/raphael/[1] http://snapsvg.io/
firefoxd - 5 hours ago Where do we find a good SVG editor? That might be the reason the mass hasn't switched to svg.
nicky0 - 5 hours ago Sketch for Mac is excellent
lordfosco - 4 hours ago I second that. While it definitely isn't on par with Adobe Illustrator regarding some very advanced features, Sketch is so rediculos easy to understand and beautiful to work with that it is nowadays my go to solution for design and layout work that was previously done with Photoshop, Illustrator and InDesign.
arca_vorago - 5 hours ago Perhaps Inkscape?
IshKebab - 4 hours ago Inkscape is ok. It has serious issues though - pretty terrible performance, confusing UI, still requires X11 on Mac, etc. Probably still the best free SVG editor but I'm not sure I'd go so far as to call it good.
Bromskloss - 3 hours ago > confusing UIAnything particular you have in mind?
Eduard - 3 hours ago Using it for years. Never experienced any of the mentioned problems
majewsky - 3 hours ago The performance issues are real. Just open a complex SVG, select a few thousand elements with a rubberband selection, and see how everything slows to a crawl as it tries to render the outlines. If that is not slow, try manipulating that selection (e.g. scaling, rotating).
edent - 5 hours ago I use https://inkscape.org/en/ on Linux. Works well enough for my needs.
[deleted]
phaed - 6 hours ago > You could fit over 3,000 of these images on a floppy disk.So small it will take you 20 seconds to count on an Abacus.
tibu - 3 hours ago If you find a floppy disk or drive at all nearby :D
chrisweekly - 5 hours ago Slight tangent, but for anyone coming late to the party, here?s a sampling of why SVG matters:http://slides.com/sdrasner/svg-can-do- that#/
Mindless2112 - 3 hours ago I'd say that's a sampling of how SVG went wrong.What we wanted was a vector image format; what we got was PowerPoint.
amelius - 5 hours ago But why, when I zoom in with my browser (using Ctrl-+) on that page, the icons don't look sharp?EDIT: I mean the table.
dave5104 - 5 hours ago The second Twitter icon (which is an SVG) looks very sharp when zoomed in. The table of other icons is a screenshot, not in SVG, so those won't look sharp when zooming in.
freshyill - 5 hours ago They aren't all under 1KB, but there a few repos on GitHub hosting all of the Font Awesome icons as SVG.Also, if you can avoid it, don't use By using