Teams版Power Virtual Agents のチャットボットにSVG形式の画像が表示できるのか？

はじめに

@h-nagao さんが、Power AppsでSVGを利用した日本地図の都道府県を塗るアプリを作られました。

#PowerApps でSVGを利用して日本地図を塗ってみる！
ついでに簡単な情報も表示！ pic.twitter.com/fR91UyuwH2

— Hiro (@mofumofu_dance) February 16, 2022

これをTeams版Power Virtual Agetnsで実装しました。SVGを作成するのはPower Automateです。

が、結論から言いますと、

TeamsチャットボットでのSVG表示は不可能です

よって、代替案を考えてみましたので記載いたします。

注意

本記事を実装するにあたり、プレミアムコネクタを利用するためPower Automateの有償ライセンスが必要となります。

SVGがダメなら表示できる形式に変換すればいい

表題の通り、Power AutomateでSVGをPNGに変換してチャットボットへ返します。

全体像です。

各アクションの説明

SVG画像データを定義

svgタグから始まるSVGデータを用意してください。

Cloudmersive API で扱えるJSON形式に変換

入力には下記を記載してください

{
  "$content-type": "image/svg+xml",
  "$content": "@{base64(outputs('作成'))}"
}

Cloudmersive API でSVG→PNGに変換

画像の形式変換にはCloudmersiveコネクタを利用します。
［Cloudmersive](https://account.cloudmersive.com/)

Signupし、API Keyをコピー取得します。
個人利用であれば「Free Tier」を選択し、追加料金なしで利用可能です。

Cloudmersive Image Processingを選択し

接続名は任意、APIキーには上記で取得したKeyを設定します。

対象画像ファイルは上記の「Cloudmersive API で扱えるJSON形式に変換」で作成したアクションのOutputを、出力には[任意の名前].pngを指定します。

チャットボットで表示できるようにHTMLタグを付与

Temas上のチャットボットではタグが解釈可能です。
このアクションの出力をトピックに返し、メッセージに埋め込めばチャットボットで画像が表示されます。

<img src="data:image/png;base64,@{body('入力画像を_PNG_形式に変換する')?['$content']}"> 

まとめ

SVGはレスポンシブに表示可能で汎用性が高く便利な画像形式です。
が、残念ながらTeamsでの表示は不可のため、今回のような工夫が必要です。活用ください。