How can I add a SVG to my Tumblr post?

Question

I have a svg image say something like this: http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg

How can I embed an image like this within my Tumblr post?

Answer 1

Enable HTML input mode: https://www.tumblr.com/settings → "Edit posts using": plain text/HTML (Using other input methods (rich text editor, Markdown) may work too, but I don’t know/use them.)

Then use the HTML img element, e.g. in a text post:

<img src="http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" alt="SVG" />

The value of the alt attribute (currently "SVG") should contain an alternative description of the image content, used for example by visually impaired visitors or search engines.

For additional information, usually presented in a tooltip, you can use the title attribute:

<img src="http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" alt="SVG" title="SVG logo" />

Answer 2

I spent quite a bit of time trying to find exactly the solution you're looking for for my own purposes.

The best answer I've come up is Github. It's free and only takes a little bit of know-how.

1. Copy your SVG code

   Whether you're creating your SVG in Illustrator or Boxy SVG or Sketch or whatever, we need access to the raw SVG code. Open your SVG file in your preferred code editor (Brackets, TextEdit, Atom, Sublime, etc) and copy your whole SVG file to the clipboard.

2. Create a new 'gist' at Github.com

Next, open a new Gist (https://gist.github.com/), paste in your SVG code, give it a file name (i.e. 'my-file.svg') and hit 'Add File'. You don't even need to be logged in to do this.

After it saves, you should see something like this. Hitting the 'Edit' button at the top right gives you access to file edit/paste again.

So, we have our file online now, but we can't just 'hot-link' that image file. We need to get it served correctly.

3. Grab the raw URL

On the right side of the frame above, you'll see a 'Raw' button. Hit that button and you'll see a raw dump of your SVG source file.

All we need is that URL in your browser address bar - copy it to the clipboard.

4. Serve your file via RawGit

Finally, go to RawGit.com and paste your gist URL into the big text box provided. If you've done everything right, the box will instantly tint green and below you'll see two new URLs for you to use.

One URL for production use, one for development. Keep things simple and just use the production URL. If you paste either of those URLs into your browser address bar and you should see your SVG render.

That is literally all RawGit does.

You should end up with a production-ready URL ready for linking to like this:

Unfortunately, Stack Exchange won't allow us to render the SVG in-page.

Sure, not quite a drag-n-drop upload, but it's free and it works.