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?
Add a comment
|
2 Answers
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? Commented Oct 2, 2013 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).– unorCommented Oct 2, 2013 at 13:24
-
imgur does not support svg. Does anyone know any other reliable photo upload site that supports svg? Commented Nov 6, 2013 at 12:04
-
@ArpitAgrawal: Maybe you find a hoster in this thread. FWIW, there is the issue asking imgur to support SVG.– unorCommented Nov 6, 2013 at 12:12
-
1If 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.– narutoCommented Dec 28, 2016 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.
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.
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.
- 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.
- 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.
