Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Users Search
Help Dashboard Sign In Sign Up
Q&A Blog
Q&A
Posts Tags Edits
Ask Question

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Post History

71%
+3 −0
Q&A 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 bu...

posted 9mo ago by trichoplax‭  ·  edited 12h ago by trichoplax‭

Answer
#6: Post edited by user avatar trichoplax‭ · 2025-03-15T16:36:45Z (about 12 hours ago)
Link to previous discussion of image rescaling
  • ## 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`. The content of the file is checked, so changing the file extension of an SVG file won't help you.
  • ### Inline SVG
  • A Codidact post supports 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?](https://meta.codidact.com/posts/291887)
  • 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including either of the following:
  • #### Markdown
  • ```text
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ```
  • #### HTML
  • ```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:
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ### Scaled still images
  • Adjusting the size of the image is not supported in Markdown (at least not in [CommonMark](https://commonmark.org/), the flavour of Markdown used by Codidact), but with an `<img>` tag a width can be specified:
  • ```html
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • ```
  • This will be rendered as:
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • Note that on mobile devices with narrow screens, the image will already be scaled to fit the width, so there is no need to specify a width like this unless you want the image to be narrower than the screen/window.
  • ### 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
  • ```text
  • ![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)
  • ```
  • #### HTML
  • ```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">
  • ```
  • ### Hidden animations
  • Out of consideration for other users, and for [accessibility](https://www.a11yproject.com/posts/design-accessible-animation/), 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
  • ```html
  • <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
  • ```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:
  • <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>
  • ### Scaled animations
  • Adjusting the size of an animated image can be achieved in the same way as for a still image, by specifying a width in an `<img>` tag:
  • ```html
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ```
  • In the saved post the animation will look like this:
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ### Inline animations
  • A sufficiently small image or animation can be displayed inline within a paragraph. Adjusting the width can help fine tune this:
  • ```html
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
  • ```
  • This will be rendered as:
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
  • ## 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`. The content of the file is checked, so changing the file extension of an SVG file won't help you.
  • ### Inline SVG
  • A Codidact post supports 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?](https://meta.codidact.com/posts/291887)
  • 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including either of the following:
  • #### Markdown
  • ```text
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ```
  • #### HTML
  • ```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:
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ### Scaled still images
  • Adjusting the size of the image is not supported in Markdown (at least not in [CommonMark](https://commonmark.org/), the flavour of Markdown used by Codidact), but with an `<img>` tag a width can be specified:
  • ```html
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • ```
  • This will be rendered as:
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • Note that on mobile devices with narrow screens, the image will already be scaled to fit the width, so there is no need to specify a width like this unless you want the image to be narrower than the screen/window.
  • Scaling in this way works for all supported image types, not just SVG, as described in an answer to [How to resize images](https://meta.codidact.com/posts/289632). If you would like to have the ability to rescale images without need for HTML, you could add to the discussion there.
  • ### 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
  • ```text
  • ![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)
  • ```
  • #### HTML
  • ```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">
  • ```
  • ### Hidden animations
  • Out of consideration for other users, and for [accessibility](https://www.a11yproject.com/posts/design-accessible-animation/), 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
  • ```html
  • <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
  • ```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:
  • <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>
  • ### Scaled animations
  • Adjusting the size of an animated image can be achieved in the same way as for a still image, by specifying a width in an `<img>` tag:
  • ```html
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ```
  • In the saved post the animation will look like this:
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ### Inline animations
  • A sufficiently small image or animation can be displayed inline within a paragraph. Adjusting the width can help fine tune this:
  • ```html
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
  • ```
  • This will be rendered as:
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
#5: Post edited by user avatar trichoplax‭ · 2025-03-15T16:21:21Z (about 12 hours ago)
Mention images on mobile are already scaled to fit width
  • ## 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`. The content of the file is checked, so changing the file extension of an SVG file won't help you.
  • ### Inline SVG
  • A Codidact post supports 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?](https://meta.codidact.com/posts/291887)
  • 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including either of the following:
  • #### Markdown
  • ```text
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ```
  • #### HTML
  • ```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:
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ### Scaled still images
  • Adjusting the size of the image is not supported in Markdown (at least not in [CommonMark](https://commonmark.org/), the flavour of Markdown used by Codidact), but with an `<img>` tag a width can be specified:
  • ```html
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • ```
  • This will be rendered as:
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • ### 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
  • ```text
  • ![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)
  • ```
  • #### HTML
  • ```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">
  • ```
  • ### Hidden animations
  • Out of consideration for other users, and for [accessibility](https://www.a11yproject.com/posts/design-accessible-animation/), 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
  • ```html
  • <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
  • ```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:
  • <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>
  • ### Scaled animations
  • Adjusting the size of an animated image can be achieved in the same way as for a still image, by specifying a width in an `<img>` tag:
  • ```html
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ```
  • In the saved post the animation will look like this:
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ### Inline animations
  • A sufficiently small image or animation can be displayed inline within a paragraph. Adjusting the width can help fine tune this:
  • ```html
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
  • ```
  • This will be rendered as:
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
  • ## 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`. The content of the file is checked, so changing the file extension of an SVG file won't help you.
  • ### Inline SVG
  • A Codidact post supports 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?](https://meta.codidact.com/posts/291887)
  • 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including either of the following:
  • #### Markdown
  • ```text
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ```
  • #### HTML
  • ```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:
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ### Scaled still images
  • Adjusting the size of the image is not supported in Markdown (at least not in [CommonMark](https://commonmark.org/), the flavour of Markdown used by Codidact), but with an `<img>` tag a width can be specified:
  • ```html
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • ```
  • This will be rendered as:
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • Note that on mobile devices with narrow screens, the image will already be scaled to fit the width, so there is no need to specify a width like this unless you want the image to be narrower than the screen/window.
  • ### 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
  • ```text
  • ![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)
  • ```
  • #### HTML
  • ```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">
  • ```
  • ### Hidden animations
  • Out of consideration for other users, and for [accessibility](https://www.a11yproject.com/posts/design-accessible-animation/), 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
  • ```html
  • <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
  • ```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:
  • <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>
  • ### Scaled animations
  • Adjusting the size of an animated image can be achieved in the same way as for a still image, by specifying a width in an `<img>` tag:
  • ```html
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ```
  • In the saved post the animation will look like this:
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ### Inline animations
  • A sufficiently small image or animation can be displayed inline within a paragraph. Adjusting the width can help fine tune this:
  • ```html
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
  • ```
  • This will be rendered as:
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
#4: Post edited by user avatar trichoplax‭ · 2025-03-15T15:30:01Z (about 13 hours ago)
Add further detail and scaling
  • ## 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?](https://meta.codidact.com/posts/291887)
  • 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including either of the following:
  • #### Markdown
  • ```text
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ```
  • #### HTML
  • ```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:
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ### 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
  • ```text
  • ![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)
  • ```
  • #### HTML
  • ```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](https://www.a11yproject.com/posts/design-accessible-animation/), 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
  • ```html
  • <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
  • ```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:
  • <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>
  • ## 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`. The content of the file is checked, so changing the file extension of an SVG file won't help you.
  • ### Inline SVG
  • A Codidact post supports 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?](https://meta.codidact.com/posts/291887)
  • 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including either of the following:
  • #### Markdown
  • ```text
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ```
  • #### HTML
  • ```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:
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ### Scaled still images
  • Adjusting the size of the image is not supported in Markdown (at least not in [CommonMark](https://commonmark.org/), the flavour of Markdown used by Codidact), but with an `<img>` tag a width can be specified:
  • ```html
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • ```
  • This will be rendered as:
  • <img
  • src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
  • alt="The SVG logo"
  • width="100">
  • ### 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
  • ```text
  • ![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)
  • ```
  • #### HTML
  • ```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">
  • ```
  • ### Hidden animations
  • Out of consideration for other users, and for [accessibility](https://www.a11yproject.com/posts/design-accessible-animation/), 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
  • ```html
  • <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
  • ```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:
  • <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>
  • ### Scaled animations
  • Adjusting the size of an animated image can be achieved in the same way as for a still image, by specifying a width in an `<img>` tag:
  • ```html
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ```
  • In the saved post the animation will look like this:
  • <details>
  • <summary>
  • Scaled down 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"
  • width="100">
  • </details>
  • ### Inline animations
  • A sufficiently small image or animation can be displayed inline within a paragraph. Adjusting the width can help fine tune this:
  • ```html
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
  • ```
  • This will be rendered as:
  • <details>
  • <summary>
  • Tiny inline animated visualisation
  • </summary>
  • <p>
  • For some reason there is a
  • <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"
  • width="16">
  • in the middle of this paragraph.
  • </p>
  • </details>
#3: Post edited by user avatar trichoplax‭ · 2024-06-30T18:18:30Z (9 months ago)
Add Markdown versions of using external image links
  • ## SVG is only supported in an img tag
  • SVG is only supported inside an HTML `<img>` tag.
  • ### 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?](https://meta.codidact.com/posts/291887)
  • In the meantime the `<img>` tag 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including the following text:
  • ```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:
  • <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg">
  • ### 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 the following text:
  • ```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](https://www.a11yproject.com/posts/design-accessible-animation/), 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. The following text will give the same animated image hidden until a user chooses to view it:
  • ```html
  • <details>
  • <summary>
  • Animated visualisation
  • </summary>
  • <img
  • src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
  • alt="Hexagonal grid with a single central hexagon having successive layers of hexagons added"
  • >
  • </details>
  • ```
  • In the saved post the image will look like this:
  • <details>
  • <summary>
  • Animated visualisation
  • </summary>
  • <img
  • src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
  • alt="Hexagonal grid with a single central hexagon having successive layers of hexagons added"
  • >
  • </details>
  • ## 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?](https://meta.codidact.com/posts/291887)
  • 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including either of the following:
  • #### Markdown
  • ```text
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ```
  • #### HTML
  • ```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:
  • ![The SVG logo](https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg)
  • ### 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
  • ```text
  • ![Animation of a growing grid of hexagons](https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg)
  • ```
  • #### HTML
  • ```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](https://www.a11yproject.com/posts/design-accessible-animation/), 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
  • ```html
  • <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
  • ```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:
  • <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>
#2: Post edited by user avatar trichoplax‭ · 2024-06-30T00:53:23Z (9 months ago)
Mention related discussion
  • ## SVG is only supported in an img tag
  • SVG is only supported inside an HTML `<img>` tag.
  • ### 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.
  • ## 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including the following text:
  • ```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:
  • <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg">
  • ### 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 the following text:
  • ```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](https://www.a11yproject.com/posts/design-accessible-animation/), 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. The following text will give the same animated image hidden until a user chooses to view it:
  • ```html
  • <details>
  • <summary>
  • Animated visualisation
  • </summary>
  • <img
  • src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
  • alt="Hexagonal grid with a single central hexagon having successive layers of hexagons added"
  • >
  • </details>
  • ```
  • In the saved post the image will look like this:
  • <details>
  • <summary>
  • Animated visualisation
  • </summary>
  • <img
  • src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
  • alt="Hexagonal grid with a single central hexagon having successive layers of hexagons added"
  • >
  • </details>
  • ## SVG is only supported in an img tag
  • SVG is only supported inside an HTML `<img>` tag.
  • ### 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?](https://meta.codidact.com/posts/291887)
  • In the meantime the `<img>` tag 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including the following text:
  • ```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:
  • <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg">
  • ### 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 the following text:
  • ```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](https://www.a11yproject.com/posts/design-accessible-animation/), 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. The following text will give the same animated image hidden until a user chooses to view it:
  • ```html
  • <details>
  • <summary>
  • Animated visualisation
  • </summary>
  • <img
  • src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
  • alt="Hexagonal grid with a single central hexagon having successive layers of hexagons added"
  • >
  • </details>
  • ```
  • In the saved post the image will look like this:
  • <details>
  • <summary>
  • Animated visualisation
  • </summary>
  • <img
  • src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
  • alt="Hexagonal grid with a single central hexagon having successive layers of hexagons added"
  • >
  • </details>
#1: Initial revision by user avatar trichoplax‭ · 2024-06-30T00:10:44Z (9 months ago) 
## SVG is only supported in an img tag
SVG is only supported inside an HTML `<img>` tag.

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

## 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](https://commons.wikimedia.org/wiki/Main_Page) and can be used in a post by including the following text:

```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:

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

### 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 the following text:

```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](https://www.a11yproject.com/posts/design-accessible-animation/), 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. The following text will give the same animated image hidden until a user chooses to view it:

```html
<details>
    <summary>
        Animated visualisation
    </summary>
    <img 
        src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
        alt="Hexagonal grid with a single central hexagon having successive layers of hexagons added"
    >
</details>
```

In the saved post the image will look like this:

<details>
    <summary>
        Animated visualisation
    </summary>
    <img 
        src="https://raw.githubusercontent.com/trichoplax/centered-hexagonal-number-animation/main/animation/centered_hexagonal_numbers.svg"
        alt="Hexagonal grid with a single central hexagon having successive layers of hexagons added"
    >
</details>