Imagery

Icons - SVG preferred

Where possible, use SVG format for icons. Not only do they scale without loss of quality, but they can also be easily recoloured when placed on different backgrounds to give sufficient contrast.

For example, rather than:

  <img src="/site/images/icon-calendar.svg" alt="" />

..embed the code directly:

   <svg id="icon-calendar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 399.95">
    <g id="icon-calendar__outline" fill="currentColor">
      <g>
        <path d="m316.88,98…

      // etc.

Note that any fill or stroke colours should be set to currentColor if you needs to recolour them - this will allow you to change the icon's colour using CSS.

Watch those IDs!

Software such as Adobe Illustrator often adds classes and IDs to SVG code with generic names such as Layer_1. Make sure to remove these, because they are likely to cause duplication of IDs in the web page and this will not meet accessibility requirements.