はてなブログでSVG画像を利用・表示させる

以前は少し難があったのですが、色々改善されてスマートに利用できるようになっています。良いです。

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

DataURI使ってみましょう。http://psn.hatenablog.jp/entry/2016/04/23/213001
2016/04/26 23:39

はてなブログでSVG画像を表示するには以下の方法があります。

ブログ全体で使う場合は「ヘッダに挿入」を上手く利用して、styleタグの中にclassまたはIDにcontentとして用意する事で表示できます。

<style>
#header .header-blog-icon:before {content: url(data:image/svg+xml;charset=utf-8;base64, (中略) );}
</style>

このようなものを貼り付けると、スマートフォン版のヘッダーアイコンの隣にちょこっと表示されます。

こんなやつです。(他にも当てているので上下になっています)

本文中のみで利用する場合は、HTML編集などで直接ペタリと貼ると良いかと思います。*2

<img class="http-image" src="data:image/svg+xml;base64, (中略) " alt="SVGやつ" />

id:psneはVisual Studio使いなので、適当なHTMLを書いて便利機能からDataURIへ変換していますが、そんな事をしていたら日が暮れてしまう。という方向けに、便利な変換サービスがあります。

※しっくり来ない場合は、同じタイトルで検索したサイトを利用すると良いでしょう。

はてなダイアリーのファイルアップロード機能には、直接リンクのURLを表示する項目があります。
そちらをコピーしてはてなブログ側に貼り付けると、

HTML編集
このように挿入されます。

実際に貼り付けたものが、こちらです。

Data URI版

はてなダイアリーのファイルアップロード機能

見えますか？見えない場合はブラウザを新しくしましょう :)

困った時は、人力検索で質問しよう！
※匿名質問の場合はブログの現状が確認できず、的確な回答が得られない場合があります。

さて。ブックマークしたエントリーが無ければ本文中でスマート(?)に利用できる様になっている事にも気づかなかったので、有り難いエントリーです。ありがとうございます。

また、上記エントリーにブックマークしている id:rikuo さんは、SVGに関する情報を詳しく書かれているエントリーを多数掲載しています。
ブラウザがSVGを利用できない場合の代替方法(フォールバック)のTipsや対応状況などが非常に役立ちます。

個人的に「これはすごい」と思うエントリーの紹介は、またのお話。*4

使うと分かる便利なSVG。もう少し広まると良いと願います。

*1:ただし、正式な機能ではないので利用できなくなっても怒らない

*2:この辺りの説明は、以前試した時と大きく結果が異なったので書き直してあります。以前は使えなかったものが使える。便利です。

*3:便利便利！とURLをリンクしようとしたらSVGが直接表示されたので驚いたやつ

*4:これはSVGに対する愛と情熱が無いと書けないですよね　というエントリー

すなばいじり