27 октября 2021
5449
10 мин
0.00
Как создать 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
-
Если лого создается из изображения, то вы можете выбрать элемент и во вкладке "Object" нажать "Image Trace", чтобы преобразовать его в векторную графику.
Если же качество пострадало, то для начала отмените действие (вкладка "Edit" → "Undo Scale").
Далее во вкладке "Window" выберите пункт "Image Trace", он появится сбоку в виде меню для более детальной настройки.
Здесь вы найдете настройки, с помощью которых можно улучшить качество векторного элемента.
-
Если логотип содержит текст, то его необходимо удалить, так как он не поддерживается в BIMI. Выберите текстовый слой и в меню "Type" нажмите "Create Outlines". Теперь текст отображается как "Group".
-
Выделите все объекты, а затем перейдите к пункту "Object" → "Ungroup". Необходимо повторять это действие, пока все элементы не разгрупируются.
Экспорт файла SVG
-
Чтобы логотип соответствовал спецификации BIMI SVG, он должен быть в виде квадрата. В текущем файле необходимо создать новый файл с размерами 1:1 и с цветовым режимом RGB.
-
Скопируйте все элементы исходного файла и вставьте их в новый.
-
Далее нажмите " Save As... ", а в " Save as type: " выберите формат SVG.
-
В строке "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».
-
Добавить строку 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/:
-
Нажмите на кнопку “Generate BIMI”.
-
В открывшемся блоке укажите доменное имя.
-
Загрузите созданный SVG-файл.
-
Нажмите кнопку “Generate BIMI Record”.
Если в записи есть ошибки, вы увидите их полный список и подсказки по исправлению.
Если ошибок нет и все выполнено правильно, то отобразится следующее уведомление: “BIMI record generated successfully!!!”✔️
3. Ничего не помогло?
Если вы уверены, что все настроено верно и ваш сертификат принят, но логотип по-прежнему не отображается — обратитесь в поддержку Verizon Media.
Готово! Теперь получатели ваших рассылок в почтовиках AOL, Verizon, Yahoo и Gmail смогут увидеть ваш логотип в своем почтовом ящике.