A collection of icons for popular brands. Simples.
With an SVG icon system you can better meet accessibility standards, render higher quality visuals, and add/remove/modify icons in the library with ease. At Pivotal we’ve created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use.
Aligning SVG icons alongside text can be tricky, so it’s good to see how somebody else is tackling it.
SVG is one of the most powerful tools in a front-end developer’s arsenal, and while its browser support is excellent, there’s enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques.
In this episode we’ll look at what can be achieved by writing SVG by hand, simple effects that can add a lot to an interaction that only need a handful of lines of SVG + CSS. But we’ll also consider why it is that Inline SVG, in particular, is so much easier to work with than embedding SVG in other ways.
I’ve been using inline SVG for a while and I love the interaction and features it provides, but I hate seeing inline SVG in my code, it just looks ugly and reminds me of the bad old days of mixed content and presentation. I’m sure I’ll get over it, in time. Anyhow, this is a fab video and well worth a look.
The Inkscape project announces a new version 0.92 of its popular vector drawing software. New features include mesh gradients, improved SVG2 and CSS3 support, new path effects, interactive smoothing for the pencil tool, a new Object dialog for directly managing all drawing elements, and much more.
I’m looking forward to trying this, it looks like a fab release.
I’ve got no idea if the above is a valid method for animating a SVG, but it seems to work and I think it looks cool. I’ll probably use it with the
mouseout events, like the following pen.
Good tutorial and nice effect, shame about the lack of IE support (although not a huge problem these days). Also, see vivus.js for similar animation effects.
Finally, some social media sharing buttons that don’t suck.
I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate dropped dramatically and conversion was restored.
Some handy tips on optimising SVGs for performance. I’ve been trusting Inkscape for my SVG production needs, but after reading this, I might take a closer look at the files it creates.
WordPress is an excellent CMS “out of the box”, very easy to use and “just works” for the large majority of users. So why aren’t SVGs allowed in the first place? Why do we have to jump through hoops to make SVGs work?
Short answer: SVG files are extremely unsecure.
A good explanation of why WordPress doesn’t support SVGs. I’m a big fan of SVGs, but I can’t think that I’ve ever needed to upload any via the WordPress media uploader. I tend to use them for styling purposes, or as icons, but rarely (never say never) for content, so I’ve never considered this a problem.
That said, this post did make me wonder about how the Openclipart developers handle SVG security? I would imagine that they have to be even more cautious with their users as anyone can sign-up for an account and upload clipart in the form of SVGs. I’m not sure if the Openclipart site is open-source, I couldn’t find any details on the site, but it would be good to take a look.
Some good tips for aligning SVG icons with text. I’m currently using Font Awesome for a number of projects, but I’m considering the move to SVG icons, so these tips might come in handy.