Can I use SVG in posts?

SVG is only supported in an img tag

SVG is only supported inside an HTML <img> tag, or a Markdown image link (which is rendered as an <img> tag behind the scenes).

The image upload button

The image upload button above a post during editing only supports PNG, JPEG, and GIF files. These generally correspond to file extensions .png, .jpg/.jpeg, and .gif.

Inline SVG

Codidact posts support a safe subset of HTML. This means that not all tags are supported. Specifically, the <svg> tag is not supported.

Discussion

If you have reason to believe that either of these could be supported safely, I have started a discussion post Should inline SVG or SVG uploads be supported in posts?

In the meantime an external link is the only available option.

How to include SVG

Still images

In order to include an SVG file in a post, it will need to be hosted online so that you can include its URL. For example, the SVG logo is hosted online by Wikimedia and can be used in a post by including either of the following:

Markdown

![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg" alt="The SVG logo">

In the saved post, this is rendered as:

Animations

Animated SVG files can be included in exactly the same way. For example, an animation I uploaded to GitHub can be used in a post by including either of the following:

Markdown

![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)

HTML

<img src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg" alt="Animation of a growing grid of hexagons">

Out of consideration for other users, and for accessibility, I recommend hiding animations and clearly labelling them as such, so that each user can choose whether or not to view them. The previous example text will give a large animated image that not everyone will want to see. Either of the following will give the same animated image hidden until a user chooses to view it:

Markdown

<details>
    <summary>
        Animated visualisation
    </summary>

![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)
</details>

Note that there is a blank line after the closing </summary> tag, and there is no indentation of the Markdown image link. Both of these are required, otherwise the raw Markdown will be rendered instead of the image. If you prefer consistent indentation and no blank line, you can use the fully HTML version shown below.

HTML

<details>
    <summary>
        Animated visualisation
    </summary>
    <img 
        src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
        alt="Animation of a growing grid of hexagons"
    >
</details>

In the saved post the image will look like this:

posted 6 months ago

CC BY-SA 4.0

6mo ago

trichoplax‭

225 75 718 300