Введение в SVG-анимацию, фрагмент книги Сары Дрэснер, которая выйдет в O’Reilly весной 2017 —… https://t.co/hIZ36nIj8T

Bytesize is a passion project I started to help learn the SVG spec, particularly SVG Paths and how they are drawn within code.

Each icon is hand-coded along a 32x32 grid, and uses SVG stroke allowing for maximum style flexibility; meaning you can adjust the weight, color, size, and if you want the edges to be round or square.

While designing and coding these icons, I tried to place as few points as possible to keep the shapes simple but also to reduce on file size. All 84 icons measure in at 9KB minified (2KB in SVGZ, or Gzipped).

This list tries to describe new features and new behaviours in SVG2.

Svgsus cleans the svg and writes the code for you. Drag, paste or import an entire set for a rapid workflow.

The easiest-to-use graphical effects are the shorthand filter functions. You apply them with the CSS filter property. The browser manipulates the appearance of the corresponding element before painting it to the page. Filter functions are supported prefix-free in Firefox since version 35 (stable release in January 2015). They have been supported with the -webkit- prefix in Safari, Chrome, and Blink-based Opera for a few years now.

The redesign of my website finally gave me an opportunity to experiment with SVG filters and color manipulation. The duotone look, which was made sort of trendy again earlier this year by Spotify's new brand identity, is based around manipulating the image's color range by modifying the individual color channels.

SVG1.1 accessibility support is limited in browsers and screen readers. Things are set to improve with SVG2, but ARIA can be used now to improve the accessibility of simple SVG.

SVG for Everybody adds external spritemaps support to otherwise SVG-capable browsers.

There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy implementations. via Pocket

But lately (several months) I’ve been thinking can we use SVG icons in Social Menu instead of icon fonts. Leland Fiegel picked up my question in Twitter and rolled his own idea. It’s not bad solution but what if we could do this without Javascript.

Why and how one should switch from icon fonts to SVG files, presentation given by Sami Keijonen in Exove's WordPress Café on May 10th, 2016.

Icons! We see them all over the web, and they're essential to most pattern libraries and web design systems. I recently needed to implement such a system. It had to be non-prescriptive, scalable, and dynamically editable via CSS. The icons were to be used by multiple teams in many different applications, built with various frameworks and techniques. They needed to have the ability to be restyled, get cached, and be updated quickly and easily as more icons are added. Basically, the icon system needed to be really, really flexible. Challenge accepted.

certainlyakey starred una/svg-icon-system-boilerplate

SVG sprites & stacks galore — Node.js module that reads in a bunch of SVG files, optimizes them and creates SVG sprites in various flavours along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)

Icons are everywhere. These “little miracle workers” (as John Hicks described them) help us reinforce meaning in the interfaces we design and build. Their popularity in web design has never been greater; the conciseness and versatility of pictograms in particular make them a lovely fit for displays large and small.

But icons on the web have had their fair share of challenges. They were time-consuming to prepare for every intended display size and color. When high-resolution displays hit the market, icons looked particularly low-res and blocky compared to the text they often accompanied.

So it’s really no wonder that icon fonts became such a hit. Icons displayed via @font-face were resolution-independent and customizable in all the ways we expected text to be. Sure, delivering icons as a typeface was definitely a hack, but it was also useful, versatile, and maybe even a little fun.

But now we need to stop. It’s time to let icon fonts pass on to Hack Heaven, where they can frolic with table-based layouts, Bullet-Proof Rounded Corners and Scalable Inman Flash Replacements. Here’s why…

We’re going to create a background like this in pure CSS:

This feature allows you to script the animation of your SVG. To do this, the custom values will be set directly in the DOM of the SVG.

Here is an example using scenario-sync.
I would recommend you look at the source code and the readme file for more information.

I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the process. Here's how it's done:

Drawing with divs and other native HTML elements is possible, but a bit clunky and subject to the usual inconsistencies across different browsers. Using SVG is more reliable, visually consistent, and faster.

Vector drawing software like Illustrator can be used to generate SVG files, but we need to learn how to generate them with code.