Blog

vector trouble

Written by Thomas Henderson
Published on 01 August 2017

This year I discovered I really like drawing in vector graphics. My phone has a large screen with a pop-out stylus; it’s sort of like having a magic index card to draw on. I can change its size, select things and copy or resize them… I really like it. And since I’ve kept a hand-written journal for many years, my handwriting is clear enough that I’d love to produce some technical zines, following in the footsteps of Julia Evans. Her work has taught me, well why not read about tcpdump and strace with stick figures?

However, I’ve got some things to learn about how to serve resources and work with the SVG file format. Here are some things I’ve tried so far.

Inline SVG

Supposedly markdown lets you just drop into the html language whenever you feel like it. At least, I thought it did. But when I type this right into the markdown file that gets turned into the post you’re reading right now:

<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

This is what I see:



Maybe you can see it, but I can’t.

Hexo Asset Folders

Per Hexo’s docs, there are at least two ways to serve non-post assets such as images.

If I make a source/images directory and put the previous SVG code as circle.svg, then refer to it using markdown’s syntax for an image link, like ![Alternate Title](/images/circle.svg), what happens?

Alternate Title

All I see is, “Alternate Title.” Dang. Well, that’s the “global asset folder” way. Maybe if I try the “post asset folder” method? It creates a new folder for every post, which seems excessive but would also mean that I could re-use names, I suppose.

Let’s try it. There’s a folder for this post, I’ll put a copy of that circle.svg code in it, and try ![Another Alternate Title](/vector-trouble/circle.svg):

Another Alternate Title

Well, heck. Last thing to try is this special syntax that Hexo 3 has for referencing assets. Supposedly it will make things render correctly in archive and index pages, whereas the other options would render correctly only in posts.

What you cannot see is four instances of asset_img something-i-hoped-would-work/circle.svg wrapped in curly braces and percentage signs. Alas, none of them draw a circle.

Surrender

Thus my vector comics experiments end in failure. There are at least three things I don’t understand well:

I’m sad not to have diagramming as a communication tool, but I will get some help and try again.