この記事では、Google のブログサービス Blogger で SVG ベクター画像を表示させる方法について、いくつか見ていきます。
現在(2018年10月)時点では Bloggerから SVG画像をアップロードすることはできないため、Bloggerの記事などでSVGを使うためには、
1.Blogger の記事HTMLやテンプレートに直接埋め込む
もしくは
2.外部のアップローダ等にSVGファイルをアップロードした後、そのURLを参照する
ことが必要になります。
Blogger の 記事HTML や テンプレート に直接 SVG画像 を埋め込む
SVGを Data URI に変換して埋め込み
SVG画像を Data URI の文字列に変換し、imgタグのsrc属性やaタグのhref属性などにその Data URI の文字列を入れることで、Bloggerの記事編集画面のHTMLやテンプレートに画像を直接埋め込むことができます。
SVG 画像の Data URIの文字列 への変換については、宜しければこちらのツール
をご利用ください。
インラインSVGとして埋め込み
こちらは、SVGをHTMLに直接埋め込むもう一つの方法です。
SVGファイルをテキストエディタで開き、SVGタグ部分を丸々コピーして、HTMLに直接貼り付けるという手順です。詳しくはこちらのサイトが参考になると思います。
外部のアップローダ等にSVGファイルをアップロードしてそのURLを参照
ファイルホスティングサービスやアップローダは数多くの種類があるとは思いますが、今回は Google のアカウントさえあれば無料で使うことのできる、Google Drive を外部ファイル置き場として使う方法について簡単に見ていきたいと思います。
Google Driveを外部ファイル置き場して使う場合、
・ファイル参照の際に複数回リダイレクトするため、ファイルの読み込み速度に懸念が残る
・そもそも外部ファイルホストとしての使い方は想定されていないため、仕様変更により使えなくなってしまうリスクがある
という欠点がありますので、ほかにもっと良いサービスがある場合にはそちらを利用した方が良いかもしれません。
Google Drive を使う
Google DriveにSVGファイルをアップロードして、「共有可能なリンクを取得」を選択。
共有用のリンクを取得します。(共有用のリンクのコピーが右クリックから行えないときは Windowsの場合は文字列を選択した状態でキーボードの Ctrl + c の同時押しが便利です)
共有用のリンクは以下のような形となっています。
https://drive.google.com/file/d/abcdefghijklmnopqrstuvwxyz/view?usp=sharing
https://drive.google.com/open?id=abcdefghijklmnopqrstuvwxyz
このリンクのID部分(上の例の赤文字部分)を使って、ファイルに直接アクセスできるURLを作ります。
上のテキストエリアの「識別子」部分にID(上の例の赤文字部分)を入力すれば、Google Drive から、画像などのファイルとして直接参照することができるURLになります。
このURLをimgタグのsrc属性などに指定すればOKです。
<img src="https://drive.google.com/uc?id=abcdefghijklmnopqrstuvwxyz"/>
