Editing SVG By Hand

I recently renovated my (this) website, going from a simple hand-coded HTML site with a little CSS, to a static site generated by Hugo and served on Netlify.

I wanted an icon to represent my resume to go on the front page of my website. The design I had in mind consisted of an icon of a piece of paper, with the text CV written on it. Some Googling around I found similar images to what I wanted, but nothing exactly. I’d have to make my own.

I’ve used Inkscape and Adobe Illustrator to create and edit vector graphics before, however what I wanted to create seemed to simple. After listening to Derek Siver’s excellent podcast about SVG editing by hand, I wanted to give it a try.

The Hugo theme already uses open source icons from the Feather Icon set includes the File icon, so it made a good starting point. The simplicity and human readability of the SVG code amazes me.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
    <polyline points="13 2 13 9 20 9" />
</svg>

The above code renders out to:

I discovered the beautiful simplicity of the SVG format. It’s just XML!

All I needed to do to add the text “CV” to the existing file icon was add a single line

<text fill="currentColor" font-family="Sans-serif" font-size="7" stroke="currentColor" stroke-width="0.5" text-anchor="middle" x="12" y="18">CV</text>

And now the I have the exact icon I wanted!

The change is so simple, and it only adds 150 bytes to the total file size, keeping page transfer times small. There’s also simple satisfaction knowing that you’ve completed a task using only what is necessary. I tried editing the SVG file in several popular vector editors, however they all added hundreds of bytes to the file size, filling them with headers and metadata without regard to whether it was actually important to the rendering of the graphic.

I’m slightly concerned that by specifying “CV” as text, rather than as a path, the text might not render on systems that decide to use a different font, or don’t have a sans serif font installed. However, I’ve tested the logo on several browsers on several platforms, and it seems to look fine.

My dream SVG editor seems to not exist yet, or at least not as a FOSS project. It would have two pane UI. In one pane would be a text editor for the raw SVG code, with auto-complete and code suggestions specific to SVG. In the other pane, the SVG would render with DOM element highlighting like a modern web browser inspector.