メニュー
【SSL証明書】FAQ/情報

BIMI用ロゴの作り方 — SVG Tiny P/Sの要件と変換手順

ページ更新日:2026/08/22

BIMI でメールに表示するロゴは、通常の SVG ファイルではなく SVG Tiny P/S(SVG Tiny Portable/Secure) という形式に準拠している必要があります。
Illustrator や Inkscape から普通に「SVG で書き出し」したファイルはほぼ確実に非準拠で、そのまま使うとロゴが表示されません。
このページでは、要件を満たすファイルの中身と、手元の SVG を変換する具体的な手順、よくある不適合の直し方を解説します。
取得・設定の全体の流れは VMC/CMC証明書の取得・BIMI設定の完全手順ガイド をご覧ください。

SVG Tiny P/S とは

SVG Tiny P/S は、SVG の仕様のうち SVG Tiny 1.2 をベースに、メール表示という用途に合わせてできることを意図的に制限したプロファイルです。
受信者のメールソフト上で表示されるため、外部への通信やスクリプト実行といったセキュリティ上の危険につながる要素をすべて排除することが目的です。

要件 内容
ベース規格 SVG Tiny 1.2(baseProfile="tiny-ps" の指定が必要)
<title> 要素 必須。ブランド名を記述します。これが無いと不適合になります。
外部参照 禁止。外部の画像・フォント・スタイルシートを参照できません(<image> による外部読み込み、@font-face 等)。
スクリプト 禁止。<script>on〜 属性は使えません。
アニメーション 禁止。<animate> 等の動的要素は含められません。
テキスト要素 不可。文字はすべてアウトライン化(パス化)してください。フォントに依存すると環境によって表示が変わるためです。
<desc> 要素 仕様上は任意ですが、アクセシビリティのため入れることが推奨されています。Google は Gmail 向けの要件として明記しています。
x / y 属性 ルートの <svg>x / y 属性を付けてはいけません(SVG Tiny P/S のスキーマに存在しません)。デザインツールの書き出しで x="0px" などが残りがちなので削除します。
形状 アスペクト比 1:1(正方形)。ロゴは正方形の中央に配置します。
サイズ指定
width/height/viewBox
SVG Tiny P/S の仕様上、widthheightviewBoxいずれも任意で、併記もできます。
ただし Gmail は独自の上乗せ要件として「width/height を絶対値(px)で指定し、96px 以上にすること」「width="100%" のような相対指定は不可」を課しています。
Gmail 対応を含めるなら、正方形の viewBox と絶対値の width/height(96以上)を両方書くのが最も安全です。
背景 透過ではなく背景色で塗りつぶすことが推奨されます(ダークモードでロゴが見えなくなるのを防ぐため)。
ファイルサイズ 小さいほど良く、32KB以下が目安です。
公開場所 HTTPS でアクセスできる URL に置く必要があります(HTTP 不可)。

最小構成のサンプル

要件を満たす SVG Tiny P/S は、おおよそ次のような形になります。baseProfile="tiny-ps"<title> が要点です。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2" baseProfile="tiny-ps"
     width="96" height="96" viewBox="0 0 512 512">
  <title>株式会社エスロジカル</title>
  <desc>株式会社エスロジカルのロゴ</desc>
  <rect width="512" height="512" fill="#ffffff"/>
  <path d="M...Z" fill="#0a4f9c"/>
</svg>

手持ちのロゴを変換する手順

  1. 元データを正方形に整える:デザインツール上でアートボードを正方形にし、ロゴが中央に収まるよう余白を調整します。
  2. 文字をアウトライン化する:Illustrator なら「書式 > アウトラインを作成」、Inkscape なら「パス > オブジェクトをパスへ」。これを忘れるとフォント参照が残り不適合になります。
  3. 背景を塗りつぶす:透過のままだと、受信者がダークモードのときロゴが見えなくなることがあります。白などの背景矩形を敷きます。
  4. SVG で書き出す:Illustrator は「SVG 1.1」で書き出し、Inkscape は「最適化 SVG」で書き出します(この時点ではまだ Tiny P/S ではありません)。
  5. 不要な要素を削除する:エディタで開き、<metadata><style><script>・エディタ固有の名前空間(sodipodi:inkscape: 等)・<defs> 内の未使用定義・コメントをすべて削除します。
  6. ルート要素を書き換える<svg>version="1.2"baseProfile="tiny-ps" を付けます。x / y 属性があれば削除します。
    Gmail 対応のため width / height は絶対値(px)で 96 以上を指定し、正方形の viewBox も併記します(width="100%" のような相対指定は不可)。
  7. <title> と <desc> を追加する<svg> の直後にブランド名の <title>(必須)と、説明の <desc>(推奨)を入れます。
  8. HTTPS の URL に配置する:自社サイト上など、外部から HTTPS で取得できる場所に置きます。
  9. 検証するBIMI / VMC・CMC 設定チェックツール でドメインを検査すると、公開中のロゴを実際に取得して SVG Tiny P/S 準拠かどうかを判定します。

※ 証明書に埋め込むロゴと、BIMI レコードの l= で公開するロゴは同一のファイルである必要があります。あとからロゴを差し替える場合は証明書の再発行も必要になるためご注意ください。

よくある不適合と対処

症状・原因 対処
baseProfile="tiny-ps" が無い 最も多い不適合です。ルート要素に version="1.2" baseProfile="tiny-ps" を手で追加します。
<title> が無い <svg> 直下にブランド名の <title> を追加します。
<text> が残っている 文字がアウトライン化されていません。デザインツールに戻ってパス化してから書き出し直します。
エディタ固有の属性が残っている inkscape: / sodipodi: などの名前空間と属性を削除します。
x / y 属性が残っている ルートの <svg> から削除します(x="0px" が書き出しで残りがちです)。
Gmailだけロゴが出ない Gmail は width/height絶対値px・96以上で要求します。width="100%" のような相対指定や、サイズ未指定になっていないか確認してください(他社のメールソフトでは表示されていても Gmail だけ出ない、という形で現れます)。
viewBox が正方形でない アートボードを正方形にして書き出し直します。横長のロゴは上下に余白を足して正方形に収めます。
ロゴは正しいのに表示されない ロゴ以外(DMARC・証明書・DNSレコード)に原因がある可能性があります。BIMIロゴが表示されない時のチェックリスト をご覧ください。

商標との関係(重要)

VMC の対象は「登録商標と同一と認められるロゴ」のみです。
たとえば文字が長いロゴに改行を入れただけでも「同一」と認められず、修正登録商標(Modified Registered Mark)と判定されて CMC の扱いになることがあります。
BIMI 用にロゴを整える際、正方形に収めるためにレイアウトを変更したくなりますが、登録商標そのものの形を変えないよう注意してください(周囲に余白を足すことは形状の変更にあたりません)。
これから商標出願する場合は、メールで表示したいロゴそのままの形で出願することを強くおすすめします。
商標登録がない場合、または上記に該当する場合は CMC をご利用ください(→ 商標登録なしでメールにロゴを表示する方法)。

ご注文

 

📌 関連ページ:
BIMIとは?メールにブランドロゴを表示する仕組みとVMC・CMCの違い
VMC/CMC証明書の取得・BIMI設定の完全手順ガイド
BIMIに必要なDMARC設定 — p=noneのままロゴが出ない理由と引き上げ手順
BIMI対応メールソフト一覧 — Gmail・Apple Mail・Outlookのロゴ表示状況
BIMIロゴが表示されない時のチェックリスト
BIMI / VMC・CMC 設定チェックツール(無料)