Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

はてなブログでSVG画像を表示させる方法

f:id:life-is-bitter:20160425131307j:plain

個人的にはてなブログで難点だなと思うことのひとつにSVG画像の表示があります。
SVGは、ピクセル(ラスター)ではなくベクター画像であるためいくら拡大されてもジャギーが出ず、高解像度ディスプレイ向けには最適な画像形式となります。はてなフォトライフにはSVG画像をアップロードできないので、自分で用意したサーバーか直リンク可能なオンラインストレージを経由する必要があり、少々面倒な仕様になっています。サイトのロゴをSVG画像にしたいという思いから、はてなブログではSVG画像をどうやったら表示できるのかいろいろ試してみたので方法をまとめました。

はてなブログでSVG画像を表示させる方法

今回はWordPress等を利用していたり自分のメインサイトを持っていてサーバーが用意できる人向けではなく、はてなブログのみを利用していてサーバーを借りるほどではないけど...という人向けになります。基本的には直リンク可能なオンラインストレージを経由する必要があります。

1. Dropboxを経由してSVG画像を表示させる

直リンクが可能なストレージとして安定のDropbox。Publicフォルダを作ってその中に表示させたいSVGファイルを入れておけば表示が可能です。ただし、問題点はPublicフォルダを作れるのが課金をしてDropbox Pro/Businessにアップグレードしている人のみということ。以下、Dropbox Proを使用している前提での手順です。

①Publicフォルダをつくる

まず、Publicフォルダがない人は作りましょう。

上記ページの下部あたりにこのような「Publicフォルダを有効」にするリンクがあるのでそちらをクリックしてPublicフォルダを作成します。

f:id:life-is-bitter:20160425153430p:plain

このようにPublicフォルダができたら完了です。

f:id:life-is-bitter:20160425153759p:plain

②SVG画像のリンクを得る

Publicフォルダを作ってSVG画像をその中に放り込んだら選択します。すると赤で囲った「公開リンクをコピー」が出てくるのでクリック。

f:id:life-is-bitter:20160425160015p:plain

SVG画像の直リンクアドレスが得られます。

f:id:life-is-bitter:20160425160157p:plain

③SVG画像を表示させる

あとは<img>タグ記述*1で表示することができます。

f:id:life-is-bitter:20160425161511p:plain

今回は、記事中に表示させてみようということでその結果がこちら。

svg image

くっきりばっちりベクター画像として表示されています。フォトライフにはアップロードできなくても表示させるだけなら問題ないようです。

2. Cloudupを経由してSVG画像を表示させる

Dropboxを使用する方法の場合、月額課金をしてDropbox Proである必要があるためお金をかけたくないという人には厳しいですね。しかもDropbox Proにするくらいなら格安サーバーを借りたほうが安上がりという…。そこで『Cloudup』という無料で使える直リンク可能なストレージサービスを利用してSVG画像を表示させる方法があります。

Cloudup

f:id:life-is-bitter:20160425164026p:plain

無料で使える直リンク可能なストレージが意外と探してもないんですよね。JPGならOneDriveなどでも直リンク可能なのですが、SVGとなると画像というよりもファイルとして認識されてしまうようで、いろいろ探して試した結果『Cloudup』なら可能でした。

①アカウントを作成してSVGファイルをドラック&ドロップ

まずはアカウント作成してDashboardにアクセスしたらドラック&ドロップでSVGファイルをアップロードしましょう。

f:id:life-is-bitter:20160425164452p:plain

②SVG画像のリンクを得る

アップロードしたファイルをクリックしてプレビューモードにしたら、右上のMOREからDIRECT URLをクリックします。クリックすると自動でアドレスがコピーされます。

f:id:life-is-bitter:20160425164832p:plain

③あとはSVG画像を表示させる

アドレスがコピーされたらあとは<img>タグを使って表示させるだけ。

svg image

こちらもしっかりベクター画像として表示されています。

最後に

今回ははてなブログの記事内にSVG画像を表示させるという形で紹介しましたが、HTML記述ができるサイドバーやヘッダー・フッターなどでも表示させることができると思います。また、SVG画像はCSS3を使えばアニメーションができるみたいで可能性もたくさんありますね。ただ、私はブログタイトル部分の画像をSVGに変えたい思っているのですが、その部分はコードを書きかえて干渉できないみたいなのでJPG画像でがまんするしかないようです…。どなたかブログタイトル部分のロゴをSVGにする方法知りませんかねえ…。

*1:<img src="SVG画像のリンクアドレス">