About this workshop

Pikkola, tool No. 15

A file is a drawing plus the history of the editor that made it. Only one of those has to ship.

The file is heavier than the picture

Export an icon from a design tool and open it in a text editor. Around the path there is a licence block, a page colour, a zoom level, three namespace declarations and coordinates with nine decimal places. None of it draws anything.

The optimisers we tried either wanted the file uploaded first or rewrote the geometry. A confidential icon set should not need a third party, and a logo should not come back with different curves.

What the cleaner touches

Comments, the metadata block, editor namespaces (Inkscape, Sodipodi, Adobe, Serif), empty groups, width and height when a viewBox already scales the drawing, indentation and decimal places beyond two. Each rule can be switched off, and the report names every rule that removed something.

Ids stay. So do title and desc, SMIL animation, CSS in a style element and embedded scripts. Those change what the file does rather than how it is stored, and this page is not willing to guess about behaviour.

How the preview and the PNG are made

The cleaned text becomes a blob and the browser draws it in an image element on a checkerboard. Zoom is a CSS size on that image, so what you see is the browser's own rendering of the cleaned file.

For a PNG the same blob is drawn into a canvas at the size you chose and taken out with toBlob. A web font called by name is not in the file, so it will not render; outline the text or embed the font.

The component output

React gets a function component: attribute names in JSX spelling, class as className, a style string as a style object, namespaced attributes such as xlink:href as xlinkHref. Props are spread first so the drawing's own attributes win.

Vue gets a single file component with the markup in the template and any style element moved into a scoped block. Neither output invents props, wraps the drawing in a design system or asks for a build step before it can be read.

What it will not do

It does not simplify paths, merge shapes or rewrite geometry. Those are design decisions, and a tool that makes them quietly is how a curve changes between versions.

It does not audit embedded scripts. If you clean a file from elsewhere, read it before you ship it.

It does not embed fonts, and it does not guarantee that a preview matches every renderer. Test the file where it will be used.

If something is wrong

Write to hello@pikkola.com with the file and the rule that behaved unexpectedly. A small sample is worth more than a description.

Back to the studio