MIX11で「SVG女子」が紹介されました！
弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。
こちらがその様子です。
日本上陸は4/26！「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。
それでは続きからどうぞ！
SVGの気になる疑問に答えます！
SVGって何？
SVG（Scalable Vector Graphics）は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。 Scalable Vector Graphics - Wikipedia
簡単に言うと、ブラウザで表示できるベクター画像のフォーマットです。
SVGって何がすごいの？どういうところが便利なの？
ベクターデータなので拡大しても荒れません。
例えば、今まで「PC用」「スマホ用」「サムネイル用」などと複数のサイズの画像を用意していたところを、一つのSVGファイルでまかなえるかもしれません。
JavaScriptなどでアニメーションさせたり、動的に変化させることができます。
「曜日や時間によって色を変える」といったことも1つのSVGファイルとJavaScriptがあれば実現できるかもしれません。
どうして今までSVGが普及しなかったの？
最大のシェアをもつInternet Explorer 8（+6,7）がSVGに対応していませんでした。そのため実用的ではなかったのです。
しかしIE9からSVGに正式に対応することとなり、近い将来SVG対応ブラウザが多数を占めることになります。
SVGファイルはどうやって作るの？
Adobe IllustratorからSVG形式で書き出すことができます。
とはいえIE6,7,8に対応しないわけには…
調べてみるとこのようなJSのライブラリがありました。
百聞は一見にしかず！これがSVGだ！
「PLAYボタン」をクリックして実行してみてください。
ただの画像のようですが、「Ctrl +」でブラウザを拡大表示してみてください。まったく荒れません・・・！
SVGに埋め込んだテキストを選択できるのも注目ポイントです。
さらにFirefox4で表示するとアニメーションもします！
SVGで笑い男 - jsdo.it - share JavaScript, HTML5 and CSS
また、コードビューにきりかえて、どのようなhtmlが記述してあるかもチェックしてみてください。svgがどのようなものかわかると思います。
100%SVGのオリジナルアニメが4/26に日本上陸！
SVGを駆使したアニメーションコンテンツ「SVG女子」が4/26に日本でも公開されます！
現在ティザーページでは「SVG女子」の物語が少しずつ公開されています。ぜひ、公開までもうしばらくお待ちください！
またSVG女子を制作したjsdo.itチームのtwitterもありますのでよかったらぜひぜひフォローしてください！