Sketch Now Replicates Inside & Outside Stroke Alignment

I was just bemoaning strokes the other week:

And that's the trouble with text-stroke in CSS: you have no choice. It's center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful.

There still is no solution for text-stroke, but SVG has the exact same problem. It's not quite as design-ruining with SVG, since you can (and designers have been) design with center aligned strokes in mind with their vector art. Still, I'd say if we had stroke-align: [center, outside, inside]; we'd be better off.

Peter Nowell documents how Sketch now repositions the points of your shapes to replicate the different stroke alignments, if you explicitly chose those options in Sketch. Pretty useful! Since native SVG still only does center alignment, that would mean changing the stroke width after exporting would still be weird, but I suppose that's fairly rare.

The article notes how SVG 2 accommodates for aligned strokes, but that still feels a bit up in the air.


Bobby Grace, on the Dropbox Paper team:

On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons.


  1. Use a single Sketch file, checked into the repo, as the place to design and house all the icons.
  2. Use gulp-sketch to extract them all individually.
  3. The build script continues by optimizing them all and building a source of data with all the icons and their properties.
  4. That data fuels the their <SvgIcon /> React component. (Also see our article).

They call it Papercons.

Now, whenever someone asks for an icon, we can just share a link to all the latest production icons. No more hunting, context switching, and long conversation threads.

Pong with SVG.js

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!


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!


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.


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.


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.