BIMI SVG ファイルを作成する（詳しい手順）

このページでは、BIMI を使用してメールにロゴを追加するために、BIMI SVG ファイルを作成する方法について説明します。

現在、BIMI のすべての要件を満たす SVG ファイル作成アプリケーションはありません。BIMI 用の SVG ファイルは通常、テキスト エディタか専用のスクリプトを使用して手動で修正する必要があります。詳しくは、BIMI SVG ファイルを作成するための推奨ツールについてのページをご覧ください。

Adobe Illustrator を使用して SVG ファイルを作成し、テキスト エディタで小さな変更を加えることができます。SVG ファイルを作成する際には、SVG ファイルの要件と推奨事項を必ず守ってください。

  1. 加工元のベクター画像を Illustrator で開きます。 ファイル画像が、Gmail BIMI 画像の以下の要件と推奨事項（BIMI 標準の要件に加えて）を満たしていることを確認します。
    1. 高さと幅の最小値は 96 ピクセルです。
    2. 画像サイズは絶対ピクセルで指定する必要があります。例: width="96" height="96"
    3. 画像サイズを指定する際に相対サイズを使用しないでください。例: width="100%" height="100%"
    4. ロゴ画像は正方形の中央に配置する必要があります。
    5. ロゴ画像の背景は無地である必要があります。透明な背景は想定どおりに表示されないことがあります。
    6. SVG ファイルのサイズは 32 KB 以下である必要があります。
    7. アクセシビリティのために、SVG ファイルには <desc> 要素（説明）を含める必要があります。
    8. SVG ファイルに、ビットマップ、他のファイルへのリンク、テキスト、またはグループ化されたオブジェクトを含めることはできません。テキストをオブジェクトとしてファイルに残すには、Illustrator のアウトライン作成機能を使います。
  2. [ファイル] > [別名で保存] の順に選択します。
  3. [名前を付けて保存] ウィンドウで、次の操作を行います。
    • [名前を付けて保存] フィールドにファイル名を入力します。小文字とダッシュのみを使用することをおすすめします（例: mybrand-bimi.svg）。特殊文字は使用しないでください。
    • [フォーマット] の横にある [SVG（svg）] を選択します。[SVG 圧縮（svgz）] は選択しないでください。
  4. [保存] をクリックします。
  5. [SVG オプション] ウィンドウで、次の操作を行います。
    • [SVG プロファイル] の横にある [SVG Tiny 1.2] を選択します。
    • [画像の場所] の横にある [Illustrator の編集機能を保持] を選択します。
  6. [OK] をクリックしてファイルの保存を完了します。

  7. テキスト エディタでファイルを開きます。次のような内容のファイルが開きます。ファイルの最初の部分を変更します。

    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="96px"
y="96px" viewBox="0 0 742.23 828.45" overflow="visible" xml:space="preserve">
<g id="design">

  8. テキスト ファイルの 3 行目と 4 行目を変更します。

    • svg version の値が 1.2 であることを確認します。そうでない場合は、1.2 に変更します。
    • baseProfile の値を tiny-ps に変更します。
    • x 属性と y 属性を値ごと削除します。
    • 手順 8 の例に示すように、<title> タグと値を追加します。追加する場所は、<svg より後かつ <g> より前である必要があります。

  9. 編集を終えたら、ファイルの最初の部分が次のようになっていることを確認します。

    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
overflow="visible" xml:space="preserve">
<title>Solarmora Services</title>
<g id="design">

  10. 変更内容をテキスト ファイルに保存します。ファイル拡張子は .svg です。

次のステップ

次に、VMC と関連する PEM ファイルと証明書ファイルを取得します。


Google、Google Workspace、および関連するマークとロゴは、Google LLC の商標です。その他すべての企業名および商品名は関連各社の商標です。