12 ms·
Super Tiny Website Logos in SVG
- abritinthebay 9y agoI love that people are rediscovering SVG I hope this gathers stream and forces Google (and others, but especially Google) to fix the bugs they have in the format
- tyingq 9y agoI 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 9y agoI wish that CSS could be applied to them consistently.
- abritinthebay 9y agoIt mostly can, outside of browser bugs anyhow. The browser bugs are a big complication however
- erdle 9y agoSVG is making a monster come back... and we absolutely need Gmail to get onboard.
- stinky613 9y agoCould 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.
- tyingq 9y agoI 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-pitfalls http://slides.com/sarasoueidan/tips-for-avoiding-common-svg-... Perhaps not all "bugs", but unexpected anyway.
- spiralganglion 9y agoHistorically, 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.
- abritinthebay 9y agoOne 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.
- NelsonMinar 9y agoI 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.
- kekub 9y agoI have been using https://simpleicons.org 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 <img> tags.
- edent 9y agoThat's a wonderful resource - thanks for sharing. I'm certainly going to incorporate them into future versions.
- aw3c2 9y agoYou can minify those a lot. I tried some on https://jakearchibald.github.io/svgomg/ https://jakearchibald.github.io/svgomg/ and got ~20%-30% without any visual changes.
- thinkloop 9y agoCool 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 https://github.com/allienworks/cryptocoins/tree/master/SVG
- maddyboo 9y agoYou can set the `fill` attribute on the `svg` tag to set the fill color, e.g. `<svg ... fill="#7C529E">...</svg>` I'm guessing that site just includes recommended color codes for your reference, but you're able to set the color to whatever you want.
- cokernel 9y agoCC0 is Creative Commons's license for dedication to the public domain: https://creativecommons.org/publicdomain/zero/1.0/ https://creativecommons.org/publicdomain/zero/1.0/
- thinkloop 9y ago
- aw3c2 9y agoVery cool! I would advise to try minifying with svgomg, some icons seem to benefit. Eg bitbucket.svg can be reduced by 20% without any visual change.
- edent 9y agoMost of them were already minimised with SVGO and svgcleaner. If you can make them smaller - I'd love a pull request :-)
- baybal2 9y agoDo you care about readability? Does ungzipped size counts or you assume that users will be using gzip? Here is DO logo that you can gzip down to 221b <svg role="img" aria-label="DigitalOcean" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" http://www.w3.org/2000/svg" fill="#0080ff"> <rect height="512" rx="15%" width="512" fill="#fff"/> <path d="M256,391v85a220,220 0 1 0 -220,-220h85a135,135 0 1 1 135,135 H51v-55h55v120h65V306h85z"/> </svg> Do you think it is ok to pull out newlines?
- edent 9y agoIn the readme, I've said that I want to keep newlines for readability. That helps with people learning about SVG. I'm not fussed about compressed size - but I'd certainly welcome a Pull Request if you've managed to shrink that icon.
- Bromskloss 9y agoHow about keeping readable versions in the repository, along with a script that compresses them? The compressed ones could be automatically served on a separate site.
- edent 9y agoCould be fun! Please send a pull request.
- ss64 9y agoSomeone should build a web service for delivering these social icons. They could place a random selection of 3 or 4 popular social icons on the page, and then, like AdSense the social sites could pay to get an increased number of placements, with a percentage paid back to the site owner.
- helenius 9y agoRemember to always (every time) set width/height for the <img> tag, otherwise it will fill the entire screen/container.
- ozaark 9y agoYes! Loading many sites without width/height set on mobile connections display a horrible jitter with logos and social icons polluting the entire screen initially.
- exodust 9y agoIn the case here with the Twitter logo, lack of height attribute causes the logo to look squashed on some oldish browsers. I imagine the addition of height would fix this.
- jordache 9y agoAt 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 agoYes there is
- MRSallee 9y agoYes, 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 agoBlack 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?
- mgalka 9y agoReally cool. I've always wondered why nobody was doing this. Just about every website in the world could benefit from it. Nice work!
- teej 9y agoIn 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.
- makapuf 9y agoyes, was also curious why : it's 16bits per channel color encoding instead of a paletted image.
- dawnerd 9y agoAnd if you run it through https://tinypng.com https://tinypng.com it should get down even smaller. PNG compresses surprisingly well when it’s basically two colors + alpha.
- Franciscouzo 9y agoWith the caveat that https://tinypng.com https://tinypng.com uses lossy compression.
- vladdanilov 9y agoPhotoshop: 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/X9DnJ https://imgur.com/a/X9DnJ TinyPNG 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 http://getoptimage.com).
- majewsky 9y ago> 92 colors I see 3 colors (blue, white, transparent).
- vladdanilov 9y agoThe rest are needed to keep anti-aliased shapes smooth.
- vanderZwan 9y agoI'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/ http://dmitrybaranovskiy.github.io/raphael/ [1] http://snapsvg.io/ http://snapsvg.io/
- deleted 9y ago[deleted]
- phaed 9y 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 9y agoIf you find a floppy disk or drive at all nearby :D
- amelius 9y agoBut 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 9y agoThe 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 9y agoThey 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 <img src… to display SVG images, as the article suggests. By using <svg… directly, you avoid extra requests, you gain the ability to manipulate them directly in the DOM, and to restyle them. https://github.com/ivanvotti/font-awesome-svg/tree/master/SVG https://github.com/ivanvotti/font-awesome-svg/tree/master/SV...
- grenoire 9y agoUnfortunately you cannot reuse the icons that way, which does end up being wasteful unless you use compression.
- EvilTerran 9y agoI believe you can define a <symbol> in one inline SVG, then <use> it in another, so that'd be a way to achieve icon reuse. Not sure how good browser support is for that, though - there's probably quirks.
- thinkloop 9y agoYou can reuse inline icons with JS - for example if you made a react component of it.
- deleted 9y ago[deleted]
- freshyill 9y agoThat’s incorrect. You definitely can reuse them using symbol and defs/use.
- firefoxd 9y agoWhere do we find a good SVG editor? That might be the reason the mass hasn't switched to svg.
- nicky0 9y agoSketch for Mac is excellent
- lordfosco 9y agoI 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 9y agoPerhaps Inkscape?
- IshKebab 9y agoInkscape 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 9y ago> confusing UI Anything particular you have in mind?
- CamperBob2 9y agoMost of the time, when I run InkScape to edit an existing .SVG, it's because I want to just select and drag a few vector endpoints a bit to one side or the other to make minor tweaks. I'd venture that's true for most users. However, it doesn't seem to be the default behavior. I always have to remember how to get into the right selection mode, because the authors seem to think I most likely want to drag the entire image around. Why I would want to do that, I can't imagine, but that's how it works. That's a problem for many common actions -- for instance, I normally want to resize the view box to enclose the content tightly before saving an edited file, so why is that common action buried multiple layers deep in the UI? File->Document Properties->Page->Custom size->Resize page to content->Resize page to drawing or selection->Seriously? It's almost easier to do this in a text editor. Finally, people who write apps that don't remember their previous desktop window size and position, but that instead auto-size themselves to cover the entire screen every time they're launched, should die in a grease fire. Unnecessarily-aggressive hyperbole aside, this kind of obvious forehead-slapping behavior is never good news because it means that the maintainers don't use their own app. All that aside, InkScape is really a very powerful application that could be a lot harder to use. A great deal of hard work has clearly gone into it, and at the end of the day it is free software, so it's hard to complain without seeming ungracious. If it weren't such a great app, it wouldn't be worth criticizing at all.
- chrisweekly 9y agoSlight 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#/ http://slides.com/sdrasner/svg-can-do-that#/
- Mindless2112 9y agoI'd say that's a sampling of how SVG went wrong. What we wanted was a vector image format; what we got was PowerPoint.
- CamperBob2 9y agoI don't understand this argument. The ability to do more complex stuff doesn't alter the fact that SVG is a perfectly reasonable vector image format.
- vortico 9y agoAmazing! With SVG being supported on all browsers you should care about today, it obsoletes icon fonts, which require the entire icon set to be downloaded. Anyone know of a FontAwesome-like project, ideally with a CDN, that serves SVG icons like Font Awesome has so including them in a website is easy and compact?
- vogt 9y agoAs a designer I always recommend https://feathericons.com/ https://feathericons.com/ as an alternative to font awesome. All SVG, all with uniform sizing and a pretty diverse selection - not as diverse as FA, but still. Very pretty and not as widely adopted as FA.
- jazoom 9y agoI use these and inline them: https://materialdesignicons.com https://materialdesignicons.com Huge selection of images.
- michaelbuckbee 9y agoNo CDN, but there's multiple repos of people taking the FontAwesome icons and converting them over to SVG. Here's the one I used: https://github.com/encharm/Font-Awesome-SVG-PNG https://github.com/encharm/Font-Awesome-SVG-PNG Also, the new "Font Awesome Pro" comes with all icons as SVG out of the box - https://fontawesome.com/ https://fontawesome.com/ Last, one annoyance (in the midst of many benefits) of using SVG instead of fonts as icons is that you can't change their color via CSS if you're including them via <code>img src='file.svg'</code> So I use BoxySVG. Boxy is to Illustrator as Acorn or Pixelmator are to Photoshop. A tightly focused editor that lets you do simple things (like edit colors) very rapidly and doesn't bog you down with a ton of extraneous features. https://boxy-svg.com/ https://boxy-svg.com/
- MayeulC 9y agoI am pretty sure you can change a lot of SVG properties trough CSS (use "currentColor" to change the color, for example). There was a discussion about http://slides.com/sdrasner/svg-can-do-that/ http://slides.com/sdrasner/svg-can-do-that/ some time ago, which gives some nice SVG styling examples.
- userbinator 9y agoI bet many of these would be even smaller in SWF, since that's a very efficient (bit-packed, and then compressed) binary format specifically designed for small filesize, as opposed to the textual XML of SVG (although SVG is not really "XML-ish" in the sense that path data is still a list of points, and not one-element-per-point.)
- microcolonel 9y agoSVG compresses reasonably well, especially if you're inlining it in a page with other SVGs, or using Brotli.
- CodeWriter23 9y agoI'd rather trade a little bandwidth for the increased security of not running Flash in my browser.
- foxhop 9y agoI wish I could submit my SVG, its not a hugely popular service but it seems like this idea could be expanded.
- darekkay 9y agoGitHub 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 https://github.com/blog/2112-delivering-octicons-with-svg
- tlb 9y agoJust to pick on the one I know best, the Y Combinator logo is way off. The corners shouldn't be rounded, and the Y is too big and its top branches are too thick. Correct version: http://www.ycombinator.com/images/ycombinator-logo-fb889e2e.png http://www.ycombinator.com/images/ycombinator-logo-fb889e2e.... this project: https://camo.githubusercontent.com/08ae881e8ce6d8f2278fa20d7ef2c3ef61c64361/68747470733a2f2f6564656e742e6769746875622e696f2f537570657254696e7949636f6e732f74696e792f6861636b65726e6577732e737667 https://camo.githubusercontent.com/08ae881e8ce6d8f2278fa20d7...
- escape_goat 9y agoA lot of these are logos that I had assumed to be registered trademarks. As such, they would only be usable under the terms of a licensing agreement with the owning company, terms which I had assumed would be pretty anal-retentive regarding the exact details of the representation. IIRC, Facebook has a specific art package with specific image files that one is suppose to use, and no other. On the one hand, this is pretty common knowledge. On the other hand, none of the responses so far have brought it up, and the logo website itself seems to think that the cited sources can license the use of the artwork in question. I do not quite know what to make of this.
- matthewmacleod 9y agoWhat you have said is simultaneously completely true and totally pointless. Yeah, we all know that brands have tediously anal rules about usage of their logos in particular. In practice, so long as you aren’t obviously abusing it, nobody is going to care. Have you seen some of the stuff what people do with social media logos??
- deleted 9y ago[deleted]
- deleted 9y ago[deleted]
- mozumder 9y agoMake sure you inline these in your HTML directly so you don't add an additional 1-2KB (or more) in headers for each access.
- londons_explore 9y agoWhen most webpages have a megabyte or more of javascript libraries, having a 20kb twitter icon which is probably cached doesn't sound bad really.