Drawing Shapes With Markup

Edit: fucking hell I spoke too soon I can’t have custom fonts in an SVG without bloating it about 20x the size of the PNG and I want to murder half the W3C now blow meeeeeeeeee

And back to Tesserae for a moment! The page on tables has finally been rewritten, putting Tesserae 2.0 another step closer to content parity with the original site. I’ve been neglecting this for a long, long time, not just because tables are fucking annoying to write, but because this one was gonna require a bit of a dive into something I’d never played with before: SVG.

SVG is a flavor of XML with the unique purpose of providing vector graphics to the web. As I am hardly a graphical guru, I skipped over providing visuals for much of Tesserae 1.0, which didn’t help how murky and dense it was to read. I knew I had to fix that for this second iteration, but I didn’t want to just have some PNGs on the page being all blurry if I needed to scale them. No need for it! It was all lines and boxes!

So, as far as SVG goes, you’ve got two options for generating SVG images:

  1. Use a vector image editor like Inkscape
  2. Write them out in Notepad++ like a chad

I don’t have the time or patience to sit and learn Inkscape, admittedly, so at long last, because I didn’t really have much better to do this evening, I grabbed a reference and dove into trying to write SVG by hand. And you know what? Easier than expected! At least for simple stuff, but in Tesserae’s case, 90% of the images are simple stuff. The most annoying part is keeping the numbers and measurements lined up in your head. A lot of trial and error in trying to add little margins to things. Basically, if you’re not good with mental math or your image is particularly complex, do not apply here, use Inkscape.

Either way, here’s what I got:

A bit on Tesserae with my first-ever handwritten SVGs
<svg width="225" height="175" xmlns="http://www.w3.org/2000/svg">
	<rect width="50" height="50" x="110" y="60" fill="#ED9A4B" />
	<line x1="10" y1="10" x2="210" y2="10" stroke="#B15E0E" stroke-width="2" />
	<line x1="10" y1="60" x2="210" y2="60" stroke="#B15E0E" stroke-width="2" />
	<line x1="10" y1="110" x2="210" y2="110" stroke="#B15E0E" stroke-width="2" />
	<line x1="10" y1="160" x2="210" y2="160" stroke="#B15E0E" stroke-width="2" />
	<line x1="10" y1="10" x2="10" y2="160" stroke="#B15E0E" stroke-width="2" />
	<line x1="60" y1="10" x2="60" y2="160" stroke="#B15E0E" stroke-width="2" />
	<line x1="110" y1="10" x2="110" y2="160" stroke="#B15E0E" stroke-width="2" />
	<line x1="160" y1="10" x2="160" y2="160" stroke="#B15E0E" stroke-width="2" />
	<line x1="210" y1="10" x2="210" y2="160" stroke="#B15E0E" stroke-width="2" />
</svg>

Simple, but effective. I’ll get around to producing SVG versions of the Tesserae logo and some of the more decorative site graphics in the future. I’m just glad this one’s back on the site. I’ve got two more, hopefully a bit easier on me, topics to do this month to keep the train rolling on it.

Comments are closed.