すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

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

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

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

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

2016/04/26 23:39

DataURI使ってみましょう。http://psn.hatenablog.jp/entry/2016/04/23/213001 - psne のコメント / はてなブックマーク

 

 

はてなブログ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:psneVisual Studio使いなので、適当なHTMLを書いて便利機能からDataURIへ変換していますが、そんな事をしていたら日が暮れてしまう。という方向けに、便利な変換サービスがあります。

Data URI Scheme 変換

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

 

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

貼り付ける
*3

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

 

 

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

 

Data URI

sq-hatebu.svg

 

 

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

http://d.hatena.ne.jp/psne/files/sq-hatebu.svg?d=y

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

 

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

 

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

 

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

d.hatena.ne.jp

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

 

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

 

 

進撃のはてなブログ

NEW リズムでともだち こぐまのトンピー

NEW リズムでともだち こぐまのトンピー

 

 

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

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

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

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