Logo

Наталья Устименко

Head of Direct Marketing

Как создать 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", он появится сбоку в виде меню для более детальной настройки.

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

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

Улучшение качества элемента

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

Редактирование слоев

Редактирование текста

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

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

Last post

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

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

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

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

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

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

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

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

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

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

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

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

Если вы создавали файл с нуля, то проще всего будет внести правки тут же в 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 смогут увидеть ваш логотип в своем почтовом ящике.

0.0 из 5 на основе 0 оценок

Наталья Устименко

Head of Direct Marketing

Комментарии 0