> Free ‘plug and play’ set of SVG icons designed specifically for web projects. Available as a Node.js package or a Ruby gem (for Rails). Just use icon names with your templates and styles — and all the rest will be done automagically.
But I don't use node or Ruby. Where can I download them?
You might want to mention you are carefully working around a slew of webkit bugs.
1) Rather than efficiently referencing a single sprite.svg, the svg source must be inefficiently inlined, page after page.
2) Rather than use SVG's animated transforms, the spinners must be animated using CSS instead. Don't forget the CSS dependencies or the sprites won't animate!
3) Everything is flat. Not because that's the style, but because webkit won't properly render gradients, drop shadows, inner shadows, etc.
But hey, at least webkit does kinda work with <use> that reference an external file. I just checked, and Chrome/blink doesn't work at all. It seems Firefox doesn't do animated transforms anymore. It did once. Opera (before it switched to blink rendering engine) was the only browser that worked nearly flawlessly with SVG.
SVG would be so great, if it actually worked. Why do we need ruby/node to do this? See above.
I was just about to ask this, and I'm glad that someone else did. SVG is not tied to any one programming language. I don't understand why the repo tied to this page is not just a folder of icons and perhaps another folder of CSS.
There are some reasons. I'll try to describe them shortly.
Usually it is important to color and resize the icons depending on situation. That's why you can't just put the SVG into your project. And that's why we decided to make a sprite and to use inline SVG.
But raw inline SVG isn't the most convenient way of SVG graphics using. That's why we have written a couple of helpers.
To me it would be convenient to have a single zip file packaging all the svg in one archive. Well a 7z archive would be even better but it seems most people are clueless about 7zip.
Fair enough, but that's like telling a normal person he can download a Open Document Format document: It's probably not going to be very useful communication.
As a (non Rails, non Node) developer, I will probably not bother looking into how I can extract things from a proprietary Adobe Illustrator-file when I don't have Adobe Illustrator.
Nice to see SVG continuing to gain traction. I've almost entirely eliminated PNG from new work. For the (still fairly common) browsers that don't support SVG, I either use a simple bit of Javascript to replace the SVG references with PNG fallbacks, or—if the image is referenced via CSS—I can do it entirely with CSS's built-in fallback mechanism.
So far, I've been using iconmonstr —http://iconmonstr.com/ —for my icon source. He has a large variety of high-quality icons available as SVG or PNG.
Not exactly SVG <script> tag makes it slightly malicious. If you don't actually inspect the contents of your SVG file. Yes SVG supports executing javascript internally.
I originally thought this post was going to be about that as a few blog posts have popped up about the malicious things you can do with SVG.
Thanks for the iconmonstr.com link. I've been searching for a while for libre-licensed smileys and it's surprisingly hard to find a set that doesn't look creepy.
According to Eisenberg & Bellamy-Royds' (excellent) "SVG Essentials", you should be able to create a fallback by using an <object> tag. Assuming that works (I haven't tried it), it could be a more direct approach than Javascript.
The <object> element is the general-purpose way of embedding external files in HTML and XHTML... Any content in between the [start and end tags] will be rendered only if the object data itself cannot be displayed.
It seems that using of <object> - not the best solution. For example in construction like
<object data="image.svg" type="image/svg + xml">
<img src="fallback_image.jpg" />
</object>
fallback image will always be loaded. To avoid this you need to use additional tricks like conditional comments... We need some more elegant trick to do that :)
Interesting idea, and I don't doubt that it would work (though I also haven't tried it).
I prefer to keep my HTML semantic when I can, and <img/> is more accurate than <object/>. Since SVG support is now over 90% of deployed browsers, I'd rather use Javascript for the edge cases.
Resolution independence is the main reason. No matter what the screen density, the images will look sharp. And, there's even the possibility that rendering engines can use their own tricks (such as sub-pixel rendering) to make it look even better (though I'm not sure if any browsers actually do this).
File sizes can be better (though they're occasionally worse), and I'm not doing anything fancy enough to be straining any [CG]PU made in the past decade.
Also, I really like the fact that the image format more closely represents the actual intent of the image creator. "Draw a line from [ax, ay] to [bx, by]" is much more accurate than "Draw a pixel at [ax, ay], then draw a pixel at [ax+1, ay+2], then draw a pixel..."
Few do, but creating SVG on the fly is also much more straight forward than other formats (no need to learn a specific image library). I've seen people do graphing engines which generate an SVG graph. Although this benefit is a lot less beneficial now when we have canvas support in a lot of browsers.
SVG is plain text XML after all. Not binary blobs.
Opera Mini goes through their own proxy essentially. Their goal was to minimize mobile bandwidth but the net effect is bypassing censorship. I work at a public high school and this browser is very popular with the kids on their phones for this reason. There is a good article about it here http://en.wikipedia.org/wiki/Opera_Mini
Over 3% of the overall market (thanks to Windows XP/IE 8) and over 9.1% of the Android ecosystem, ouch.
Fortunately once 2.3 and below disappear we won't have this problem again with Android, as 4.0 and above are Google Chrome for Android supported (and update via the Play Store). No more tying the OS version to the browser version, which was always a terrible idea (looking at you Microsoft!).
> No more tying the OS version to the browser version, which was always a terrible idea (looking at you Microsoft!).
I mean, this hasn't really been the case ever. IE versions did historically only come out with new OSes, but once out, could be downloaded on the previous few OS versions. So I wouldn't call that tying the versions together.
Starting with IE2, which was included with Windows 95 OSR 1 and Windows NT 4.0 but compatible with 3.1 and stock 95, and going all the way to the latest version, IE11, which was released with 8.1 and Server 2012 R2, but can be installed on 7 and Server 2008 R2.
> I mean, this hasn't really been the case ever. IE versions did historically only come out with new OSes, but once out, could be downloaded on the previous few OS versions. So I wouldn't call that tying the versions together.
People on Windows XP cannot install Internet Explorer 9, 10, 11, or 12. People on Vista cannot install IE 8. People on Windows 8 cannot install IE 9.
Explain to me how this isn't tying one thing to another thing? If IE was stone alone it likely would be backwards compatible with XP.
> Starting with IE2, which was included with Windows 95 OSR 1 and Windows NT 4.0 but compatible with 3.1 and stock 95, and going all the way to the latest version, IE11, which was released with 8.1 and Server 2012 R2, but can be installed on 7 and Server 2008 R2.
They implement a single OS version backward compatibility, good for them. It doesn't disprove that the two are tied together. The fact you cannot install IE 9 on XP but can install Chrome or Firefox, kind of hurts your case.
Just like how Firefox doesn't support XP and XPSP1. At some point, old OSes won't be supported, that's just how software works, it takes extra time to support older OSes. Microsoft only supporting one or two previous OSes doesn't suddenly tie the OS version to the browser version. If Microsoft only supported ONE OS per browser, then sure, but if you can update (even if it's limited to a few versions), then the two are not directly tied.
I'm always confused by these very limited icon sets. It seems like every real-world project will immediately hit a wall where something basic isn't included. I'm using the commercial Streamline icon set (http://www.streamlineicons.com/) and run into limitations even with that.
I guess you have to start somewhere? But you are correct, this is the reason I will not use this in my projects. I try to bookmark these projects and look back on their progress but I still just use fontawesome.
Haven't seen an icon set before with integrated "spinner" elements. Really helps keep the UI consistent (although I'm not sure about the oroborous-lookin' ei-spinner-3). I'd really love to see more icon sets take a stab at creating a coherent "look" like this one does.
@davexunit you’re absolutely right. We’re preparing the next list of download options:
* SVG (optimized sprite)
* Sketch
* Illustrator CC
* Illustrator CS
Guys, this is almost completely off-topic, but I need to ask. You see, I'm not a designer, so I have no idea how all this stuff is being made, but I somewhat can draw and lets imagine I found your project so inspiring that I'm ready to spend quite a lot of time working on unfamiliar ground in order to contribute. What should I do?
What I really did non understand was the changing colors. It happened (by chance), while I was clicking (or so it seemed to me) and I wondered, what I had done, as the contrast really suffered from the light yellowish tone.
I would have preferred a color selection method, that would allow me to choose, if I would want to change the color.
It's very painful to look at, please disable it. My brain was trying hard to figure out the color for about 20 seconds, before I realized the color is changing. Especially if I click S-M-L buttons at the moment color has changed.
It looks like you have to include the entire icon library into your web app (150KB from what I see in DevTools) in order to use this tool. If this is true, this is a big performance fail and the authors should provide a workflow for building custom assets that only include the icons that the web app intends to use.
I thought this was going to be something funny like icons that take 10 seconds each to render. I guess SVG doesn't support procedural generation like Postscript, so there probably isn't any way to do that besides using huge files, which would be a dead giveaway.
They scale natively in the browser - the S, M, L buttons link to jQuery that adds classes .icon--m (or whatever) that alters the container size, the SVG scales to the size of the container.
These are quite nice. I was able to import the entire .svg set into icomoon and incorporate a select few into my icon set. The only issue is that they render slightly smaller than my normal icons, so I need to adjust the font size accordingly.
I've seen that spinner before and I always felt it had a rotating quality rather than the nice transitioning/flowing quality that the others have. I think you're right, it's weird because it seems like it rotates eccentrically.
> Free ‘plug and play’ set of SVG icons designed specifically for web projects. Available as a Node.js package or a Ruby gem (for Rails). Just use icon names with your templates and styles — and all the rest will be done automagically.
But I don't use node or Ruby. Where can I download them?