SVG Properties and CSS

There’s a good deep dive into SVG Properties and CSS on CSS-Tricks:

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

Also covers the fact that you can alter SVG (simple) path data using CSS 🙂

SVG Properties and CSS →

SVG Line Animation with Vivus.js

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

Think SVG line animations, but then controlled through JavaScript.

vivus.js – svg animation →

SVG favicons in Chrome

A commit that landed in Chromium (and which will be available in Chrome 80) is support for SVG favicons. 🎉

🦊 Firefox already has support for SVG favicons, ever since version 41

Since most (all?) browsers always make a request to favicon.ico you can also serve an SVG at that location with the image/svg+xml MIME Type – As per tip by Mathias

Above that it’s also possible to use prefers-color-scheme in your SVG icon, thus supporting Light/Dark Mode:

🐛 There’s on small bug though: you need to refresh the page after changing to/from Dark Mode for the favicon to change.

Dark Mode Favicon Demo →

Easily use SVG files in React Native with react-native-svg-transformer

React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like SVGR to transform your imported SVG images into React components.

This makes it possible to use the same code for React Native and Web.

Oh, that’s a welcome package!

import Logo from "./logo.svg";

<Logo width={120} height={40} />

After installing the package you will need to adjust your Metro configuration:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

react-native-svg-transformer (GitHub) →

Accessible Icon Buttons

Sara Soueidan:

An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text.

Putting aside the UX side of the coin and whether or not an icon alone is enough to convey meaning and functionality to users, many implementations of these buttons today lack the proper accessibility that makes them meaningful to users of assistive technologies.

Sara gives us 5 techniques to solving this.

Accessible Icon Buttons →

Making Future Interfaces: Inline SVG

Another great entry in the “Making Future Interfaces” video series by Heydon Pickering. This one here is a basic introduction to SVG.

Like with his other videos: even if you already know about the topic he’s talking about: just watch it, the presentation style and puns are great 🙂

Related: Here’s a post of mine on how to alter SVG path data on hover, something that is mentioned in the video.

Dynamic Bézier Curves

Nice writeup by Josh Comeau on how he created the on-scroll-animated bézier curve on his website

Did you notice that as you started scrolling on this page, the Bézier curves that border the green title hero thingy started flattening? Keep your eye on the swoopy curves just above the post text as you scroll through the top of the document. Notice how they become flat as they approach the header at the top of the viewport?

In a delightful bit of serendipity, I realized while building the blog that this feature would make a great first blog post!

Love the interactive examples embedded into the post. They really help convey the message.

Dynamic Bézier Curves →

Share terminal sessions as animated SVG with svg-term-cli

svg-term-cli is a tool that render asciicast (terminal recordings) to animated SVG. Pass the asciicast id into svg-term in order to convert it:

svg-term --cast=113643 --out examples/parrot.svg --frame

This asciicast for example:

Using the command above, it will render to this SVG:

svg-term-cli – Share terminal sessions as razor-sharp animated SVG everywhere →

SQIP – SVG-Based Image Placeholder

In an in-depth analysis on how Medium loads up their images, José M. Pérez explains how their “blur-up technique” works:

  1. Display a resized version of the original at the original size, with a blur filter on top to hide the artifacts.
  2. Load in the bigger one.
  3. Once the big version is loaded, replace the small image with the big one.

Now, at Medium they don’t just swap out the small image for the big one, but animate between the two. For this they render everything on a <canvas> element. The author of the post has recreated the animation using CSS filters:

See the Pen Reproducing Medium loading image effect by José Manuel Pérez (@jmperez) on CodePen.

In a follow-up post on using SVGs as placeholders he researches how SVGs can be used as placeholders.

Now I must say his self-made results aren’t that satisfying … the jump between the lo-res SVG and the original is too big. What caught my eye in said article however, is the mention of SQIP which yields some very – very – nice results:

It makes use of Primitive to generate a SVG consisting of several simple shapes that approximate the main features visible inside the image, optimizes the SVG using SVGO and adds a Gaussian Blur filter to it. This produces a SVG placeholder which weighs in at only ~800–1000 bytes, looks smooth on all screens and provides an visual cue of image contents to come.

# Generate a SVG placeholder and print an example <img> tag to stdout
sqip input.jpg

# Save the placeholder SVG to a file instead of printing the <img> to stdout
sqip -o output.svg input.jpg

# Customize the number of primitive SVG shapes (default=8) to influence bytesize or level of detail
sqip -n 4 input.jpg

There’s also a Node implementation available.

SQIP – SVG-Based Image Placeholder →

UPDATE 2017.12.03: There’s an article available over at perfplanet on how to combine SQIP with the Intersection Observer.