See also the SVGs section of the markdown images cheatsheet.

Image tag

An SVG can be referenced as an image.

![alt text](/assets/images/foo.svg)

The SVG file should have structure like this:

<svg id="svg" version="1.1" width="..." height="..." viewBox="..."
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="svgg">
      ...
    </g>
</svg>

Social

Clickable social media SVG icon.

source

How use the svg and use tags to reference a .svg file which contains multiple images (referenced by ID).

<a href="https://instagram.com/">
    <svg class="svg-icon">
        <use xlink:href="/dev-cheatsheets/assets/minima-social-icons.svg#instagram"></use>
    </svg>
</a>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <symbol id="instagram" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
        <path d="..."/>
    </symbol>

    <symbol>
        ...
    </symbol>

<svg>