I have known for a long time that SVG images are vector based, hence the name “Scalable Vector Graphics”. But it only occurred to me today that SVG is an XML-based image format, which means they can be opened and modified as a regular text file.

For the MishMash application, we used PDF versions of the figures (which worked well when writing in LaTeX). However, as I am now working on the first web page for MishMash, I discovered that we have SVG versions of the figures. Unfortunately, the files provided by the designers had a lot of white space (or, to be precise, transparency) around the main part of the figure.

alt text

Trimming SVGs

I decided to ask Copilot for a small terminal program that could trim the SVG files (like pdfcrop for PDFs) but it instead suggested:

Open the SVG in a text editor and adjust the viewBox attribute in the <svg> tag to the desired crop area:

<svg viewBox="x y width height" ...>

Change x, y, width, and height to crop.

That is super clever, and lo and behold, it worked well. I opened my SVG file in Sublime Text (still my favourite text editor), and the second line read:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 595.276 841.89">

I had to manually tweak the numbers, save the file, and check how the image adjusted accordingly. After around ten trials, I finally got there:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="50 210 480 370">

The result is a nicely trimmed SVG file that I now can use on various web pages. The huge benefit of this approach versus exporting a cropped jpeg file is that it is much smaller in file size, crisper in the font rendering, and it keeps transparency. The last is cool for pages where you can turn on “night mode”, although for this particular image, you will then loose the “science” and “art” text.

alt text

Making new SVGs

Through this process, I have also learned how you can make simple SVGs from scratch like this:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="skyblue" stroke="black" stroke-width="2"/>
</svg>

(error: cannot identify image file ‘static/images/2025/06/svg-example.svg’)

It may not be the most efficient way of making illustrations manually, but it can be much more efficient when asking LLMs to help. Happy SVGing!