SVG で遊んでみました

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

このエントリーをはてなブックマークに追加
Pocket

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

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

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

参考リンク

http://www.asahi-net.or.jp/~uf4k-nkjm/SVG/index.html#index http://book.mycom.co.jp/wd/sampledata/201003view/wsp/index.html

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT