Webデザイン・Webデザイナー専門スクール【インターネット・アカデミー】のオフィシャルブログです。
TPAC注目キーワード：「SVG」編
前回のTPAC2010の記事で、今後おさえておきたいキーワードを４つご紹介しました。
今日は、その中のひとつ、「SVG」についてご紹介します。
SVG（Scalable Vector Graphics）とは、XMLによって記述されたベクターグラフィック言語とよばれるもので、W3Cが1998年から提唱・開発しています。
XML？
ベクターグラフィック？？
と、どうしてもムズカシイ言葉が出てきてしまうのですが…。
カンタンに言うと、
「グラフィックソフトを使わず、XML言語で命令を書くことで、Web上に絵が表示できる技術」なのです。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
では、画像をベクトル、
SVGで表現することの何が良いのでしょうか？？
■メリット
・画面の表示で拡大・縮小をしても、画像が荒れない（ギザギザにならない）
・画像の中の一部分にリンクを貼ることができる（JavaScriptは不要）
・SVGで描いた画像と、JavaScriptを連携することができる（表現に発展性がある）
これらのメリットを生かして、
国土地理院では電子国土基幹情報をSVGで配信する試みをしているようです。
たしかに、表示の拡大・縮小が頻繁におこなわれる地図データには、
SVGが最適ですね☆
ただし、もちろん欠点もあります。
■デメリット
・表示する画像の情報量が多い場合、
通常のグラフィックソフトで作った画像データよりもファイルサイズが大きくなる可能性がある
・Internet Explorerでは表示ができない。(※1)
ファイルサイズが大きくなるのは多少は仕方がないことかもしれません…。
表示に関しても、Internet Explorer以外でしたらほぼすべてのWebブラウザで対応しているのと、
最新バージョン「Internet Explorer 9」では、SVG対応になる予定ですので、
こちらもあまり大きな問題ではありません。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
では次に、SVGの作り方についてお話しましょう。
XML言語で命令を書く。それだけです。
ただ、手打ちで命令文を作っていくと複雑なグラフィックを描くのが大変ですね。
でも実は、グラフィックソフトでもSVGが作れるのです！
対応しているソフトは、次のとおりです。
・Adobe Illustrator
・Microsoft Office Visio
・CorelDRAW
and more...
そう、いつも使っているIllustratorでもSVGが作れちゃうのです！
通常の要領でグラフィックを描き、
それをSVGとして書き出すだけ☆（JPEGやGIFにするのと同じ感覚です。）
カンタンですね！
ちなみに、「Open Clip Art Library」というサイトでは、
SVGデータが配布されています♪
自分が作ったSVGデータもアップロードして公開できるので、
SVGってどんなモノ？？と気になる方はぜひ見てみてください☆
………・・・………・・・………………・・・………・・・………・・・………………・・・
(※1)
・Internet Explorerでも、「Adobe SVG Viewer」というソフトをインストールすれば閲覧できます。
過去関連記事
＋「IE9、こんにちは。～前編～」
