Как создать SVG-логотип для BIMI

Индикатор бренда для идентификации сообщений (BIMI) — это относительно новый и быстро развивающийся стандарт, который позволяет брендам отображать свои логотипы в общем списке писем. Почему вокруг столько шума? BIMI дополняет такие цифровые подписи, как SPF, DKIM и DMARC, но есть ряд условий, которые нужно учитывать, если вы захотите произвести эту надстройку.

Важно!

Чтобы логотип BIMI отображался в Gmail, необходимо:

1. Настроить цифровые подписи.

2. Обязательно зарегистрировать логотип как товарный знак.

3. Создать логотип BIMI в SVG-формате и добавить его в MX-запись.

4. Пройти сертификацию DigiCert или Entrust, чтобы получить подтверждение, что логотип принадлежит вашей организации. Цена одного сертификата около 1000 $.

Подробнее

Пример отображения лого

Здесь мы рассмотрим исключительно третий пункт, а именно — как правильно подготовить лого.

Создание SVG-логотипа для BIMI

Требования к логотипу выглядят так:

• Картинка должна быть квадратной с соотношением 1:1. Так как лого в почтовом ящике может размещаться в кругах, квадратах и ​​т. д., изображение должно располагаться по центру.
• Формат — SVG 1.2 Tiny.
• Размер файла не должен превышать 32 КБ.
• Логотип должен быть без текста.

Создание SVG-файла в Adobe Illustrator

1. Если лого создается из изображения, то вы можете выбрать элемент и во вкладке "Object" нажать "Image Trace", чтобы преобразовать его в векторную графику.

Преобразование лого

Если же качество пострадало, то для начала отмените действие (вкладка "Edit" → "Undo Scale").

Отменить действие

Далее во вкладке "Window" выберите пункт "Image Trace", он появится сбоку в виде меню для более детальной настройки.

Преобразование элемента

Здесь вы найдете настройки, с помощью которых можно улучшить качество векторного элемента.

2. Если логотип содержит текст, то его необходимо удалить, так как он не поддерживается в BIMI. Выберите текстовый слой и в меню "Type" нажмите "Create Outlines". Теперь текст отображается как "Group".

3. Выделите все объекты, а затем перейдите к пункту "Object" → "Ungroup". Необходимо повторять это действие, пока все элементы не разгрупируются.

Разгруппировать объекты

Экспорт файла SVG

1. Чтобы логотип соответствовал спецификации BIMI SVG, он должен быть в виде квадрата. В текущем файле необходимо создать новый файл с размерами 1:1 и с цветовым режимом RGB.

Создание изображения 1:1

2. Скопируйте все элементы исходного файла и вставьте их в новый.

3. Далее нажмите " Save As... ", а в " Save as type: " выберите формат SVG.

Сохранение объекта

Сохранить как SVG

4. В строке "SVG Profiles” из выпадающего списка выберите "SVG Tiny 1.2".

Выбор формата

Преобразование файла в SVG P/S

Для проверки преобразования файла SVG Tiny 1.2 в формат SVG P/S необходимо проверить исходный код. Сделать это можно с помощью таких инструментов:

• Standalone GUI Tool для Windows 10
• Standalone GUI Tool для MacOS
• Atom
• CodePen
• Nano
• Sublime Text
• Vim
• Visual Studio Code
• Adobe Illustrator — универсальный дизайнерский инструмент для создания, преобразования и сохранения SVG.

Первые два инструмента помогут автоматически преобразовать файлы, остальные же позволяют выполнить ручное редактирование.

Если вы создавали файл с нуля, то проще всего будет внести правки тут же в Adobe Illustrator, нажав на кнопку "SVG Code".

Если у вас есть только готовый SVG, то проще будет воспользоваться одним из сервисов, предварительно установив его на устройство. Рассмотрим на примере.

Преобразование файла в Sublime Text

По клику на SVG-файл он открывается в Sublime Text. В открывшемся коде XML необходимо:

• Удалить «x/y» атрибуты. То есть вычистить в коде x= “0px” y=”0px”.
• Изменить в baseProfile ”tiny” на baseProfile =”tiny-ps” в строке 3.
• Убрать все теги и атрибуты «style».
• Атрибут «version» имеет значение «1.2».

Редактирование в Sublime Text

• Добавить строку title. Это может быть название вашей компании, которое содержит не более 64 символов. Например, тег title Yourcompany /title

Также обратите внимание, что в XML-файле логотипа

• не должно быть внешних ссылок,
• нежелательна анимация или другие интерактивные элементы.

В результате должен получиться следующий XML-код:

Итоговый код

Размещение лого в DNS

Теперь можно переходить к финальному шагу — разместить картинку у себя на хостинге. Зайдите в админ-панель, где вы регистрировали домен и настраивали цифровые подписи, и добавьте в поле Value:

• v — версию протокола,
• l — путь к вашему логотипу в формате svg.

Добавление лого в записи

Обратите внимание, что политика DMARC должна содержать правило со значением “p=quarantine” или “p=reject” для отображения иконки.

ЗарегистрироватьсяОтправлять email-рассылки по всем правилам

Как выявить и исправить ошибки

1. Если вы уже добавили логотип

Можно проверить его корректность отображения на сайтах domain-checker.valimail.com или bimigroup.org/bimi-generator.

Для этого в строке поиска введите имя вашего домена. Тут вы сможете проверить корректность:

• настройки цифровых подписей,
• размещенного лого для BIMI,
• отображения лого на Light и Dark Mode,
• наличие Verified Mark Certificate (VMC)

Проверка настроек

2. Если вы только планируете добавить логотип BIMI

Предварительно можно сгенерировать BIMI на сайте bimigroup.org/bimi-generator/:

1. Нажмите на кнопку “Generate BIMI”.
2. В открывшемся блоке укажите доменное имя.
3. Загрузите созданный SVG-файл.
4. Нажмите кнопку “Generate BIMI Record”.

BIMI-генератор

Если в записи есть ошибки, вы увидите их полный список и подсказки по исправлению.

Подсветка ошибок

Если ошибок нет и все выполнено правильно, то отобразится следующее уведомление: “BIMI record generated successfully!!!”✔️

Уведомление об успешном добавлении

3. Ничего не помогло?

Если вы уверены, что все настроено верно и ваш сертификат принят, но логотип по-прежнему не отображается — обратитесь в поддержку Verizon Media.

Поддержка Verizon Media

Готово! Теперь получатели ваших рассылок в почтовиках AOL, Verizon, Yahoo и Gmail смогут увидеть ваш логотип в своем почтовом ящике.