Skip to main content

Protecting email address via SVG

Source: https://rouninmedia.github.io/protecting-your-email-address-via-svg-instead-of-js

Implementing the Code

In the example below there are two files.

The SVG graphics document is embedded in the HTML hypertext document via:

<object data="svg-email-protection.svg" type="image/svg+xml" /></object>

Note that the same SVG graphics document may be embedded in hypertext once - or multiple times.

HTML File

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>SVG Email Protection</title>
    
<style>
    
.svg-email-protection {
  width: 180px;
  height: 24px;
  vertical-align: middle;
}
    
</style>
</head>

<body>

<p>This is my email: <object class="svg-email-protection" data="svg-email-protection.svg" type="image/svg+xml"></object></p>

</body>
</html>

SVG File

<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[

  text {
    font-family: helvetica, arial, sans-serif;
    font-size: 11px;
    fill: red;
  }

  ]]></style>

  </defs>

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

</svg>

No comments to display

Back to top