あけおめ企画 – 画像を一切使用せず SVG で鏡餅年賀状を描いてみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

元旦に投稿したエントリー『アケオメー!! 画像を使わずに HTML5 Canvas, CSS, SVG それぞれで年賀状を作ってみた.』の個別解説です.

今回解説するのは SVG Version についてです. SVG を触ったのは『SVG で遊んでみました』で国旗書いた以来なので色々と忘れててちょっと焦った.

nengazyou

Read More

SVG で遊んでみました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

SVG で遊んでみました。 SVGとは、Scalable Vector Graphicsの略でXMLでベクターグラフィックスを書いちゃおう!!っていうフォーマットです。 ちなみにベクターグラフィックスとは拡大縮小しても劣化しないグラフィック画像文書のことです。イラレとかがそうですね。

SVGは、一時期話題になったのですがIEが採用しないことを決めたせいで普及しなかった悲しい仕様です。 ですが、Chromeでは動きます(さすが)しIE9も採用する(やっとかよ!!)ことを決めているので 今後ちょこちょこ普及していくのかなと思っていたりします。W3Cも勧告出してますしね♪♪

ちょっとしたサンプルを作ってみたので良かったら見ていってください。 国旗を作ってみました。シンボル化機能をうまく使えばオブジェクト指向っぽく書けるのでなかなか面白かったです。 アメリカだけ大きいのは端数をなくすためであって、決して汎アメリカ主義者ではありませんw 国旗をダブルクリックすると、SVGのソースが表示されます。

私の環境では、現在(2010/11/8)Chromeでしか動作しませんでした。
他にはFirefox 4betaとIE9が対応もしくは今後対応予定みたいです。

Read More