1.SVGとは

svgとはpngやjpgなどの画像形式の一つです。svgの特徴は拡大したり縮小したりしても画質が劣化しないところです。 (画像形式による違いはまた別のページに書いています。ページへ移動) 大きさがよく変化する場合にも便利です。よくロゴや最初に出てくるおしゃれなアニメーションを作るときに利用されています。

SVG画像

PNG画像

2.SVGの作り方

svgを作る方法は2つ(くらい)の方法あります。1つ目はpngやjpgなどの他の形式から変換する方法です。 この方法は比較的簡単でいいのですが、色がうまく反映されなかったり線が綺麗にならなかったりすることがあります。

2つ目の方法はもとからsvgで作成することです。この方法は面倒ですが綺麗に作ることができます。 よくsvg等の画像を作るときはAdobeのIllustratorやPhotoshopを使うことが多いのです。 しかし、金額が高いので私はInkscapeやGIMPなどのソフトウェアを使っています。 (ただあまりやったことがないので後々更新します。多分…)

SVGアニメーション

svgアニメーションはツールやライブラリーを使う場合とcssで作る場合があります。