Использование SVG для защиты электронной почты — это эффективный подход, позволяющий скрыть email-адрес от ботов, в то время как он остается доступным для людей. Рассмотрим, как это работает и чем отличается от методов на основе JavaScript, таких как метод Cloudflare.

Преимущества SVG

SVG (Scalable Vector Graphics) позволяет отображать текст как изображение, что делает его менее доступным для спам-ботов. Адрес электронной почты может быть закодирован внутри SVG-файла, что усложняет его парсинг.

Пример кода

Вот базовый пример использования SVG для защиты email:

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" viewBox="0 0 200 24">
    <title id="title">Email Us!</title>
    <defs>
        <style>
            text {
                font-size: 16px;
                fill: rgb(0, 0, 255);
            }

            a:focus text, a:hover text {
                text-decoration: underline 2px solid rgb(0, 0, 255);
                text-underline-offset: 4px;
            }
        </style>
    </defs>
    <a href="mailto:myemail@mydomain.tld" aria-label="Email Us!">
        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">myemail@mydomain.tld</text>
    </a>
</svg>

Вставляем на страницу:

<object data="/path/to/file.svg" type="image/svg+xml" style="height: 24px; vertical-align: middle;"></object>

Получаем:

Этот код генерирует изображение с текстом email-адреса, которое можно вставить в веб-страницу. Так как текст является частью изображения, боты не могут легко извлечь его. При этом пользователи могут кликнуть на изображение и отправить письмо по адресу. Дополнив код стилями и атрибутами, можно добиться желаемого внешнего вида и поведения. А также, можно закодировать email-адрес в base64, чтобы усложнить его расшифровку.

Сравнение с подходом Cloudflare

В статье рассматривается метод защиты email через Cloudflare, который обфусцирует адрес с помощью JavaScript.

Использование SVG, напротив, не требует внешних зависимостей и работает даже при отключенном JavaScript, что делает его более универсальным решением. Однако оно не предоставляет такой же уровень динамической защиты, как метод Cloudflare, поэтому оба метода могут быть использованы в зависимости от потребностей.

Дополнительные меры

Для повышения уровня защиты можно комбинировать SVG с другими методами, например, добавлением капчи или ограничением прав доступа на страницы с контактной информацией.

Такой подход к защите email-адресов помогает снизить вероятность спама, сохраняя доступность для пользователей.