DEV Community: Andy Fitzsimon

Get individual SVG's back from IconFonts

Andy Fitzsimon — Tue, 25 Jan 2022 09:58:09 +0000

Originally posted on my blog

In this tutorial I'm going to show you how to decompile a big bloated icon font into a series of small, neat, and portable SVG files. It's dead easy.

First install Fontforge on your system

Fedora Linux

sudo dnf install fontforge

MacOS

brew install fontforge

Just change the package manager for your distribution:
eg Debian/Ubuntu with sudo apt install fontforge

Now for the magic one liner, just copy and paste this in your terminal and replace youriconfont.woff with the path to your icon font file.


fontforge -lang=ff -c \\
'Open($1); SelectWorthOutputting(); \\
foreach Export("svg"); endloop;' \\
youriconfont.woff

You'll now have a standalone SVG file for every glyph in your icon font. If you don't care about naming feel free to head to the bonus round

But those filenames, they suck right?

Because the font file knows nothing about what each shape is called, the filenames take the unicode value for each character represented like so you'd think you're stuck with filenames like : uniE9AF_youriconfont.svg

Good news, your existing CSS should have something like this (but probably bigger):

.icon-pacman:before {
  content: "\e916";
} 
.icon-leaf:before {
  content: "\e9a4";
}
.icon-airplane:before {
  content: "\e9af";
}

Yarr, thar be useful names'

What I do is a bulk find and delete on the common CSS markup so that we're left with something like this:

icon-pacman,e916 
icon-leaf,e9a4 
icon-airplane,e9af

As my SED and AWK skills are terrible, I just opened that output as a CSV in a spreadsheet, converted the unicode column to uppercase (if you need to), flipped the columns order, and was left with new CSV output like this:

E916,icon-pacman 
E9A4,icon-leaf 
E9AF,icon-airplane

I dutifully do another 3 find and replace commands:

replace first line with mv uni

replace all commas with _youriconfont.svg (trailing space)

replace linebreak with .svg followed by a line break

The output now looks like this:

mv uniE916_youriconfont.svg pacman.svg 
mv uniE9A4F_youriconfont.svg leaf.svg
mv uniE9AF_youriconfont.svg airplane.svg

I run that and rejoice

This finally replaces all filenames with the sane names given to them by the CSS.

I'm sure I can script this reconciliation part but I do like doing it manually as all CSS is crafted slightly differently so it's good to be eyes-on in case there is some rogue CSS to clean up.

You probably only need to do this once.
If you're doing this every day well... then you might be a competitor of my employer, so shoo shoo 👀

Bonus round

install SVGO on your system

(I prefer to use NPM as it works on linux and mac hosts alike)

npm install -g svgo

Now you can simply enter the directory and run

svgo *.svg

That's it.

Your files will have fill="currentcolor" applied to them so when you inline the SVG inside markup they will adhere to your CSS color: value just like the good-ol days.

A little history

I'll cover why you would you ever need or want to do this. Icon Fonts were once an answer to easy web design.
They exploded on the scene once @fontface was supported by major browsers.

iconfonts gave us all the icons you could need within a single HTTP-request - which was great if you had a lightning fast CDN and agressive caching. You used them usually with CSS pseudo elements and custom character ranges. That's where things get hairy for our a11y friends.

Remember image sprites? Iconfonts as a technique came after image sprites for single-payload single-color icon sets. Before frameworks like react or powerful site generators it made sense to align your icons and marks with your typographic layout - browsers werent always so nice so this kept things on 'some' guardrails.
Plus services like IcoMoon emerged which made creating custom icon sets easy.

But of course like I mentioned the accessibility was terrible.
Worse, some text layout engines mutilated iconsfonts. Think of the carnage the CSS text-rendering: optimizeSpeed; would do to your illustrations.

We now live in the future

With the advent of modern frameworks and the popularity of best practices like ARIA atrributes. Icon fonts just arent the most suitable technique anymore; not by a long shot.

But much of the internet is still littered with websites and apps that depend on iconfonts. And for those poor buggers, it's not without effort to climb into modern times.

We see this often at outfit.io whenever we have a new client with only a website to ingest their existing brand assets from.

Once we have the clean illustrations (that were often lost) back in a malleable and minimal format, our web developer counterparts can shed hundreds of kilobytes of frontend bottleneck from their sites and apps.

I hope this helps you

Generative art with vanilla JS

Andy Fitzsimon — Mon, 19 Apr 2021 10:25:30 +0000

Random computational artwork doesn't have to be hard or heavy

This article was written with interactive images on my blog.
It might still hold up without the visuals

Why design a single piece when you can design a visual system with countless unique permutations?

In this tutorial I'm going to show you how to make dynamic artwork using very simple vanilla javascript and SVG.

For generative art there are some great frameworks like P5.js,Three.js, all the way up to the mind bending Generative Adversarial Networks like styleGAN and so many more. This space is exploding with digital artists and art directors chasing never seen before aesthetics that blur the lines between human and machine made creations.

This isn't new either. For decades many brands with expansive portfolios have gone down the dynamic brand route with their visual architecture. We're lucky to have a few of them as customers at Outfit.io . Traditionally however, permutations were created by central tooling. Often created on the desktop of an art director in a brand team. A render produced once per-need - manually looked over, then distributed as static assets. Nowadays, we can keep the systems alive by leveraging our web native technology and respond to new input

One of the many benefits in using web formats for design, is that it's very easy to produce artwork that is unique every time. An awesome perk for end users of your visual system.
Plus, unlike choosing a specific tool, you have all the aesthetic potential of the web.

This can make for a far more engaging and dynamic aesthetic on large builds like events or media.

Setting the stage

First, we're going to create something without any javascript at all.
This helps us to creatively set the stage by mocking up at least some of the look and feel you'd like to create.

The benefits of this approach means you discover your answers to the most beautiful of questions:

What must stay the same so that
everything else can change?"

The answer is what frees us up to explore new horizons:

Observe what is constant,
discover what can constantly change

If we get a sense of what we like, we'll also get a sense of what variables we can bend or break.

In this case we're going to use SVG, but you could just as easily use plain ol HTML and div's.
I'm not going to use canvas or even Filters because at the end I want a nice vector PDF poster and not a heavy rasterized asset.

<body>
 <svg
  id="stage" 
  viewBox="0 0 100 100" 
  preserveAspectRatio="xMidYMid slice">
<!-- cool stuff will go here -->
 </svg>
</body>

That preserveAspectRatio="xMidYMid slice" will center-crop our artwork if we display it at non square. Think of it as background-size: cover; background-position: 50% 50%; but for SVG contents within a viewBox

We should probably add some CSS to make sure we're full page too.

body{margin:0; overflow:hidden;}
body > svg{width:100vw;height:100vh}

Now, lets think about what we could create.

A few random-ishly placed circles might do the trick.

Not really that random... I just placed the X and Y axis in increments of 20 and the radius in sizes between 2-8.

<circle cx="20" cy="80" r="4" />
<circle cx="80" cy="40" r="4" />
<circle cx="40" cy="40" r="2" />
<circle cx="40" cy="80" r="2" />
<circle cx="60" cy="60" r="6" />
<circle cx="60" cy="20" r="6" />
<circle cx="20" cy="60" r="8" />
<circle cx="80" cy="20" r="8" />

What must stay the same ?

We're going to apply some CSS and attributes to lock in the look we want. In this case, pink circles with double thick lines and no fill.

circle {
  stroke: DeepPink;
  fill: none;   
  stroke-width:2;
}

Okay that was fun, but we need more of these, and I'd go mad placing circles manually. Time to let the computers take over.

Enter Vanilla Javascript

For this demo, we be messing with the three attributes of each SVG circle element.

the circle X position
the circle Y position
the radius of the circle

I also want the option of changing how many circles we play with.

So to accommodate this, we're going to say bye-bye to the manually crafted circles and hello to Javascript generated ones.

I'm going to leave them in the DOM just incase someone is using noscript. But there's no need to do this if we were generating this server-side.
I also want a removeAll function for easily testing new variations.

// clearing the stage
function removeAll() {document.getElementById("stage").innerHTML = "";}
removeAll();

Now we're going to create entirely new circles on the stage with a function called drawCircles

// calling my state svg
let svg = document.getElementById("stage");

function drawCircles() {
  // how many circles to draw 
  // I started with 8 but now I think 15 is the magic number
  for (i = 0; i < 15; i++) {

    // because circle isnt a html element I need to specify the SVG namespace 
    circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

    // maximum 14, minimum 2 and in increments of 2 
    circle.setAttribute("r", Math.floor(Math.random() * 7) * 2 + 2) ;

    // minimum 20 maximum 80, incremements of 20 
    // (so either 20 , 40, 60, 80 )
    circle.setAttribute("cx", Math.floor(Math.random() * 4) * 20 + 20);
    circle.setAttribute("cy", Math.floor(Math.random() * 4) * 20 + 20);

    // add these elements to my stage
    svg.appendChild(circle);
  }
}
drawCircles();

Mess with the values, it's super fun to see your design going off-plan. Watching your rules bend and break can give you new ideas.

Testing and regenerating

We're going to make testing easy with a timer that changes permutation every 4 seconds.

var reGenTimer = window.setInterval(function () {
  removeAll();
  drawCircles();
}, 4000);

Actually, I'm super impatient so we're also going to add a click event listener so that I can just click for a new generation.

document.addEventListener("click", function () {
  removeAll();
  drawCircles();
});

CSS for some more flair

What's awesome about generating random elements is that you already have them in a random sequence. So you can add very sequential CSS rules using the :nth selectors and still get away with looking random - no need to put this stuff in your JS.

Below, I just make every 2nd, 3rd, 4th and 5th circle a different stroke color.

circle:nth-child(2n){stroke:#6ac}
circle:nth-child(3n){stroke:#678}
circle:nth-child(4n){stroke:#345}
circle:nth-child(5n){stroke:#9ab}

Click below to refresh faster

Play with it on Codepen

And there you have it, we've made generative artwork.
Random but within constraints. Every iteration looks different but also like they belong together. The rules you set – and how wild you go, is entirely up to your vision.

The whole dance of this technique is to ensure every permutation is a hit and looks like something you'd be happy with. That's easier said than done when you can't push pixels, but trust me it's super rewarding knowing you have created a living system rather than a static piece.

What about that poster?

Remember I said we were going to make this a nice vector PDF poster?

Thanks to Make.cm we can, and every single download will be generated uniquely.

Checkout the GET request below for an A3 version
https://api.make.cm/make/t/ad146027-af14-4644-92e8-b13f1209bfda/k/17915c24-7159-4b2a-9552-a50f296fa3d6.c0e9241f95e4c5bbbf17b447538274b7/sync?size=A3&format=pdf&data[blank]=nodata

Essential SVG tools

Andy Fitzsimon — Thu, 15 Apr 2021 11:41:30 +0000

We all could use a little help making SVG the leanest and meanest.

Posted with images on my blog

This article contains SVG tools I reach for depending on need.
As the rifleman's creed goes: “there are many like it but this one is mine”.

I like this list.

Preamble

My affair with SVG began back when Adobe offered PGML. I loved flash, but figured open standards would win the browser wars . You can read about SVG's origins here.

Once W3C released the SVG draft: I figured it would own the web and be supported by all major browsers within months (it took years). Nevertheless, my courtship began.

Fortunately SVG was more useful than just internet use.
By 2003, I had toyed with SVG in my studies.
By 2005, I had finally used SVG commercially thanks to Red Hat (and UTF-8).

SVG assists me in many tasks – from websites, to presentations, to apps, to toolchains.

Here's what I use today: Some are online tools, some are scripts, some are desktop apps, some are libraries. All incredibly powerful (and/or fun) for the right situation.
So here goes, get your bookmark tool of choice fired up:

SVGOMG

The webinterface to SVGO is so handy, I also use SVGO directly in apps and on the commandline. Everybody should have local access to it.

npm install -g svgo

If you use webpack, snowpack, vite-svg-plugin etc you likely use it too.
The plugins are fascinating and have bailed me out many times.

There's also SVG Cleaner which has some compelling benefits over SVGO.

SVG Path Editor

I use this now more than even Inkscape for simple illustrations, and I really wish the preview would let me add my CSS. But still, this thing is pure GOLD!
When finishing an illustration I often return to this tool and go path by path to reduce unnessecary coordinates and operators. Stealing a few decimals here and there, replacing cubic bezier path operators with more optimal ones like quadratics or arcs.

SVG path editor will dramatically improve your understanding of the SVG path system.
Also try out this SVG path visualizer I put the heart from this article in it's URL param - very handy when teaching SVG.

SVG Crop

Remove the extra margin from around your SVG content so the file is easy to work with.
SVGcrop.com resizes the SVG artboard by changing the viewBox=".. attribute
It's not 100% bulletproof (invisible shapes like clippaths will affect the viewBox) but handy all the same.

SVG URL Encoder

Inline SVG into CSS - hey it's a gnarly technique but I still find myself throwing SVG into pseudo elements all the time. Think of the saved HTTP request!
This tool from Yoksel makes it super easy!

Relative clip-path

For turning SVG paths into CSS-friendly clip-path coordinates. Super handy.

SVG Fitler Builder

Creating complex SVG Filters is incredibly hard, Thankfully we have this brilliant tool.
There's an alternative SVG Filter Constructor by Yoksel with a less intimidating interface that's worth a look.
Actually Boxy SVG editor has a great compositing editor which is easy to use too.

SVG Gradient Map Builder

Who doesn't love Duotone effects? SVG Gradient Map filters make them achievable native on the web.
There's just one annoying catch. when you are coding these you need to convert your R G and B into separate channels and divide by 255 then place them your R G and B numbers for different colours next to eachother - it feels kind of unnatural.
This tool makes creating a custom filter easy.

If you want to automate this, I also wrote a CodePen that converts any array into swatches and a duotone effect.

Inkscape

Isn't the evolution of open source desktop applications awesome?
Gill > Sodipodi > Inkscape
I've loved this journey and especially love where it is now.
Run it on your linux machine, your mac .. its brilliant for creative exploration, and especially illustration.
I've used Inkscape since it's inception. Demoed it around the planet and pleaded for top designers to consider it. I could go on and on but let me just say it's the very best tool for illustration of complex paths. and leave the rest up to your imagination.

Penpot

Early days to call this a Figma killer - But I do find it does most of what I want out of Figma (for free and freedom). Super impressed and excited to see where this project goes.

RawGraphs

RAWGraphs
Brilliant way to pre-render beautiful data graphics, create the layout in rawgraphs then style with your own CSS.

Boxy Editor

At first sight, boxy looks like yet another svg-edit clone. But open up the panels and start editing (start using the i and o keys) and you'll see why it's fantastic for small projects.

librSVG

This is a blazingly fast library to work with SVG files (used in ImageMagick and heaps more). If you are a performance-driven developer, RSVG convert in particular will blow your mind. Also you should follow Federico Mena-Quintero Who is dragging RSVG into the future with Rust.

Worthy mention goes to reSVG which is a super performant and powerful alternative to rSVG.

Imagetracer JS

There are many bitmap to vector tracers like potrace, autotrace etc. Imagetracer is the most promising for web developers and has a few tricks up it's sleeve.
Handy to have on the CLI too:

imagetracerjs/nodecli>node nodecli ../in.png outfilename out.svg scale 10

2geom

If you're building an app that needs to perform fast and accurate 2d computational geometry (boolean operations and way way more) you'll end up grateful for Nathan Hurst and all other contributors who made lib2geom possible.
Fun fact, Inkscape uses 2geom under the hood and also powers the amazing live path effects etc.

Single-purpose SVG generator tools

Blob Maker and Wave Maker - both part of the super cool haikei app
Noise maker nice patterns of directional lines or dots
Arc Wave Maker nifty example of repeating arc paths
Snowflakes Random snowflakes
Snowflake Painter Design a snowflake with lines

What else?

Well there's lots of nifty things I havent personally climbed into.

Canvas2SVG - I have a feeling I'll get to know this library well someday.
Apache Batik - I used it quite a bit in the early days but it never took root in my toolchain.

SVGJS It offers compelling shortcuts, I'm just a fan of vanilla JS. This also goes for SNAP SVG

Thank you SVG

So there you have it, the best tools to help you with SVG.
By the way, all the images in this article were super-tiny inlined SVG - open web inspector and see for yourself.

On a personal note:
There are heroes I'd like to recognise; friends who moved SVG forward directly or indirectly - at least in my universe:
Cam Mcormack, Raph Levien, Chris Lilley, Carl Worth, Liam Quinn, Nathan Hurst, Peter Moulder, Tavmjong Bah, Bryce Harrington, Aaron Spike, Jon Cruz, Bulia Byak, Ted Gould, Doug Schepers, Dom Lachowicz, Dodji Seketeli, Owen Taylor and so many more.

The smallest SVG possible

Andy Fitzsimon — Thu, 15 Apr 2021 11:32:21 +0000

How would you make my site favicon from a bitmap into an SVG? (don’t cheat with web inspector)

The lazy me would just software trace using my favourite illustration tool. (Inkscape)

But yuck, look at those node coordinates, and the shape is kind of melted when you look up close.

In better news, the resulting filesize is an affordable 2kb, much smaller than a decent resolution png or jpeg – but files over two thousand bytes are rookie numbers!
We're a long way from optimal SVG sizes.

So maybe we should roll up our sleeves and manually redraw it with the pen tool — being careful about where to place nodes, and when to use straight lines vs beziers.

Woohoo we're now at 800 bytes - less than half the original size.

At this point, I'd urge you to go one step further and optimise with SVGO or manually with SVGOMG — being sure not to melt the shape with precision settings.

Wow, that worked great — We're now at around 236 bytes which is excellent. The shape is even closer to the original than tracing. This is usually as good as it gets, an 88% reduction from automatic tracing. IMO this was worth the effort.

What if we went deeper?

I managed to get the image down to 127 bytes, 46% smaller than our best 236 byte image. All with full-fidelity by using a stroke-linecap:round hack.
Here's the full SVG:

<svg 
viewBox=".5 .5 3 4" 
fill="none" 
stroke="#20b2a" 
stroke-linecap="round">
<path d="
M1 4h-.001
V1h2v.001
M1 2.6
h1v.001"/>
</svg>

First I stroke the lines so I save on doubling coordnates, then I exploit the vand h relative operators at tiny offsets.

See the values with h.001 and v.001 and h-.001 ?

That's how I hacked the directional rounded corners.

Normally stroke-linecap:round is just round. Nothing you can do about it.
But when you change direction REALLY close to the edge coordinate, the cusp squares off on one side only, and you can control which side with negative or positive relative values.

Neat huh? We're just getting started...

The Outfit logo

A while back, I created this interactive demo of the Outfit logo to teach some of the fundamentals of plotting and styling SVG path coordinates. There's no fill here.

https://codepen.io/andyfitz/full/gOwzMwV?editors=1000

History of the mark

Rowan Hogan originally designed the Outfit logo. No doubt without regard specifically for SVG format optimisation. Don’t let the medium become the message as they say.

The design evolved with minor optical updates and when it came time to make this demo, it had optimisation amenities stacked against it:

An optical overshoot (round coords non-exact to a grid)
Non-perfect curves (the f and the u are bent differently)
Non 1:1 grid rhythm (1:1.3 spacing of stems)

Thankfully the solution above is full-fidelity to the intended mark.

It got even smaller as a one-liner: 253 bytes, styled and uncompressed (not bad for so many letters)

<svg viewBox="0 0 19 8.5" 
stroke="#e40046" fill="none">
<circle cx="2.36" cy="6.12" r="1.68"/>
<path d="M5.35 4
v2.5A1.02 1 0 008 6.5v-2h10.68
M10.2 8.2v-6
m2.3 6V2a1.3 1.2 10 012-1
m.3 7.2V4.5
m2.3 3.7v-6"/>
<path d="M14.8 2.8v0"
stroke-linecap="round"/>
</svg>

Rules to SVG by

This list is by no means comperehensive but it does serve as a rough guide

Small Artboards

Ensure coodinate precision by keeping your viewBox under 10 or 100 - from zero

<svg viewBox="0 0 10 10" ... >

It makes sense to factor up by 10 for more intricate shapes.

<svg viewBox="0 0 100 100" ... >

Both scales work depending on the complexity of your image. The point here is we dont want every coordinate to be in the thousands, we also want to avoid unnessecary decimal coordinates. Every byte counts.
If every coordinate has a decimal place, go up by 10. If only a few do, try to round up.

Stroke if you can

Every shape you can pull off as a stroke that would otherwise be a filled path saves you 2-3x bloat in coordinate. This is fairly easy to visualise as a stroke only has an inner line that can be expanded wheras a filled shape has two outer lines to create a zone.

Know when to capital or lowercase path coordinates

Don't know the difference?
Uppercase Letters like M C L A H V Q T etc all start an operation relative to the viewBox
Lowercase letters (same as above) m c l a h v q t etc start from the last coordinate you did

Relative or absolute positioned coordinates make a huge difference. Sometimes optimisation tools like SVGO can select which one is best, but not always.

Chose your operator wisely

Using a horizontal H or vertical V operator is great because you only need one coodinate it saves you tryping both X and Y, you only need one coordinate so that halves what would otherwise be redundant axis data with the line-to L operator.

Arc paths, quadratics and cubic splines all have their own benefits and problems.

Dirty Path Tricks

Circle with single arc operators

You can draw 'pretty much' a perfect circle with a single SVG path arc operator.

If you're already working in a path d="" element, there's no need for a new element.
This saves you 10 bytes per circle in that context. So we can do:

M5 0a5 5 0 10.001 0

vs having to go create a new element which could get messy for your CSS

<circle cx="5" cy="5" r="5"/>

Dots with stroke-linecap="round"

if you're doing a line icon with linecap-round you can make a dot the exact width of your stroke just by doing a very short relative horizontal or vertical line

<path d="M 5 5 h.001" stroke-linecap="round"/>