SVG

Randomizing SVG Shapes

SVG shapes are all built from numbers. Obvious, perhaps, but also, I'm not sure we take as much advantage of that as we could with inline <svg>. For example, it's pretty easy to generate a new pseudo-random number in JavaScript:

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Now imagine a bunch of variables set to random numbers, and using ES6 template literals to stitch them together:

let newPoints = `${x1},${y1} {x2},${y2} {x3},${y3} {x3},${y3}`; 

Which makes a valid syntax for the points attribute of a <polygon>.

let polygon = document.querySelector("polygon");
polygon.setAttribute("points", newPoints);

A more detailed example of that, and a demo, over on the Media Temple blog.

Tools to Visualize and Edit SVG Paths (Kinda!)

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?

  1. See and edit the code, and see the results visually
  2. 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!

(more…)

Websites to Generate SVG Patterns

These aren't particularly hard to web search for, but just in case you didn't know they existed I figured I'd drop them here. I've used all three of these in the past and I think they do a good job of driving home how cool of patterns you can make in SVG with such little code.

(more…)

Transparent JPG (With SVG)

Let's say you have a photographic image that really should be a JPG or WebP, for the best file size and quality. But what if I need transparency too? Don't I need PNG for that? Won't that make for either huge file sizes (PNG-24) or weird quality (PNG-8)? Let's look at another way that ends up best-of-both-worlds.

(more…)

Creating Non-Rectangular Headers

Over at Medium, Jon Moore recently identified "non-rectangular headers" as a tiny trend. A la: it's not crazy popular yet, but just you wait, kiddo.

We're talking about headers (or, more generally, any container element) that have a non-rectangular shape. Such as trapezoids, complex geometric shapes, rounded/elliptical, or even butt-cheek shaped.

SVG Squircle

Amelia Bellamy-Royds:

I wondered if I could come up with an easy formula to create a "squircle" type curve with SVG bezier curves. It wouldn't be the exact shape, but it could be close. The idea:

The "end points" of the curve segments are the mid-points of each side of the rectangle, where everything should be perfectly straight. The control points then stretch out along the edges until the curvature at the corners is about right.

Rogie took a crack at it with CSS a few years ago, as well.

An Introduction to the Reduced Motion Media Query

The open web's success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript.

Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.

(more…)

A Couple SVG Icon Links

  • WordPress' new TwentySeventeen default theme uses an SVG icon system. It was contributed by Sami Keijonen who had some prior experience in that, and wrote up a bit about it here. The theme has functions that spit out correct/accessible markup for them.
  • Webpack now has a SVG sprite loader, which allows you to import myGreatIcon from './my-great-icon.svg'; like you do with other resources in webpack.
  • Both aforementioned projects note IE/Edge's lack of ability to <use> from a file path and thus recommend svgxuse and svg4everybody respectively.
  • I still haven't seen anyone talk about an SVG icon system where they say, screw it, we're running HTTP/2, we're just going with <img src="icon-x.svg" alt="">. I've also never seen an SVG icon system that utilized fragment identifiers (Safari and Android are problematic here, so that's not terribly surprising).

Align SVG Icons to Text and Say Goodbye to Font Icons

Elliot Dahl:

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.

Alignment and icons (of any sort) will probably always be a bit tricky. It depends on two things that will be different on every site: the font and the icons. Elliot was able to get perfect alignment with Arial by pulling the icons down with bottom: -0.125em; because Arial sites right along the baseline and the icons themselves were designed with a 12.5% ring of white space around the edges. It's a fairly common practice to design SVG icons with space along the edges (as annoying as it might be for alignment) because without the space, you might get awkward clipping on the edges with certain browsers/resolutions/zooming/etc (sorry I don't have more detail handy).

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag