2013 02 10

SVG

オオイヌノフグリ

こうした足下の草が花を咲かせると、何だか春が近付いてくる感じがするんだよな。 だんだん暖かくなってくるんだなって。 これが梅だと、まだまだ寒い日があるんだろうって、まるで逆向きだったりするのだが。 咲くのは梅の方が後なのに。

あ、梅の方が後だからその感想なのか。 寒い時期だからこそ、たまの暖かい日が、そして暖かくなり始める時期だからこそ、たまの寒い日が、その時期の花とセットで印象に残るのだな。

+

先日、どこだったかをページ丸ごと保存したら、その中で画像としてSVGが使われていた。 で、気になってサポート状況を調べてみたら、今ではほぼ全てのブラウザがサポートしているんだね。 昔、というのはIE6が主流の頃だが、SVGの表示はpluginが必要で取り扱いが面倒なものだったんだけど。 この状況なら、ちょっとした画像やアイコンは全部SVGでもいいのかもしれないな。 拡大しても奇麗だし。

ということで、簡単なSVGのテスト。 埋め込みSVGに対応していれば、ここに目が見えるはず。

SVG部分のコード

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3c.org/2000/svg"> <path d="M 0 50 Q 50 10 100 50 Q 50 90 0 50" style="fill:#f0f0f0;stroke:#000000;stroke-width:1;" /> <circle fill="#000000" cx="50" cy="50" r="20" /> </svg>

この程度なら、図形を頭の中で組み立てるのに何の問題も無い。 せっかくだから、グラデーションとかアニメーションもやってみようかな。