LSSさんの「初めて描いたSVG」を絵本仕立てに
私が購読しているブログに興味津々な記事を見つけました。
LSSさんのブログ
の記事中、「初めて描いたSVG」と紹介されていた絵がこちら。
][ ]
LSSさんは、この絵をこう説明しています。
青空、お日様、草原！
この程度ならCSSでも描けそう、というのは置いておいて、とりあえずできました^^
要するに画像の絵ではなく、コードの文字情報を使ってブラウザに表示させてるということかな？（自信なし）
コードを見ると、思った以上にシンプルで短いです。
<p>[ ]<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
</svg>[ ]</p>
（※ 後述する［］半角入り仕様にしています。）
これを使って、ちょっと遊んでみたくなりました。
だって、気になるじゃないですか。
青空と草原は納得ですが、お日様？ん？ほんとに？（え？そこ？）
『ほんとにお日様なの？』
確かめる方法を考えてみました。
お日様は、その成分が水素とヘリウムだそうですが、成分を確かめる方法を知りません。円周が約4,379,000 kmらしいですが、その距離を歩いて測れるものでもありません。
そもそも、ほんとにお日様なら、近づくと焼け死んでしまいます。
これは困ったぞ。
何かいい方法は無いものか・・・と、たくさんたくさん悩みました。
でも、いくら悩んでも、いい方法は見つからず、時間だけが過ぎていきます。
あんまり長い時間が経ってしまったので、赤い円が沈みかけていました。
おぉ！まさにサバンナの地平線に沈む夕陽です。
赤い円は確かにお日様なのでは・・・
って、あれ？
・・・ ・・・
あれれっ？！
地平線を越えて、赤い大玉がこっちに転がって来てる～～！！
きゃあ～～！！逃げろ～～！
ああ～、どこかへ行っちゃった。
更に時間が過ぎて暗くなった頃…
あ、白い大玉になって帰って来た。どこに行くんだろう？
地平線も越えちゃったよ？
ん？これは？
][
夜空、草原、そしてお月様！
おしまい。
絵の描き方
なんのことはない、SLLさんのコードの並びと色、円の位置指定を変えた絵を並べてお話風にしてみたのでした。その辺、ちょっとパズルチックで楽しめました。
私の遅いPC回線でも、「ほんとにお日様なのかな」の文字が入ったアイキャッチ画像に比べて、サクサクって感じの表示が楽しいです。
「コードの前後に［］を半角文字で挿入する」
事で、はてなブログの「勝手にコード削除」を回避する事ができます。
LSSさんご指摘の通り、最初［］を入れずに貼りつけてみると、見事に消えてしまいました。で、［］を入れると表示成功です。
でも・・・絵の両横に［］が残ってしまいました。
冒頭の「紹介されていた絵がこちら。」とした部分だけは、［］の文字色を白にして見えなくする卑怯？な手段でごまかしていますが、他の絵の両横の下にちょこんと［］が残ってしまいます。
ちなみにお月様がのぼった絵は、絵のさらに両端の［と］を削除して、]絵[ にできました。でも、この、]と[ のどちらを削除しても絵が消えてしまいます。
改めて、LSSさんのブログの柄を見たのですが、どうも［と］は表示されていないようです。何故でしょう？ ？？？
そう言えば、テレビのマジックショーでこんな感じなのを見たことがあります。
マジシャンが種明しをしてそれを観客にやらせます。それはそれでマジックができるのですが、更にその上をいくマジックが披露され、再び観客が驚く感じ。
そんなイメージ。
う～～む。
LSSさんにも、お日様にも、お月様にも、ちっとも近づけません。
でも、ちょっとした作品を一つ仕上げた感じで満足、満足。
LSSさん、ありがとうございました。
----------------------------
＜追記＞
LSSさんからコメント欄で以下の説明をいただきました。
［］についてですが、はてなブログの「見たまま編集」だと画面上に出てきているように見えてしまいますが、プレビューと公開後は、非表示になります。
（実際、LSSのも見たまま編集画面だと左右に［］がついた状態です）
はてなブログの見たまま編集画面は、記事アップ後のイメージがつかみやすく助かっているのですが、限界もあるのですね。また一つ勉強になりました。
ありがとうございます。
