29

I prefer to add images to my questions or answers - often from different sources. Most of time the offered quality of the images is really bad so I'm tempted to redraw them. I find the svg format often very suitable due to the fact that one can zoom in and out. However, it seems SO does not support uploading this kind of image format. Why is that?

3

2 Answers 2

26

Quoting from a post on Meta.SE:

Stack Exchange supports image uploading by using an external service (imgur) which does not support vector images.

Imgur does not support the SVG format. They have an open feature request for such support.


If your SVG image is hosted elsewhere, you can embed it in the post using HTML:

<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"/>

Produces:

8
  • thx that makes sense up to the point where I want to use an image link which is also not supported. E.g. upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg Commented Jul 14, 2015 at 17:51
  • You can utilize an image link. I've provided an example in my post
    – Andy Mod
    Commented Jul 14, 2015 at 17:53
  • True, forgot about the HTML embed options. Do you know if it's also possible to scale those linked images like explained here. Commented Jul 14, 2015 at 18:00
  • You should be able to use the height and width attributes to scale it. The automatic scaling provided by Imgur isn't available, because your SVG won't be hosted there as an SVG file.
    – Andy Mod
    Commented Jul 14, 2015 at 18:03
  • 5
    You can also use ![Alt text](http://www.example.com/path/to/file.svg)
    – user4639281
    Commented Jul 14, 2015 at 18:15
  • 2
    Just make sure the SVG is not hosted by Facebook :). Commented Jul 24, 2019 at 0:30
  • While this answer is useful it's arguable that S.O.'s goals would suggest that they'd be better served by switching to a service that supports SVG and maybe even one that includes an inline or modal SVG editor. Just like you can click to insert a snippet i'd draw way more helpful diagrams if I could click "insert diagram" and have a simple diagram editor popup. As it is I often rely on ascii art which is way more painful to enter.
    – user128511
    Commented Jul 24, 2019 at 3:43
  • Can we use Github GIST to hold these SVG files? Commented Aug 31 at 1:37
8

I have following SVG file on my PC

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">
    
      <title>SVG 3 Circles Intersection </title>
    
        <circle cx="110" cy="110" r="100"
                stroke="red"
                stroke-width="3"
                fill="none"
                />
        <text x="110" y="110" 
              text-anchor="middle"
              stroke="red"
              stroke-width="1px"
              > Label
        </text>
        <circle cx="240" cy="110" r="100" 
                stroke="blue" 
                stroke-width="3"
                fill="none"
                />
        <text x="240" y="110" 
              text-anchor="middle" 
              stroke="blue" 
              stroke-width="1px"
              > Ticket
        </text>
        <circle cx="170" cy="240" r="100" 
                stroke="green" 
                stroke-width="3" 
                fill="none"
                />
        <text x="170" y="240" 
              text-anchor="middle" 
              stroke="green" 
              stroke-width="1px"
              > Vecto
        </text>
    </svg>

I have uploaded this image to https://svgur.com

After upload was terminated, I have obtained following URL:

https://svgshare.com/i/H7d.svg

I had to then MANUALLY (without using IMAGE icon) add the following <img> HTML tag

<img src="https://svgshare.com/i/H7d.svg"/>

and the result is just below


Editor's Note: svgur.com and svgshare.com do not appear to be working; links and resources have been replaced with webarchive links where possible, but may not function as desired.

For user with some doubt, it is possible to see what I have done in editing following answer on Stack Overflow inserting SVG image

The SVG file must contain <?xml?> element. At begin, I have simply created a SVG file that begins directly with <svg> tag and nothing worked!

At first, I tried to insert an image using IMAGE icon of Edit Toolbar. I paste URL of my SVG file but Stack Overflow don't accept this method. The <img> tag must be added manually.

I hope that this answer can help other users.

REMARK: svgshare is NOT SAFE

Images on SVGSHARE disappears after some times.

Now, I use a public personnal repositories on GITHUB !

This image is on //github.com/schlebe/SVG-Images/blob/main/Cercles.Selection.svg

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .