BloggerでSVGを使う

Bloggerでは「画像を挿入」ではSVG画像をアップロードすることが出来ない。
HTMLの編集から直接インラインSVGを貼ることは出来るのだがこれは面倒だ。

しかしHTMLの編集で<img>タグを使って別の場所にアップロードされたSVG画像を指定すればBlogger記事内でSVGを使うことができる。

imgタグを手打ちして表示したSVG
<img src="fileのurl" />



また、一旦何かの画像を挿入してからリンクを書き直せば、通常の画像のようにクリックした時にポップアップして表示させるようにできる。

ポップアップ出来るようにしたSVG

<a href="fileのurl" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="fileのurl" width="200" /></a>

※aタグ内とimgタグ内の2箇所を修正する。

SVGをアップロードする場所だが、Bloggerを使っていることだしGoogleサイトのファイルキャビネットを使うのが良いのではないかと思う。

Googleサイトの使い方は以下のリンクを参考。
Blogger:外部ファイル置き場をGoogleドライブからGoogleサイトへ変更

アップロードしたら、ダウンロードのところからURLを取得できる。

ダウンロード用リンクから
https://sites.google.com/site/homuhomu/hogehoge.svg?attredirects=0&d=1
の.svg以降を除いた部分が画像への直リンクになる。