以前は少し難があったのですが、色々改善されてスマートに利用できるようになっています。良いです。
はてなブログで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画像を表示するには以下の方法があります。
- 本文中またはヘッダの中でData URIスキームを使う*1
- ファイルアップロードの機能が「はてなブログ」には無いので、はてなブログProの特典機能の一つ、はてなダイアリーのファイルアップロード機能を使う
- はてなブログProは良い
ブログ全体で使う場合は「ヘッダに挿入」を上手く利用して、styleタグの中にclassまたはIDにcontentとして用意する事で表示できます。
いやちょっとよく分からないのですけれどソース出してちょうだい
このようなものを貼り付けると、スマートフォン版のヘッダーアイコンの隣にちょこっと表示されます。
こんなやつです。(他にも当てているので上下になっています)
本文中のみで利用する場合は、HTML編集などで直接ペタリと貼ると良いかと思います。*2
id:psneはVisual Studio使いなので、適当なHTMLを書いて便利機能からDataURIへ変換していますが、そんな事をしていたら日が暮れてしまう。という方向けに、便利な変換サービスがあります。
※しっくり来ない場合は、同じタイトルで検索したサイトを利用すると良いでしょう。
はてなダイアリーのファイルアップロード機能には、直接リンクのURLを表示する項目があります。
そちらをコピーしてはてなブログ側に貼り付けると、
このように挿入されます。
実際に貼り付けたものが、こちらです。
Data URI版
はてなダイアリーのファイルアップロード機能
見えますか?見えない場合はブラウザを新しくしましょう :)
困った時は、人力検索で質問しよう!
※匿名質問の場合はブログの現状が確認できず、的確な回答が得られない場合があります。
さて。ブックマークしたエントリーが無ければ本文中でスマート(?)に利用できる様になっている事にも気づかなかったので、有り難いエントリーです。ありがとうございます。
また、上記エントリーにブックマークしている id:rikuo さんは、SVGに関する情報を詳しく書かれているエントリーを多数掲載しています。
ブラウザがSVGを利用できない場合の代替方法(フォールバック)のTipsや対応状況などが非常に役立ちます。
個人的に「これはすごい」と思うエントリーの紹介は、またのお話。*4
使うと分かる便利なSVG。もう少し広まると良いと願います。
進撃のはてなブログ。