Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: svg

Align SVG Icons to Text and Say Goodbye to Font Icons image/svg+xml

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 image/svg+xml

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! image/svg+xml

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.

High Performance SVGs image/svg+xml

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) image/svg+xml

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