Allow SVG image uploads

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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 <img> tag or as a CSS background-image etc) and the SVG contains javascript then the script won't run as SVG in an image context disables scripting.

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.

Answer 4

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?

Answer 5

I think that there are currently 3 solutions to this question, but all of them are workarounds.

1. Displaying an SVG image on browser and copy-pasting the displayed image into Stack Overflow post.

2. Posting an SVG file on another site and adding an <img> HTML tag referencing this file as already explained on this question.

3. Adding a stack snippet in adding SVG tags in HTML part.

All of them have their advandages and disavantages.

1. With copy/paste the size of image is certainly bigger and the zooming display is certainly less efficient.

2. The image is no longer displayed if the site that contains the SVG file is closed or has some problems.

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

1. Adding a new feature to Stack Snippets so that their result can be displayed immediately without having to click on 'Run code snippet`.

2. Allowing the use of SVG HTML tags directly on any post. I

3. Allowing intelligent copy/paste of SVG HTML files, as already done with image files. The SVG file must be recorded on SO site and the process must be enough smart so that all javascript code present in SVG XML is automatically removed for security purpose.

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.

Answer 6

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.