Functional images

Recipe 3.5 Link images

Sample:

Logo in Header

Homepage

Dowload link

Save

Link to website

Code:

<h2>Logo in Header</h2>
<a href="/">
 <img src="/images/demos/oreilly_logo.svg" alt="Homepage">
</a>

<h2>Dowload link</h2>
<a href="/report.pdf" download>
 <svg viewBox="0 0 39 44" aria-labelledby="save_title" role="img" width="28">
   <title id="save_title">Save</title>
    <path d="M19.5 36.5 1.6 26.1v-3.6l16.3 9.4V1.5h3.2v30.4l16.3-9.4v3.6z"/>
    <path d="M1 41.5h37" style="stroke:#000;stroke-width:3;stroke-miterlimit:10"/>
  </svg>
</a>

<h2>Link to website</h2>

<p>
  <a href="https://mastodon.social" aria-label="Mastodon">
  <img src="/images/demos/mastodon_logo.svg" alt="" width="32">
  </a>
</p>

<p>
  <a href="https://mastodon.social" aria-label="Mastodon">
    <svg width="32" viewBox="0 0 216.414 232.01" aria-hidden="true">>
      <path fill="#2b90d9" d="M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916"/><path fill="#fff" d="M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675"/>
    </svg>
  </a>
</p>