Tags: svg

Simple Icons [↗]

A collection of icons for popular brands. Simples.

Align SVG Icons to Text and Say Goodbye to Font Icons [↗]

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.

Front End Center – Why Inline SVG is Best SVG [↗]

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.

Inkscape Version 0.92 is Released! [↗]

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.

SVG logo animation: Man on a rock, floating in space, waving

I was looking at my site’s SVG logo and I thought to myself, it’d be cool if the little dude would offer up a little waving arm. So, I played around with some JavaScript and came up with the following pen.

See the Pen Man on a rock, floating in space, waving by Philip Newborough (@corenominal) on CodePen.

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 mouseover and mouseout events, like the following pen.

See the Pen Man on a rock, floating in space, waving: hover by Philip Newborough (@corenominal) on CodePen.

SVG Line Animation for the Uninitiated [↗]

Today, we’re going to be animating an illustration created in Adobe Illustrator, using SVG and CSS. We’ll use a technique popularized by Polygon in their reviews of the Playstation 4 and Xbox One.

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.

Sharingbuttons.io [↗]

Super fast and easy Social Media Sharing Buttons. No JavaScript. No tracking.

Finally, some social media sharing buttons that don’t suck.

High Performance SVGs [↗]

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.

SVG uploads in WordPress (the Inconvenient Truth) [↗]

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.

Via CSS-Tricks

Tips for Aligning Icons to Text [↗]

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.

◀ Older