svg-email-protection.svg

<svg xmlns="http://www.w3.org/2000/svg"
     lang="en-GB"
     aria-labelledby="title"
     viewBox="0 0 200 24">

  <title id="title">Email Us!</title>

  <defs>

  <style type="text/css"><![CDATA[

  rect {
    width: 200px;
    height: 24px;
    rx: 4px;
    ry: 4px;
    fill: rgb(255, 255, 255);
  }

  a:focus rect,
  rect:hover {
    fill: rgb(0, 0, 255);
  }

  text {
    font-size: 16px;
    fill: rgb(0, 0, 255);
    pointer-events: none;
  }

  a:focus text,
  rect:hover + text {  
    fill: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 900;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    text-decoration: underline 1px solid rgb(255, 255, 255);
    text-underline-offset: 5px;  
  }

  ]]></style>

  </defs>

  <a href="mailto:myemail@mydomain.tld" aria-label="Email Us!">
    <rect />
    <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">myemail@mydomain.tld</text>
  </a>

</svg>