# How to include images in an HTML document

How to get an SVG from Figma
How to include an SVG in your HTML document
Example with a Bitmap image

# How to make an SVG

By far the easiest way to make an SVG from scratch is to use a design tool like Figma or Sketch, and export the drawing as an SVG.

Exporting an SVG using Figma

I've included the Microblog logo, as an SVG, in the resources section of this lecture.

# How to include an SVG in your HTML document

We've learned that we can embed the SVG code directly in our HTML documents. However, that can sometimes make the HTML code a bit messy (particularly with those longer SVG images!).

So instead what you can do is save the SVG code as a file, and place it in the same folder as your HTML document.

For example, you could have this folder structure:

my_project
  | - home.html
  | - logo.svg

Then, we can write some code in the HTML document that will take care of telling the browser to load the SVG and display it in the correct place.

We'll do this in our existing code, inside the <header> element:

<body>
    <header>
        <img src="./logo.svg" alt="The Microblog Logo" />
    </header>
    <!-- The rest of the code continues as per earlier lectures -->
</body>

When the browser loads this HTML document, it will run through it and find the img tag. Then, it will request the SVG from the server (or, in this case, our file system).

It will load the SVG image and then place it inside the body element.

Working HTML document loading the SVG

If for any reason the image cannot be loaded (e.g. we misspelled it), we'll get a "broken image" symbol and the alternative text (the alt property) will be shown.

Broken HTML document with misspelled SVG, showing broken SVG loading

Other image types

You can include any image type, not just SVG, with the img tag. For example:

<img
    src="./my-image.png"
    alt="An image showing something very interesting"
/>

← What are SVGs? Finishing the header and navigation →