Blog

vector trouble, revisited

Written by Thomas Henderson
Published on 18 August 2017

Last time I tried to display SVG content I couldn’t get it to be visible. I tried inlining, for a quick-and-dirty method; linking, for keeping SVG code and blog text separate; and using Hexo’s syntactic sugar for referencing asset folders — not because I like extra sugar, but because everything else had failed.

After Joshua (@heyitry) kindly took a close look at my site and gave me some advice, I thought I should give rendering SVG in the browser another shot.

inline: line breaks

Joshua suggested that I take a closer look at exactly how my inline SVG got rendered. What I had typed into my buffer last time was

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

The HTML that Hexo rendered for my site was:

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

It’s close. All the information I put in is there, and everything looks like it’s nested correctly. But there’s a little bit of code I did not put in: that pair of <br/> tags. These tell the browser to put in a line break; but, they are just an artefact of the way I formatted my HTML for readability — they don’t actually have meaning in my document. In fancy words, the <br/> tags are not ‘semantic HTML‘ — a term I picked up hanging around with indieweb kids.)

Is it those line breaks that are messing me up? What if I write my SVG in a single line, like this?

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

When I write the above into my text file:

Hooray! We have <circle>!

So, supercool. Now I can draw pictures with my magic index card, and paste the resulting code into a blog post. So long as I remember to make it into a single line — voilà! Vector comics! And with the code in my editor, I can tweak it. I don’t know a lot about the SVG format, but I know you can group things together, and give them id’s and classes. That way, when it’s time to get really fancy, I can grab pieces of the image to reuse, or even animate.

But, sometimes it might be nice to separate the code for a picture from the text and code that make up a post. SVG code can get pretty big, after all. Thing is, I get confused about exactly how to write a relative link. Do you need to have a leading slash? What about a leading dot? Are there quotes or no?

I’m running my hexo server locally to develop this post, and when I navigate to localhost:4000/images/circle.svg I see the correct code for a red circle:

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

…along with some complaint from my browser that “This XML file does not appear to have any style information associated with it.” I’m going to guess that this is because accessing a random XML file is different than viewing it embedded in a web page?

Well, if it’s there, that means I can reference it. I think. And I think to reference it, I use something like <img src="./images/circle.svg" alt="I'M MEANT TO BE A RED CIRCLE">. So I type that in…

I'M MEANT TO BE A RED CIRCLE

Well, dang. A screen reader should be able to read the alt text to a user, but it’s not showing a picture to the rest of us.

Maybe the third debugging attempt will be the charm…