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?

up vote 3 down vote accepted

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" />
  • Great...but is it possible to upload a svg image? If I don't have it hosted anywhere? – Arpit Agrawal Oct 2 '13 at 13:19
  • @ArpitAgrawal: Tumblr doesn’t support uploading SVG images from your computer, but you can upload it somewhere else and use the "URL" option in photo posts to reference the URL of the uploaded SVG file. There are countless (free) image upload services, e.g. imgur.com (as used by Stack Exchange). – unor Oct 2 '13 at 13:24
  • imgur does not support svg. Does anyone know any other reliable photo upload site that supports svg? – Arpit Agrawal Nov 6 '13 at 12:04
  • @ArpitAgrawal: Maybe you find a hoster in this thread. FWIW, there is the issue asking imgur to support SVG. – unor Nov 6 '13 at 12:12
  • 1
    If your image file is small enough, you can convert it to a data URI and directly embed it (<img src="data:image/svg+xml;charset=utf-8;base64,BLAH......" />). You can easily find an online data URI converter. – naruto Dec 28 '16 at 3:02

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

Create a new gist

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.

File loaded into a gist

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.

  1. 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.

  1. 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.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.