Super Tiny Website Logos in SVG(shkspr.mobi)
shkspr.mobi
Super Tiny Website Logos in SVG
https://shkspr.mobi/blog/2017/11/super-tiny-website-logos-in-svg/
120 comments
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 <img> tags.
You can minify those a lot. I tried some on https://jakearchibald.github.io/svgomg/ and got ~20%-30% without any visual changes.
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
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
CC0 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/
The point of CC0 is that in countries (like the US) with the concept of releasing works into the public domain—relinquishing all copyright claims on the work, that's what you are doing with CC0.
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.
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.
It seems like one of the most permissive licenses, is it taking over MIT?
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.
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.
CC0 can be used for source code. For example, the FSF lists it as a GPL-compatible free software license and states: "If you want to release your work to the public domain, we recommend you use CC0."
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...
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...
CC0 reverts to "Public Domain" in countries/jurisdictions where this is a thing. When this is not possibly it tries to legally define the closest thing possible.
"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 :)
"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 :)
You 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.
`<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.
Is there an easy way to generate SVG icons from image files (.png, .jpg, etc.)? Or are each of these SVG icons created by hand?
ImageTracer is a simple raster image tracer and vectorizer that outputs SVG, 100% free, Public Domain.
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
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 last night I was playing with Primitive [0], which tries to reproduce photographic images by building up layers of shapes. I found this via SQIP [1], was discussed on HN last week.
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...
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...
inkscape can generate them from bitmap formats.
I use vector magic on a Windows XP VM. I haven't been able to find a Linux/OSS tool that works as well.
What’s with the random (wrong) colors for most - but not all - of the icons?
That's a wonderful resource - thanks for sharing. I'm certainly going to incorporate them into future versions.
Huh, that Viber icon looks odd. Is it my browser or is it just poorly drawn?
Looks pretty close to https://www.viber.com/app/uploads/Icon_1024.png
for me
Just a little sheared if anything? Can always attribute to stylizing.
Just a little sheared if anything? Can always attribute to stylizing.
Yes, the concentric arcs are sheared–I'm seeing this on Safari, Chrome, and Firefox, so I think it's the image rather than my browser's style.
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.
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.
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
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).
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...
The original PNG icon was very clearly suboptimal at 20 225 bytes...
It appears to have the same problem as Photoshop where indexed images can only have 1-bit transparency.
You can also losslessly compress it down to 2 803 bytes: https://imgur.com/a/SunI7.
You can also losslessly compress it down to 2 803 bytes: https://imgur.com/a/SunI7.
Imgur converts everything both of you posted to JPEG...
What do you mean? It's serving me a PNG image.
Are you sure? Zooming in here I see JPEG artifacts. Imgur also often lies about the image format in the URL.
ImageMagick's `identify` claims it's a PNG:
$ 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.000Yes, I can reproduce that. I get served different versions depending on device/browser, and on my phone I got a 7883 byte JPEG!
> 92 colors
I see 3 colors (blue, white, transparent).
I see 3 colors (blue, white, transparent).
The rest are needed to keep anti-aliased shapes smooth.
With the caveat that https://tinypng.com uses lossy compression.
yes, was also curious why : it's 16bits per channel color encoding instead of a paletted image.
Now add in the @2x and, um, what, @3x? @4x?
A 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.
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.
[deleted]
What 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??
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]
Just 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.... this project: https://camo.githubusercontent.com/08ae881e8ce6d8f2278fa20d7...
Correct version: http://www.ycombinator.com/images/ycombinator-logo-fb889e2e.... this project: https://camo.githubusercontent.com/08ae881e8ce6d8f2278fa20d7...
Amazing! 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?
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?
No 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
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.
https://boxy-svg.com/
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.
https://boxy-svg.com/
I 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/ some time ago, which gives some nice SVG styling examples.
There was a discussion about http://slides.com/sdrasner/svg-can-do-that/ some time ago, which gives some nice SVG styling examples.
So the distinction is inlining SVGs vs referring to them like you would a png with an img src=filepath.svg|png in your HTML.
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...
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...
As a designer I always recommend 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.
Font Awesome 5 icons are available in SVG. However, it's still in beta and available only to backers via early access until it is released.
https://fontawesome.com/
https://fontawesome.com/
I use these and inline them: https://materialdesignicons.com
Huge selection of images.
Huge selection of images.
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
[0] https://github.com/blog/2112-delivering-octicons-with-svg
Remember to always (every time) set width/height for the <img> tag, otherwise it will fill the entire screen/container.
Yes! Loading many sites without width/height set on mobile connections display a horrible jitter with logos and social icons polluting the entire screen initially.
In 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.
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?
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?
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.
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.
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
Not bad
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.
It's a bit of a silly way to do it - and is probably more complex to render.
but easier to understand :)
404
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.
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.
> 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.
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.
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.
"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?
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?
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.
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.
For what it’s worth, JPEG is great at reproducing photos and terrible at reproducing sharp color translations in "simple" logos.
For SVG, stripped filesize is actually a fairly good indicator of complexity.
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/ 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.)
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.)
Yes there is
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#/
http://slides.com/sdrasner/svg-can-do-that#/
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.
What we wanted was a vector image format; what we got was PowerPoint.
I 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.
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 <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...
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...
Unfortunately you cannot reuse the icons that way, which does end up being wasteful unless you use compression.
I 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.
That’s incorrect. You definitely can reuse them using symbol and defs/use.
You can reuse inline icons with JS - for example if you made a react component of it.
[deleted]
Very 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.
Most of them were already minimised with SVGO and svgcleaner. If you can make them smaller - I'd love a pull request :-)
Do 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" 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?
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?
In 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.
I'm not fussed about compressed size - but I'd certainly welcome a Pull Request if you've managed to shrink that icon.
How 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.
Could be fun! Please send a pull request.
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/
[0] http://dmitrybaranovskiy.github.io/raphael/
[1] http://snapsvg.io/
Really cool. I've always wondered why nobody was doing this. Just about every website in the world could benefit from it. Nice work!
I 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.)
I'd rather trade a little bandwidth for the increased security of not running Flash in my browser.
SVG compresses reasonably well, especially if you're inlining it in a page with other SVGs, or using Brotli.
Where do we find a good SVG editor? That might be the reason the mass hasn't switched to svg.
I use https://inkscape.org/en/ on Linux. Works well enough for my needs.
Perhaps Inkscape?
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.
Using it for years. Never experienced any of the mentioned problems
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).
> confusing UI
Anything particular you have in mind?
Anything particular you have in mind?
Most 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.
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.
Thanks for sharing your comments. That's interesting.
> 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.
> 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.
Well for a start I can literally never find the option to show the tool docks (fill & stroke, align & distribute etc).
They're not in the View or Window menus.
They're not in the View or Window menus.
Adobe Illustrator is the standard.
Sketch for Mac is excellent
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.
When most webpages have a megabyte or more of javascript libraries, having a 20kb twitter icon which is probably cached doesn't sound bad really.
I wish I could submit my SVG, its not a hugely popular service but it seems like this idea could be expanded.
[deleted]
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.
EDIT: I mean the table.
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.
I 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
I hope this gathers stream and forces Google (and others, but especially Google) to fix the bugs they have in the format
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.
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.
I wish that CSS could be applied to them consistently.
It mostly can, outside of browser bugs anyhow.
The browser bugs are a big complication however
The browser bugs are a big complication however
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.
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.
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)
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.
Perhaps not all "bugs", but unexpected anyway.
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.
That’s one of many, but it’s one they’ve know about for years.
SVG is making a monster come back... and we absolutely need Gmail to get onboard.
Make sure you inline these in your HTML directly so you don't add an additional 1-2KB (or more) in headers for each access.
Someone 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.