仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

近年ウェブサイトなどで使われてきているSVGを触ってみました

公開日:

HTML

近年ウェブサイトなどで使われてきているSVGを触ってみました

 

今回は、いろんなサイトに使われてきているSVGを触ってみたいと思います。
アイコンに使われる他に、アニメーションのあるグラフィック等、インタラクティブ性もあったり。
SVGに関して知らないことが多い(98%ぐらい)ので、ここから少しずつ覚えていきたいと思います。

 

 

 

SVGとは

Scalable Vector Graphicsの略で、XMLをベースとした、2Dベクター画像記述言語だそうです。
jpgやpng、gifのようなビットマップ画像と違いベクター画像なので、大きさが変わっても綺麗に表示できるのが特長。

 

 

 

IllustratorでSVGを書き出す

html_svg_1

 

html_svg_2

 

Illustratorで作ったイメージを別名で保存します。
保存形式のプルダウンから「SVG(*.SVG)」を選択します。

 

html_svg_3

 

今回は特に何もいじらず「OK」を押すと、ペンギンのSVGが書き出されます。

 

サンプルはこちら[penguin_svg.svg]

 

html_svg_4

 

ブラウザでSVGを開くと、画像のように表示されます。

 

 

ソースはこのようになっています。

 

 

 

少し動かしてみる

html_svg_5

 

先ほど書きだされたコードをHTMLに貼ります。

 

html_svg_6

 

 

コードの「circle」部分を上のソースへ差し替えます。

 

[サンプルHTML]

 

ブラウザを確認すると目がでかくなったり小さくなったりします。
なにこれ。

 

 

 

まとめ

アイコンで利用するだけならともかく、アニメーションが絡むと覚えないといけないところが多いですね。
ただ、覚えたら面白いものが出きそうだとワクワク感があります。
jQueryでアニメーションを制御できるものもあるらしいので、調べてみたいとおもいます。

 

ブログ作成者6
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00