I am unable to upload SVG image files to Stack Overflow. So I would like to know why it is blocked while other image formats are allowed. SVG images are useful for diagrams such as tree diagrams for algorithm discussions.
Stack Exchange supports image uploading by using an external service (imgur) which does not support vector images.
You'll need to convert your SVG into a raster format (PNG is probably the best choice for most vector images, but JPG, GIF, and even BMP are supported) before uploading them to the provided service.
Stack Exchange is not interested in building an image hosting service (which is why they use imgur) so it's unlikely that they will either create one, or encourage imgur to support vector image formats.
However, if you find a free vector image hosting service that can handle the load Stack Overflow puts on such a service, and provides an API that is as simple and easy to include as imgur's, then you might be able to convince Stack Exchange, Inc, to include support for your request.
Alternately you should consider going to imgur and requesting that they support vector image formats. It would be ideal if they did the hard work, because, using browser detection methods, they could also support browsers that don't have SVG support by rendering the image prior to display, or they could even render it on upload and only store the rendered image (thus not affecting their normal workflow since it's simply a raster image after upload and conversion).
Unless you make it trivial for Stack Exchange to include in their code, you are unlikely to get much support for your feature request.
That is asking end users of a product or service to supply an implementation, and constraining it further with vaguely defined words such as "easy". Not implementing it due to lack of browser support seems like a more reasonable rationale for saying "will not implement". May 26, 2011 at 20:28
Marking as answer as it was actually helpful. Thanks Adam. May 26, 2011 at 20:34
20Stack Exchange has a special deal with imgur for custom image hosting. That makes them a paying customer, and apparently a pretty large one at that. If SE asked imgur for SVG support, they'd be a lot more likely to listen than if the request came from a random third party. Oct 9, 2014 at 16:31
2@bgoodr I made an userscript that makes the image uploading easier and automatically converts SVG to PNG (by using
CanvasDrawContext2D.drawImage()). Dec 1, 2014 at 14:08
2Feature request thread for native imgur support: community.imgur.com/t/native-svg-support-on-imgur/11369 May 15, 2015 at 19:28
While you can’t directly upload an SVG image, if you can host it somewhere else, you can still display it in your post using HTML like
<img src="https://example.com/url/to/your/image.svg"/> (note - you need to use
https:// for this to work).
For example, take this US map here from Wikimedia Commons
See this post for other examples of what you can do.
6True, however the whole point of dedicated image hosting is preventing rot i.e. cases where the original host is down, then the image is lost forever. Dec 3, 2012 at 9:59
6No I understand this, I just wanted to point out its still possible to show an svg. Would be nice if I could just paste the SVG code directly into a post (maybe you can but nothing I tried worked) but I could see the xml code taking up a lot of space on more complicated images Dec 3, 2012 at 10:01
1Ideally, the StackExchange websites would provide the hosting services. Dec 7, 2012 at 5:59
1Modern browsers will let you view inline svg xml right in the html, so its not like it would really need its own SO svg hosting service, they would just need to tweak the way posted svg code is shown... but easier said then done when you have to prevent XSS and that sort of stuff. Example of inline svg code in html: jsfiddle.net/webchemist/c6E7w Dec 7, 2012 at 6:23
4Here, have a bounty for actually demonstrating a working method of using SVG on SE (even if it does require using a third-party image host). Dec 26, 2014 at 12:45
@WebChemist I accidentally edited this post when trying to correct a different one. Would you please roll-back my change? Thank-you Jan 19, 2016 at 10:00
3I can't see the image at the moment—I just see a "broken image" icon. That's ironic, isn't it? Apr 28, 2016 at 2:22
@CraigMcQueen looks like wikimedia took down that map, fixed it with a different svg source Apr 29, 2016 at 0:15
2Images only work with HTTPS on Stack Exchange, and I haven't found any HTTPS site to host images that supports SVG. Mar 23, 2017 at 12:53
@DonaldDuck gist.github.com supports SVG. The mobile view on Github doesn't display a preview, but the desktop view does. Eg, see here.– PM 2RingJan 13, 2020 at 15:21
These days you can paste the SVG markup into the HTML area in a Stack Snippet and it will render in the question or answer in most browsers.
<svg width="100%" height="150"> <circle id = "middle" cx="50%" cy="50" r="25" fill="red"> <animate id="a" begin="click" attributeName="fill" to="green" dur="2s"/> <set begin="a.end" dur="2s" attributeName="fill" to="green" dur="1s"/> </circle> </svg> <div style="text-align:center"> <button onclick="document.getElementById('a').beginElement();">Click on the circle or click on me!</button> </div>
If you upload the SVG as a file and reference it as an image (via the html
Neither can you trigger animation via clicking e.g via begin="click" as I've done above as that SVG capability is also disabled when it's used as an image.
So despite the need to click Run to display the SVG you may need to do it this way instead.
3Well, it works but requires the user to click a button. Far from being trivial or elegant. Better host it somewhere and use
<img>markup as suggested by others. Jan 31, 2016 at 8:44
@ShadowWizard Good point, I've updated the answer to explain why you might want to do this, despite the other methods having such an advantage. Jan 31, 2016 at 8:52
Could you provide a working example? Apr 28, 2016 at 2:27
4Stack Snippets aren't enabled on all sites, so this is even more limited than one might suppose. Apr 28, 2016 at 8:06
Images uploaded to Stack Overflow are hosted by imgur, and right now imgur doesn't support SVGs.
That said, it might be possible to just use them for binary storage and render the SVGs correctly here?
I think that there are currently 3 solutions to this question, but all of them are workarounds.
Displaying an SVG image on browser and copy-pasting the displayed image into Stack Overflow post.
Posting an SVG file on another site and adding an
<img>HTML tag referencing this file as already explained on this question.
Adding a stack snippet in adding SVG tags in HTML part.
All of them have their advandages and disavantages.
With copy/paste the size of image is certainly bigger and the zooming display is certainly less efficient.
The image is no longer displayed if the site that contains the SVG file is closed or has some problems.
The image is only displayed after having clicked on the "Run code snippet" button.
I have read that implementing this new feature is not possible ... in 2011.
Now we are in 2020 and since 2011, StackOverflow has implemented automatic loading of image and code snippet.
Is it possible for the Stack Overflow developer team to add a new feature that allows adding of SVG images?
As developer/analyst, I see currently 3 solutions
Adding a new feature to Stack Snippets so that their result can be displayed immediately without having to click on 'Run code snippet`.
Allowing the use of SVG HTML tags directly on any post. I
There are certainly other possible solutions.
What can be done ... in 2020 ?
I think that this question is interesting for a lot of users. It is perhaps time for StackOverflow to implement this requested feature.
I'd imagine part of the reason is that Microsoft only support SVG since IE9, and most people use IE as their browser but have not upgraded to 9.
Examples of browser usage statitistics: http://www.w3counter.com/globalstats.php, http://gs.statcounter.com/#browser_version-ww-monthly-201004-201104-bar
Getting SVG support into IE8 would require a JS/flash plugin like SVG Web, which would cause significant bandwidth usage for an infrequent feature.
Either that or take the SVG markup and return a PNG. But that sounds like a lot of work for a Q&A website to undertake.
6Browser usage for Stack Overflow itself tends more heavily towards Firefox, Chrome, and later versions of IE. May 25, 2011 at 13:05
1blog.stackoverflow.com/2010/12/stack-overflow-2010-analytics– balpha StaffModMay 25, 2011 at 14:05
3That and since April 2014, Microsoft no longer provides security updates for desktop operating systems that can't run IE 9 or later. Nov 8, 2014 at 4:27
convert sux.png sux-fixed.pngor so) and then I can upload them. It is possible, that the real problem of the system that he doesn't like if I request him to download something from a third location, and not the actual file format.