Use SVG images for tour

SVG images will look sharper and scale more cleanly. However they are
not supported on older browsers[1]

> The <picture> element allows for fallback images when the browser
> doesn't support a specified image format.

`<picture>` is supported in the latest versions of Chrome, Firefox, IE
(Edge), Safari and Android, so all these browsers will get the SVG
version.

Older browsers will fall back to the PNG version.

[1] http://caniuse.com/#feat=svg
[2] https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-as-img-picture
[3] http://caniuse.com/#feat=SVG

app/assets/stylesheets/components/banner.scss

@@ -131,7 +131,8 @@
 
   }
 
-  img {
+  img,
+  source {
     max-width: 100%;
     display: block;
   }

app/templates/views/tour/2.html

@@ -15,11 +15,19 @@
 		Set up a template like this:
 	</p>
 	<p>
-		<img
+	    <picture>
+		  <source
+			  type="image/svg+xml"
+			  srcset="/static/images/tour/{{ current_page }}.svg"
+			  alt="A template for a text message with placeholders for the recipients name, document and date"
+			  width="554" height="97"
+		  >
+		  <img
 			src="/static/images/tour/{{ current_page }}.png"
 			width="554" height="97"
-			alt="A template for a text message with placeholders for the recipients name, document and date"
-		>
+			alt="A screenshot of a spreadsheet containing data about three people"
+		  >
+		</picture>
 	</p>
     <a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
       Next

app/templates/views/tour/3.html

@@ -15,11 +15,19 @@
 		Add recipients by uploading a .csv spreadsheet:
 	</p>
 	<p>
-		<img
+	    <picture>
+		  <source
+			  type="image/svg+xml"
+			  srcset="/static/images/tour/{{ current_page }}.svg"
+			  alt="A screenshot of a spreadsheet containing data about three people"
+			  width="554" height="118"
+		  >
+		  <img
 			src="/static/images/tour/{{ current_page }}.png"
 			width="554" height="118"
 			alt="A screenshot of a spreadsheet containing data about three people"
-		>
+		  >
+		</picture>
 	</p>
 	<p>
 		Developers, you can add data automatically using an API

app/templates/views/tour/4.html

@@ -17,12 +17,20 @@
 	<a href="{{ url_for('.service_dashboard', service_id=service_id) }}">
       Next
     </a>
-	<img
+    <picture class="banner-tour-image-flush-bottom">
+	  <source
+		  type="image/svg+xml"
+		  srcset="/static/images/tour/{{ current_page }}.svg"
+		  alt="Three mobiles phones, each showing a text message personalised with data about the recipient"
+		  width="840" height="290"
+	  >
+	  <img
 		src="/static/images/tour/{{ current_page }}.png"
 		class="banner-tour-image-flush-bottom"
 		width="840" height="290"
 		alt="Three mobiles phones, each showing a text message personalised with data about the recipient"
-	>
+	  >
+	</picture>
   {% endcall %}
 
 {% endblock %}