motogp fan

motogp ファンによる、雑ブログ、ガジェットネタも

はてなブログでSVGタグを使ってみた。・・・・・・失敗?

最近私の中で流行っている、「はてなブログで何が出来るか実験!」ちょっとした、おもちゃ見つけた感じ。

 

今分かっている事は、ブログ内でjQueryプログラムが書ける、
そのプログラムで使う参照データは、自分の別のブログを読み込む事で実現可能。

 これだけでも、いろんなデータ処理のブログが作成できそう。
変な方向のブログ活用になりそうですが、まあいいか。

 

今回はSVGファイルが利用できるのか実験。

イラストレーターで書いた絵をSVG形式で保存して、そのテキストが利用できるのか?
利用できると、絵を動かして遊ぶ事ができます。
レスポンシブデザインって言ってるやつかな?

svgのコード例(ツインリンクモテギのコース図)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="レイヤー_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 640 480" enable-background="new 0 0 640 480" xml:space="preserve">
<path id="XMLID_5_" fill="none" stroke="#999999" stroke-width="10" stroke-miterlimit="10" d="M29.4,119.7
c44.7,78.5,89.3,157,132.2,236.5c3.2,5.9,6.6,12.2,12.3,15.8c5.7,3.7,14.3,3.7,18.3-1.8c2-2.7,2.6-6.5,5.3-8.5
c3.1-2.4,7.6-1.5,11.4-0.4c12.8,3.5,28.7,5.6,39.8,13.3c10.1,7,15.5,18.3,21.1,28.8c5.8,10.8,11.4,21.7,17.5,32.3
c5.1,8.8,11.9,23.9,20.6,29.7c15.8,10.5,32.4-12.9,42.3-22c18.9-17.4,37.9-34.8,56.8-52.2C474.9,329,542.9,266.9,611,204.8
c5-4.6,10.5-10.1,10.3-16.9c-0.2-9.1-11.2-14.9-20.2-13.3c-9,1.6-16.2,8.1-23,14.3c-25.2,23.1-50.8,45.7-76.9,67.9
c-11.6,9.9-23.7,19.2-34.7,29.7c-7.4,7-18.3,20.1-30,17.3c-7.9-1.9-10.2-9.8-10.2-17.2c0-25.4-0.7-50.9,1-76.3
c1.3-19.9,5.4-42.1-13.6-55.6c-27.8-19.5-54.5,21.3-81.7-0.8c-16.7-13.5-64.3-105.6-64.3-105.6s-19-34.9-52.4-36.5
c-27-1.3-54.1,1.5-80.9,4.9c-9.9,1.3-52.1,2.6-39.8,24.5c7.1,12.7,174.3,190.7,174.6,191.1c9.1,9.7,13.6,27.1,7.7,39.5
c-5.2,10.9-20.4,28.4-32.5,31.3c-11.3,2.7-19.1-7-24.8-15.2c-47.7-68.5-95.4-137-143.2-205.4c-5-7.2-10.6-14.8-19-17.2
c-7.2-2.1-14.9,0.2-21.6,3.5c-21.1,10.4-19.2,28.7-9.1,46.6C27.7,116.7,28.6,118.2,29.4,119.7z"/>
</svg>
 このコードをhtml編集で張り付ければ、普通のホームページならコース図が表示できます。

ブログに張り付けた

 結果は、動く時もあれば、動かない時もある。
動いても、コース内側が真っ黒に表示されたりして使えない。
この現象を記録したかったのですが、Chromeがフリーズして、それどころじゃなくなった。
しかも再現性が無く、2度と見る事ができなかった。

現象として、<svg>タグはブログの保存時に削除される。
禁止タグなのでしょう。

ちなみに、下記ページの最後の部分に、アッセンサーキットのコース図が表示されています。
これはSVGタグが消されず残った成功例です。
但し、編集して保存時にブラウザが固まる率が高い。
危険です。よい子はマネしないで。

 

motagp.hatenablog.com

 

諦めていたら、なんと動いた

svgタグは使えないんだと、失敗ブログを書く事に。
張り付けたのは、このコードですよ~と参考にcodeタグに囲って記述しました。
すると、下記の通りコース図が表示されてる。
え、何?、しかも問題無く保存できました。

 

 表示する大きさに違いはありますが、ChromeとIE10で問題無く表示できました。
使えますね。

これを、jQueryで動的に動かせるかは、また今度実験してみましょう。

 

追伸
気分よく、それじゃあ、こないだ書いたロレンソの絵を張り付けてみようって事で、SVG保存したテキストをコピペしたら、容量オーバーでプレビューも保存もできませんでした・・・・文字数制限あるんですね。残念・・・・