HTML5でこんなことできるよ!SVGを使った海外サイト

HTML5で書かれたWebサイト、多くなりましたよね。

無印良品ローソンのWebサイトもHTML5で書かれています。

「HTML5?HTMLやCSSの一番新しいバージョンでしょ?」という方もいるかもしれませんが、そうではないんです。

※正式なHTML5の定義はこちらをご覧下さい。

その中でもHTML5でサポートされているインラインSVGの作品集をご覧下さい!

スポンサーリンク
世界で10万人が学んだプログラミング講座
iPhoneアプリ開発 流行りのキュレーションアプリを1週間で作ってみよう!

1.Wrist

[browser-shot width=”500″ url=”http://www.wrist.im/”]

本物の腕時計のようなデザイン。
これは画像ではなく、HTML5のSVGを使って描かれています。

2.Barcamp Omaha 2013

[browser-shot width=”500″ url=”http://barcampomaha.org/”]

可愛いキャラクターと、星が繋がって描かれる文字。
とても素敵な演出ですね。

3.vlog.it

[browser-shot width=”500″ url=”http://vlog.it/”]

何かとても見入ってしまうアニメーション。
これもSVGを使って描かれているんです。

4.World Landmarks On Globe

[browser-shot width=”500″ url=”http://svg.kvalitne.cz/worldlandmarks/worldlandmarks.svg”]

地球がぐるぐる回っていて、とても素敵なアニメーションですね。
色々なパターンに応用できそうです。

5.svgopen.org

[browser-shot width=”500″ url=”http://www.svgopen.org/2007/papers/SLOGO_Abstract/SLogo_Fig9_Goldberg_Machine.svg”]

まるでピタゴラスイッチですね。
こんな面白いことがブラウザ上で簡単に動かせるって知っていましたか?

いかがでしたかでしょうか。

HTML5のSVGを使うと色んな動きのあるサイトが作れるんです。

特にSVGはベクター形式という縮尺が変わっても画質が変わらない形式ですので、とても便利です。

世界で10万人がプログラミング教材の詳細を見る

スポンサーリンク
【新版】世界で10万人が受講!未経験からWebプログラマーになるための全て
【新版】世界で10万人が受講!未経験からWebプログラマーになるための全て

シェアする

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

フォローする