Super Tiny Website Logos in SVG
shkspr.mobi
shkspr.mobi
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
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.
https://www.gnu.org/licenses/license-list.en.html#CC0
Creative Commons themselves have published a FAQ entry on the matter:
https://wiki.creativecommons.org/wiki/CC0_FAQ#May_I_apply_CC...
"Public Domain" in particular means that the author distances themselves entirely from the work and all the rights pertaining to it. You don't need to credit them, I believe you could even claim it as your own (that'd be ethically dishonest IMHO, but legally fine). Second, the author also distances themselves from any responsibilities regarding this work (such as accuracy, fitness for any purpose or safety).
From what I've learned about copyright and IP law (extracurricular course next to my CS education, highly recommend if you get the opportunity) and reading, it's especially these last two points that are sometimes (in some jurisdictions/countries) difficult to get rid of or distance yourself from, as an creator. They don't always allow it. For instance (someone correct me if I remember this wrong), in the Netherlands a creator cannot fully distance themselves from the right to claim "I created this". Meaning that ghost-writing is contractually not possible and relies on the honour of the ghost-writer to keep their mouth shut. It's a bit of a vague thing and we didn't delve too deeply into that example. It's generally a minor thing.
Same goes for whether a creator can ever fully distance themselves from any responsibilities over the work they created. I can imagine some jurisdictions may not allow that either. I'm not sure how that works in NL (was not covered in the course).
Anyway in this sense, CC0 is a lot like the WTFPL without the profanity, I guess :)
In countries where you can't legally release works into the public domain, CC0 is a license that tries to do as much as it can through a license in those countries.
`<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.
I haven't tried this with line art like icons or logos. I usually just hand-optimize simple ones, then run them through svgo [2].
[0] https://github.com/fogleman/primitive
[1] https://github.com/technopagan/sqip
[2] https://github.com/jakearchibald/svgomg/blob/master/README.m...
Available in JavaScript (works both in the browser and with Node.js), "desktop" Java and "Android" Java:
https://github.com/jankovicsandras/imagetracerjs
https://github.com/jankovicsandras/imagetracerjava
https://github.com/jankovicsandras/imagetracerandroid
You can use svgo to optimize the SVG afterwards: https://github.com/svg/svgo
Just a little sheared if anything? Can always attribute to stylizing.
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).
I see 3 colors (blue, white, transparent).
The original PNG icon was very clearly suboptimal at 20 225 bytes...
$ curl -OL https://i.imgur.com/dHIaRh1.png
$ identify dHIaRh1.png
dHIaRh1.png PNG 512x512 512x512+0+0 8-bit sRGB 3545B 0.000u 0:00.000You can also losslessly compress it down to 2 803 bytes: https://imgur.com/a/SunI7.
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.
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??
Correct version: http://www.ycombinator.com/images/ycombinator-logo-fb889e2e.... this project: https://camo.githubusercontent.com/08ae881e8ce6d8f2278fa20d7...
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?
Huge selection of images.
Here's the one I used: 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/
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.
There was a discussion about http://slides.com/sdrasner/svg-can-do-that/ some time ago, which gives some nice SVG styling examples.
It's handy to just treat them as you would images, but you lose some flexibility wrt being able to manipulate them via CSS b/c the browser now "thinks" of them like an image.
This SO post has a clever workaround (with I'm sure more caveats wrt performance, etc) that will auto-inline your svgs that you need to manipulate so you can get a best of both worlds type situation going.
https://stackoverflow.com/questions/24933430/img-src-svg-cha...
[0] https://github.com/blog/2112-delivering-octicons-with-svg
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?
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.
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.
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?
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.
Not bad
It's a bit of a silly way to do it - and is probably more complex to render.
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.
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/ 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.)
What we wanted was a vector image format; what we got was PowerPoint.
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/SV...
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" 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?
I'm not fussed about compressed size - but I'd certainly welcome a Pull Request if you've managed to shrink that icon.
So small it will take you 20 seconds to count on an Abacus.
Anything particular you have in mind?
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.
> the authors seem to think I most likely want to drag the entire image around.
I don't think that is the default, unless the whole image happens to have been grouped into a single element, which might of course be the case.
They're not in the View or Window menus.
EDIT: I mean the table.
I hope this gathers stream and forces Google (and others, but especially Google) to fix the bugs they have in the format
The browser bugs are a big complication however
Perhaps not all "bugs", but unexpected anyway.
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.That’s one of many, but it’s one they’ve know about for years.