Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects.

Fonts are vectors, so you don’t have to worry about resolution. They benefit from the same CSS properties as text. As a result, you have full control over size, color, and style. You can add transforms, effects, and decorations such as rotations, underlines, or shadows.

Table of Contents

When you were small, haven’t you ever dreamt of becoming the commander of a space mission? Of exploring outer space and seing the Earth from above? Well, you might not have made it into an actual space shuttle, but maybe you still carry this

Generating SVGs from images can be used for placeholders. Keep reading!

I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.

During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.

Color is pretty good for separating things. That's what your basic pie chart is, isn't it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination.

Forms have always been notoriously difficult to style with CSS, but there are several little-used selectors that give us significant power to style inputs and surrounding elements. Some of these are relatively new, while others have been available for quite some time.

The first selector is relatively new and doesn’t have complete browser support yet. However, this seems like something that could easily work as a progressive enhancement. The selector allows us to detect whether a placeholder is currently visible to the user. This could come in handy if we want to dynamically hide and show the input’s associated label.

Forms have always been notoriously difficult to style with CSS, but there are several little-used selectors that give us significant power to style inputs and surrounding elements. Some of these are relatively new, while others have been available for quite some time.

The first selector is relatively new and doesn’t have complete browser support yet. However, this seems like something that could easily work as a progressive enhancement. The selector allows us to detect whether a placeholder is currently visible to the user. This could come in handy if we want to dynamically hide and show the input’s associated label.

To make things easier, let’s break the animation down. It’s basically just different colour rectangles with border radii, expanding from left to right, and then scrolling upward after a certain delay.

For the purpose of this post, I’ll seperate the animation into two main parts. The first part will deal with getting the rectangles to expand from left to right, showing one line after another. The second will deal with the scrolling motion.

1 – Getting Started with SVG

As I mentioned earlier, SVG is just code. I don’t usually start a website by typing out the HTML from scratch, I use a boilerplate, or a generator to save time. In this case, I want to use an image editor to get started, providing me with the “boilerplate” SVG code, and then I can edit from there.

I recently came across this Atlas of Makers by Vasilis van Gemert. Its fun and quirky appearance made me look under the hood and it was certainly worth it! What I discovered is that it was actually built making use of really cool features that so many articles and talks have been written about over the past few years, but somehow don't get used that much in the wild - the likes of CSS Grid, custom properties, blend modes, and even SVG.

SVG was used in order to create the irregular images that appear as if they were glued onto the page with the pieces of neon sticky tape. This article is going to explain how to recreate that in the simplest possible manner, without ever needing to step outside the browser. Let's get started!

Some best-guess methods for smoothly interpolating between 2-D shapes.

Let's say you want to animate between two SVG paths or canvas shapes in a visualization. If you plug in their coordinates or their path strings to something like d3.transition(), it might work if the shapes correspond to each other really well - for example, turning a triangle into a different triangle. But once your shapes don't really correspond, you'll get unpredictable results with weird inversions and sudden jumps.

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it.

Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unifying and setting up an icon system.

I don't think I would make the choice based on what "kind" of website I was building, so let's ignore that part of it.

I also think SVG icon systems are just better than icon fonts, so let's assume that.

The accessibility question is the interesting bit, so let's cover that.

The landscape for learning d3 is rich, vast and sometimes perilous. You may be intimidated by the long list of functions in d3’s API documentation or paralyzed by choice reviewing the dozens of tutorials on the home page. There are over 20,000+ d3 examples you could learn from, but you never know how approachable any given one will be.

This guide is meant to prepare you mentally as well as give you some fruitful directions to pursue. There is a lot to learn besides the d3.js API, both technical knowledge around web standards like HTML, SVG, CSS and JavaScript as well as communication concepts and data visualization principles. Chances are you know something about some of those things, so this guide will attempt to give you good starting points for the things you want to learn more about.

There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you're interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With ever increasing browser support, there's never been a better time to start working with SVGs. Snap Animation States is a JavaScript plugin built around Snap.svg to help create and extend icon libraries with scaleable, editable SVG icons. Snap Animation States makes it easy to load and animate those SVGs with a simple schema.

I've been reading David Walsh's blog for years. The tips and tutorials he shares have helped me fix a lot of problems. I love that I get to support him now by advertising TrackJS on his site. Plus, I get a chance to build some cool SVG animations!

I'm not a designer or a marketer by trade. I'm a software developer, but as an entrepreneur I end up doing a bit of everything. I spent a lot of time sketching and googling to figure out how this works. I'd like to share what I've learned about designing and building animated SVG ads, like this one right here:

Everybody loves the vintage game Pong, right? We sure do. What's more fun? Building it yourself!

That's why we decided to create one with SVG.js - to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as you'll see, it's simpler than it sounds. Let's dive into it!

Here's the finished product:

SVG.js is available through Github, npm, bower or CDN.js. There are plenty of options for getting your hands on SVG.js, so use whatever you are most comfortable with.

Start out by creating a new HTML document and include the library. Create an empty <div> to serve as a wrapper for the SVG document, and give it an

The <path> element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini syntax all to itself. It can look pretty indecipherable. It's a ton of numbers and letters smashed together into a long string. Like anything computers, there is a reason to the rhyme. I'm no expert here, but I thought it would be fun to dig into.

This can be a scary question for designers. Is it on your laptop? Your old laptop? Is it in “icons_latest_jw_jan17.sketch” or “icons_final_FINAL.sketch”? Does Angela know? Does Angela know someone who knows? When will the person Angela knows get back to Angela, so Angela can get back to you, so you can get back to the person who asked you in the first place?

The Dropbox Paper team didn’t have a great system for managing icons in the early days. If designers wanted to use an icon in a mock, they could ask around, download from the web inspector, or, if all else failed, grab a screenshot. Developers didn’t have it easy, either. To add or edit icons, they had to run ad-hoc scripts to optimize SVGs and then paste them into a file. It was time-consuming and error-prone.

React’s diffing algorithm allows developers to author user interfaces in a declarative way, without worrying about how to handle updates when the backing data changes. When a component is updated, React only applies the parts that changed to the DOM. This results in fluid interface transitions, devoid of flickering.

When I was learning React, an assumption I made was that a component will only be re-rendered if something it depends on changes, e.g. a passed in property or the component’s own state is updated. I was surprised to learn this is not true.

Part of the misconception was that I didn’t understand that rendering a component and updating the DOM for that component are two separate steps in the lifecycle. The component has to be re-rendered in order for the diffing algorithm to compare it to the previous output. If the output is different, it will update the DOM accordingly. Re-rendering often isn’t necessarily a bad thing; components are typically small, focused, and cheap. In my case the component was not cheap, and it was being re-rendered

If you need a little convincing, I figured I would post the foreword I wrote for the book here, then you can continue reading over on the O'Reilly site.

Foreword

Have you ever learned a new word, then had the opportunity to use that word in the perfect situation come up a number of times that week? That's what it feels like when you start learning SVG. To layer on the metaphors, it's like discovering your toolbox has been missing a tool all this time.

As a designer and developer, now that I've dug into SVG, I can tell you I work with it almost every single day. Not necessarily because I'm jamming SVG into projects because I can, but because it's so often the right tool for the job. After you read this book and SVG becomes your tool too, I think you too will find yourself reaching for it regularly. It will pop to mind when you're working, just like that satisfying moment when a new word you've learned comes in useful.

Since my company has given me a requirement of drawing in a browser programmatically, simply shown as Figure 1.1 above, I would like to share some points with you about drawing in JavaScript. Actually, what we're going to draw? Any kind of images and graphics.

Here is a demo for you, or you can directly click into http://draw.soundtooth.cn/. What you should is to drag any pictures and drop into the box with a red border, and then just click 'Process' button to start the process of drawing:

Note that this is a project which belongs to my company, and that's why I'm not going to

It was brought up at the SVG Summit the other day, wouldn't it be nice when working with SVG to be able to work with it both ways at once?

See and edit the code, and see the results visually

See and edit the visual shapes, and see the code change

There might not be the perfect one true tool, but there are certainly some ideas getting there!

I'd embed the Pen here, but you really need a bit more space to play with it. Here's a video of how it works:

It shows you the code output, but you can't adjust the code to see the changes back in the visual part. It still does an incredible job of showing you the different types of curve commands available in the

I’ve been working a lot with the clip-path property recently, as I write the chapter on filters, blends, clipping, and masking for CSS: The Definitive Guide’s long-delayed 4th edition (available now in early-release format!). One of the nifty things you can do with clipping paths is define them with percentage-based coordinates. For example, here’s a hexagon-like clipping path: