web-dev-qa-db-ja.com

電子メールのHTMLにSVGを埋め込み、ほとんど/すべての電子メールブラウザーで表示できるようにするにはどうすればよいですか?

SVGでグラフを生成し、それらのグラフが埋め込まれたHTMLページをメールで送信したい(サーバーに保存されておらず、リンクされた画像で表示されている)。

Object要素を使用してSVGを直接埋め込み、SVGをシリアル化およびURIエンコードして、文字列全体をdivの背景画像として指定しようとしました。 Outlook 2013には何も表示されないようです。アイデアはありますか?

21
ztforster

SVGは多くのメールクライアントでサポートされていません。私が見た中で最高のガイドは スタイルキャンペーンです。私が保証する短い読み物です(アンナはとても賢いです!)。

TL; DR:iOSメールクライアントと(驚くべきことに)Blackberryでさまざまな手法が機能します。しかし、Android、Outlook、およびほとんどすべてのデスクトップWebメール電子メールSVGはSVGをサポートしていないため、フォールバックが必要です。

29
Ted Goas

更新: " Microsoft Word、PowerPoint、Outlook、およびWindows、Mac、AndroidおよびWindows Mobile上のOffice 365用Excelドキュメント、プレゼンテーション、電子メール、およびワークブック内のベクターグラフィック(.SVG)ファイル。 "( Microsoft OfficeでSVG画像を編集365

Microsoft Officeのアイコンの挿入 ガイドの「SVGファイルの挿入」セクションから

SVGファイルを挿入する

SVGはスケーラブルなベクターグラフィックファイルの略で、画像の品質を損なうことなくファイルを回転、色付け、サイズ変更できます。 Word、PowerPoint、Outlook、ExcelなどのOfficeアプリは、SVGファイルの挿入と編集をサポートしています。


非営利団体のロゴをSVGに変換して正しく表示する必要があったため、

  1. オンラインツールを検索しました(私の場合は「png to svg」をグーグルで検索)

  2. サイトはそれを生成しましたが、登録しなければダウンロードさせてくれません。

  3. 開発者コンソールでSVG画像を開きました(Chrome:画像を右クリックして[検査]を選択します)

  4. <svg>タグ全体を単純なテキストファイルにコピーし、.svg拡張子で保存します( this SO thread から)。

  5. Outlookで、「 [挿入]> [画像]> [ファイルから画像]に移動してSVG画像を挿入します。

4
toraritte