Easy way to link SVGs in forum posts

Sometimes, adding a “clickable” link is nice for new users. Not everyone gets the concept of right click, save as…

I linked to an existing SVG in a thread here:

How I did it:

  1. Right click on the uploaded SVG, select “copy image location”.

  2. Type your link text, in this case “click here”.

  3. Select the link text and click the link button. Paste the svg url into the location field.

  4. Save, you’re done. Finish up your post as usual.

Now what if you’re uploading your own new SVG, and want to link in the post in one shot?

  1. Drag your SVG into your post:

junk

  1. Type your link text.

  2. Reach over into your preview panel in the new post interface. Right click and copy image location on your now freshly uploaded SVG.

  3. Link your text to that location. (which I did above). Piece of cake, and might head off the inevitable “how do I download”, and bonus: not zipped, so no answering that either.

As we make new posts and want them to be accessible to more people, this might be a thoughtful thing to do if you have a few extra seconds.

21 Likes

Hey, great tip. I could have used that when I responded about making something easy for an office desk. I would have just linked to my original file.

3 Likes

Not too late, go edit your post? I’d love to see “zip svg and upload that” go away, it’s a goofy step.

Now if only discourse would size SVGs reasonably on uploading… that’s one I haven’t figured out how to shortcut. I use the @rbtdanforth method of adding two zeroes to both dimensions. Maybe I should include a link to a post explaining that in this thread too?

4 Likes

Yes, I never went back and edited that post. I think this was before Discourse got posting SVGs easier. Used to have to manual mess with the tags.

Yes. I don’t know how many times I have explained that to folks. Guess I could do a search for it.

1 Like

I like zipping them because it maintains the integrity of the file. More than a few SVGs have been uploaded and had content altered by Discourse.

I think is related to where/how CSS is implemented. In Illustrator, I use Presentation Attributes (which isn’t actually CSS but attributes in the SVG tags).

I imagine Discourse strips out the in-line or internal CSS.

2 Likes

I’m not doubting you, but I haven’t seen this except in cases where embedded images don’t present properly, but downloading them has always made them appear properly.

Has anyone figured out how to reproduce that? Is it browser related or discourse related?

That works for some images, but when the svg is of a small item on a 20x12 page it still looks diminutive.

1 Like

Yeah changing the page dimensions before uploading fixes that of course but in some cases it’s best to export a raster and upload that and then link to your svg either in zip or native form.

It all takes a bit of extra effort, but it does help with accessibility. Ymmv.

Agreed, and thanks for spelling out the options. When posting from my phone, “a bit” becomes “a lot” so I get lazy.

1 Like

Yeah almost all of this is from a desktop browser… I’ve never even tried to upload an svg from a phone or tablet.

1 Like