Rasterizing SVG Animations
How I avoided relearning software (and gained some superpowers) by exporting my SVG and GSAP animations to bitmap sprites.
SVG, Page 2
CSS Circles
I accidentally became Cloud Four's resident expert on dynamic circular containing elements. Here are my tips and tricks.
A Quick Update on Our SVG Icon Process
Our techniques evolve with each new project, and SVG icons are no exception!
An SVG Wish List
It's no secret: I love SVG. But it isn't perfect. Here are some features I hope eventually come to the standard, if not in SVG 2 then in some future successor (or even a preprocessor).
Cropping Image Thumbnails with SVG
Many techniques for cropping image thumbnails on the front-end require explicit dimensions, which is less than ideal for responsive design.
Responsive Logo Composition With SVG
Logos are an ideal use-case for SVG. Because they’re typically designed for reproduction and versatility, they’re almost always vector to begin with. SVG’s support of CSS and media queries means we can adapt brand…
Simpler SVG Icons
As a follow-up to my post discouraging the use of icon fonts, I recently wrote about the SVG icon process we’ve been using at Cloud Four. While most of the feedback I received…
Case Study: Our SVG Icon Process
Update (July 2019): Our process has changed quite a bit since this article was written. Check out our latest update! When I wrote about why you shouldn’t use icon fonts in your next…
SVG 101: A Gentle Introduction
Fun fact: Cloud Four’s design team really digs SVG. Our enthusiasm for the image format accumulated gradually over many months, thanks in large part to Sara Soueidan’s tireless documentation of its most mysterious features…
Media Queries in SVG images
“Wait? What was that Bruce Lawson just said?” That was my reaction last week as I listened to the audio from Bruce’s presentation at Responsive Day Out conference. What had Bruce said…