簡単にSVGを試してみよう!Illustratorで書き出して表示されるまで

最近よく耳にする「SVG(Scalable Vector Graphics)」何度か流行りそう…と話題になっているようですが、未だに対応ブラウザやクライアント要望などが原因で、なかなか普及していない現状があるそうです。

「対応ブラウザもIE9以上でいいですよ〜」という声もチラホラ耳にしますので、そろそろ普及するかもしれませんね!

ちなみにSVGは画像のようで画像でない、XMLという言語で記述されています。線を引く、塗る、といった指示データが入っていて、感覚としてはベクターデータです。

なので、拡大しても滑らかです!

また、XMLという言語で構成されているため、可変性があり、ユーザーの入力をもとに表示を変えることや、他言語化なども比較的柔軟に実現できる特徴を持っています。

早速、Illustratorでデータを作成してからWebブラウザで見るまでやってみたいと思います。

Illustratorでベクターデータの作成

tumblr_inline_n8pt54HuE61syzas3
universionsのロゴでやってみます。

SVGで保存

tumblr_inline_n8pt7wi9dm1syzas3

SVGのオプションを選択

tumblr_inline_n8pt8qfmvB1syzas3
SVGで保存してIMGタグで表示されてもいいんですが、今回は先にも記述したとおり、可変性のあるテキストで…ということで上のスクリーンショットの通りSVG CodeというボタンでXMLの状態のデータを出力します。

htmlに記述する

出されたコードにタグなども記載されているため、そのまま表示させたいところにコピペします。

tumblr_inline_n8ptc9UHj51syzas3
小さくしても

tumblr_inline_n8ptcnz4F11syzas3
大きくしても綺麗です。


いかがでしたでしょうか?
データの大きさについては、複雑なものによっては画像データより大きい傾向にあるようです。(ベクターデータ全てに言えることですね)
そして書き出し方が現在少し面倒ですので実際の使用を想定すると、毎回SVG化するのでなく、ロゴマークなど主要なもののみ、という形になりそうです。

閲覧する拡大率や解像度あわせて描画するので、スマートフォン時代にはマッチしますね!
簡単にお試しいただけるので、是非みなさんもお試しください。

フォローして続編をチェック

@universionsをフォロー