OutlookメールにSVG形式の署名画像を追加する方法【ブラウザ版対応】

Scalable Vector Graphics（SVG）は、1999年に登場したベクター画像ファイル形式です。XMLベースのベクター画像フォーマットであり、さまざまなWebグラフィックスに活用できます。普及当初は伸び悩みましたが、2017年までにはほぼすべてのモダンブラウザがSVGをレンダリングできるようになり、多くのベクタードローソフトでもSVG形式での書き出しが可能になりました。

なぜSVGを使うのか？

SVGはユーザーに高い柔軟性をもたらします。SVGの実体は、線・曲線・色によって図形を記述するシンプルなプレーンテキストにすぎません。以下はSVGファイルのコード例です。

SVGの主なメリットは以下の通りです。

• 軽量なファイルサイズ – Webグラフィックスに最適
• CSSとの柔軟な連携 – テキストエディタだけで手軽にグラフィックをカスタマイズ可能
• 拡大縮小に強い – サイズを変更しても画質が劣化しない
• 幅広いブラウザ対応 – ほぼすべてのブラウザがサポート

OutlookメールにSVG署名ファイルを追加するには？

SVGへの対応は広がりつつあるものの、主要なメールサービスでは依然としてこのファイル形式がネイティブにサポートされていません。とはいえ、工夫次第でSVG画像をメールに埋め込むことは可能です。ブラウザのHTMLソースコードを扱う少しのコツが必要ですが、以下の手順に従えば誰でも実現できます。

注意：必ずブラウザ版のOutlookを使用してください。Windows標準の「メール」アプリやOutlookデスクトップアプリでは、SVG署名に対応していません。

ステップ1：画像のURLを取得する

1. まず、使用したい画像や署名がImgurやTinyPicなどのオンライン画像ホスティングサイトにアップロードされていることを確認します。本チュートリアルでは、Google画像検索で見つけたSVG署名を使用します。
2. 次に、画像上で右クリックし、「画像アドレスをコピー」を選択します。

なお、画像を保存してOutlookにインライン画像として直接挿入することも試せますが、「このファイル形式はサポートされていません」というエラーが表示され、失敗します。

ステップ2：開発者ツールを開く

次に、署名を挿入したいメール作成画面を開きます。本文の空いている部分で右クリックし、「検証（Inspect）」をクリックします。すると、大量のHTMLコードを含む新しいパネルが開きます。このコードは、現在表示している画面の構造を定義しています。

ステップ3：空の要素を作成する

このステップが少し難しいところです。表示されているコードはすべてWebページのレイアウトに関するものです。HTMLコードの各部分にカーソルを合わせると、ページ上の対応する要素がハイライト表示されます。

続いて、コードの最終行の後に半角スペースを追加します。これにより、HTMLソースコードエディタ内に新しい空の要素が生成されます。

ステップ4：HTMLコードを挿入する

次に、その空の要素を編集して、署名用のHTMLコードを挿入します。対象の要素を右クリックし、「HTMLとして編集（Edit as HTML）」を選択してください。既存の内容をすべて消去したら、以下のHTMLコードを貼り付けます。

<img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Adriansosa_signature.svg" style="width:200px;height:121px;">

このHTMLコードは2つの部分で構成されています。前半のsrc属性は画像ファイルの場所（URL）を指定し、後半のstyle属性は画像の表示サイズ（幅・高さ）を設定します。

コードを入力したら、メール本文の空いている部分をクリックしてください。署名画像が正しく表示されるはずです。

留意点

• 受信側でGmailなど他のメールサービスを使用している場合、SVG署名が正しく表示されないことがあります。
• メールへのSVG埋め込みはネイティブにサポートされていないため、確実性を重視するなら、すべてのメールサービスでサポートされているPNG形式の署名画像を使うのがおすすめです。