Web Applications Stack Exchange is a question and answer site for power users of web applications. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
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" />
share|improve this answer
    
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

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 code. Open your SVG file in your preferred code editor (Brackets, Atom, Sublime, etc) and copy your whole SVG file to the clipboard.

  2. Create a new gist

Create a new gist

Next, open a new Gist, paste in your SVG code, give it a file name (i.e. 'my-file.svg') and hit 'Add File'.

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.

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.

Not quite drag-n-drop upload, but it works.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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