SVG で遊んでみました
SVG で遊んでみました。 SVGとは、Scalable Vector Graphicsの略でXMLでベクターグラフィックスを書いちゃおう!!っていうフォーマットです。 ちなみにベクターグラフィックスとは拡大縮小しても劣化しないグラフィック画像文書のことです。イラレとかがそうですね。
SVGは、一時期話題になったのですがIEが採用しないことを決めたせいで普及しなかった悲しい仕様です。 ですが、Chromeでは動きます(さすが)しIE9も採用する(やっとかよ!!)ことを決めているので 今後ちょこちょこ普及していくのかなと思っていたりします。W3Cも勧告出してますしね♪♪
ちょっとしたサンプルを作ってみたので良かったら見ていってください。 国旗を作ってみました。シンボル化機能をうまく使えばオブジェクト指向っぽく書けるのでなかなか面白かったです。 アメリカだけ大きいのは端数をなくすためであって、決して汎アメリカ主義者ではありませんw 国旗をダブルクリックすると、SVGのソースが表示されます。
私の環境では、現在(2010/11/8)Chromeでしか動作しませんでした。
他にはFirefox 4betaとIE9が対応もしくは今後対応予定みたいです。
日本
我らが日の丸
<svg width="300" height="200"> <rect fill="#fff" width="300" height="200" /> <circle fill="#bc002d" cx=150 cy=100 r=60 /> </svg>
アメリカ
アメリカです。ダントツで大変だった。
<svg width="390" height="260"> <rect fill="#fff" width="390" height="260" /> <defs> <path id="star" d="M2,111 h300 l-242.5,176.5 92.5,-285.5 92.5,285.5 z" fill="#fff" stroke-width="0" transform="scale(0.05)" /> <g id="star6"> <use xlink:href="#star" x=10 /> <use xlink:href="#star" x=40 /> <use xlink:href="#star" x=70 /> <use xlink:href="#star" x=100 /> <use xlink:href="#star" x=130 /> <use xlink:href="#star" x=160 /> </g> <g id="star5"> <use xlink:href="#star" x=25 /> <use xlink:href="#star" x=55 /> <use xlink:href="#star" x=85 /> <use xlink:href="#star" x=115 /> <use xlink:href="#star" x=145 /> </g> <rect id="stripe" width="390" height="20" fill="#B22234" /> </defs> <use xlink:href="#stripe" /> <use xlink:href="#stripe" y="40" /> <use xlink:href="#stripe" y="80" /> <use xlink:href="#stripe" y="120" /> <use xlink:href="#stripe" y="160" /> <use xlink:href="#stripe" y="200" /> <use xlink:href="#stripe" y="240" /> <rect width="185" height="140" fill="#3c3b6e" /> <use xlink:href="#star6" y="2.5" /> <use xlink:href="#star5" y="17.5" /> <use xlink:href="#star6" y="32.5" /> <use xlink:href="#star5" y="47.5" /> <use xlink:href="#star6" y="62.5" /> <use xlink:href="#star5" y="77.5" /> <use xlink:href="#star6" y="92.5" /> <use xlink:href="#star5" y="107.5" /> <use xlink:href="#star6" y="122.5" /> </svg>
ドイツ
ビール
<svg width="270" height="180"> <rect width="300" height="60" fill="#000" /> <rect width="300" height="60" y="60" fill="#d00" /> <rect width="300" height="60" y="120" fill="#ffce00" /> </svg>
フランス
フランスパン
<svg width="300" height="200"> <rect width="100" height="200" fill="#ed2939" /> <rect width="100" height="200" x="100" fill="#fff" /> <rect width="100" height="200" x="200" fill="#002395" /> </svg>
イタリア
アンチョビ
<svg width="300" height="200"> <rect width="100" height="200" fill="#009246" /> <rect width="100" height="200" x="100" fill="#fff" /> <rect width="100" height="200" x="200" fill="#ce2b37" /> </svg>
@Rosetta_Halt なんだかんだで気に入ってたからねw
似てる背景画像探すのに苦労したわ
ついでに、これ前話したSVGについての記事です
よかったら見てちょ♪ Chromeでしか見れないけど
http://tmlife.net/web/svg/play-svg.html