Convert some datalist example images to SVG

This allows them to be more easily editable as we make changes to them,
for example in whatwg#1836. Also fixes some minor text issues in the example
that uses them.

.htaccess

@@ -45,4 +45,6 @@ Redirect 301 /multipage/tabular-data.html /multipage/tables.html
 ErrorDocument 410 /multipage/section-sql.html
 
 # Images converted to svg:
+Redirect 301 /images/sample-email-1.png /images/sample-email-1.svg
+Redirect 301 /images/sample-email-2.png /images/sample-email-2.svg
 Redirect 301 /images/sample-url.png /images/sample-url.svg

source

@@ -47014,10 +47014,10 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
 
   <div class="example">
 
-   <p>The following extract shows how an e-mail client's "Cc" field could accept multiple e-mail
+   <p>The following extract shows how an e-mail client's "To" field could accept multiple e-mail
    addresses.</p>
 
-   <pre>&lt;label>Cc: &lt;input type=email multiple name=cc>&lt;/label></pre>
+   <pre>&lt;label>To: &lt;input type=email multiple name=to>&lt;/label></pre>
 
    <p>If the user had, amongst many friends in their user contacts database, two friends "Arthur Dent"
    (with address "art@example.net") and "Adam Josh" (with address "adamjosh@example.net"), then,
@@ -47028,11 +47028,11 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
    HTML, since the image is redundant with the previous paragraph. In particular, just describing
    the image would be especially bad for accessibility as it would be disorienting, there having
    been no mention that an image is present. -->
-   <p><img src="/images/sample-email-1.png" width="500" height="140" alt=""></p>
+   <p><img src="/images/sample-email-1.svg" width="330" height="100" alt=""></p>
 
    <p>The page could also link in the user's contacts database from the site:</p>
 
-   <pre>&lt;label>Cc: &lt;input type=email multiple name=cc list=contacts>&lt;/label>
+   <pre>&lt;label>To: &lt;input type=email multiple name=to list=contacts>&lt;/label>
 ...
 &lt;datalist id="contacts">
  &lt;option value="hedral@damowmow.com">
@@ -47041,15 +47041,15 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
  &lt;option value="astronomy@science.example.org">
 &lt;/datalist></pre>
 
-   <p>Suppose the user had entered "bob@example.net" into this text control, and then started typing
-   a second e-mail address starting with "a". The user agent might show both the two friends
-   mentioned earlier, as well as the "astrophy" and "astronomy" values given in the
-   <code>datalist</code> element.</p>
+   <p>Suppose the user had entered "<kbd>bob@example.net</kbd>" into this text control, and then
+   started typing a second e-mail address starting with "<kbd>a</kbd>". The user agent might show
+   both the two friends mentioned earlier, as well as the "astrophy" and "astronomy" values given in
+   the <code>datalist</code> element.</p>
 
    <!-- As above, having a non-empty alt="" attribute on the following image would be dumb, which is
    why it's left blank. The pertinent parts of the image are already described in the prose, and the
    non-pertinent parts aren't relevant to users who can't see the image, obviously. -->
-   <p><img src="/images/sample-email-2.png" width="500" height="171" alt=""></p>
+   <p><img src="/images/sample-email-2.svg" width="330" height="140" alt=""></p>
 
   </div>