Naming Things is Hard

A clickable SVG element

Here's a weird one: I'm experimenting with dropping some SVG code directly into a Drupal page and having shapes within the SVG be clickable links. (Spoiler alert: I don't have this working yet.)

I use this to put the little bit of knowledge about how SVGs work to work, mostly picked up from this old CSS Tricks post. Realizing now what I didn't know before, that SVGs really are just a lot of tags and that you can do tag-stuff with tags, I figured I could set up a text filter format in Drupal that would accept those tags. Or at least the ones I saw in the sample SVG I whipped up in Illustrator really quickly.

So far so good; I add a new field to a content type, drop in some SVG code into that field in a sample page, pick my new text format filter, I've got a bunch of SVG circles and squares and paths and polygons on my page.

Then I try to wrap one of my shapes in a link tag. No dice. I do a little googling and find some documentation on techniques for getting links into SVG code (after briefly looking at and rejecting several JavaScript solutions as being a little too involved for my simple test case). I implement. No dice. I move some things around. No dice.

I'm...a little confused. Maybe there's something weird in my SVG code? I mean, I haven't looked at every single character of it. So I go looking for example code I can grab and somehow wind up on a post archived in the Wayback Machine (now I'm feeling really behind the times). From which I grab some sample SVG code, drop it in over mine, and...

No dice. Huh! But the example linked to at the bottom of that page works for me. 

So now I know something weird is happening, and out of a "let's cover all the bases" impulse, recognizing I've been running my sample in Chrome this whole time, I load up my copy of this sample code in IE. I mean, I don't expect it to work because that's not the direction you—

Wait, it works in IE. Huh?

So, now I do what I probably should be doing for everything from the get-go: I hop over to SublimeText, open up a blank HTML document, and drop my SVG with links into that. And it works in both IE and Chrome.

Which is about where I'm going to leave it for now because it's near the end of the day on a Friday and I'm going a little cross-eyed and I think I've got a headcold coming on.

(But okay I'll also just pop open Firefox real quick, HTML example works but my Drupal example does not. Hmm!)

(And okay I'll just go ahead and also check real quick that...yes, the HTML example works in Firefox whether I'm loading the file directly or going through "localhost" via XAMPP. Ok.) (And in IE.)


Home & About &