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.
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:
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?
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):
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.
Thus my vector comics experiments end in failure. There are at least three things I don’t understand well:
- relative paths and serving assets
- the SVG format itself
- how hexo turns markdown and assets into a website
I’m sad not to have diagramming as a communication tool, but I will get some help and try again.