[SVG]初めてのベクター画像
Webサイトで使う画像はだいたいJPEG・GIF・PNGだと思います…私もそうでした。しかし、「SVGはいいぞ！」ということをつい最近（と言っても去年ブログを書き始めた頃）知って、その綺麗さに驚きました。しかも、どうやらアニメーションもできるらしいです…今回はSVGを作ってみたので、それについて書いてみます。
SVGって？
Scalable Vector Graphicsの略で、Illustratorで作成するようなベクター画像を表示する画像形式の事らしいです。
HTMLコーダーをやっていた遥か過去の事を思い返したのですが…SVG自体はうっすら記憶にあるものの、扱った記憶がありません。
ざっと調べてみると、1998年に形式を策定しようとするワークグループができて、2001年にW3C勧告されていますが、ブラウザが近年まで対応していなかったという事らしいです。なんてこった。
SVGだと何がいいの？
一般的な画像形式はビットマップ形式と呼ばれるようなJPEGやPNG。今までWebページを見てきた人なら見ている形式です。
それらのビットマップ形式とSVGを比べてどこがいいのか、見てみましょう。
ベクター画像だから
ベクター画像のどこが優れているのかというと「拡大縮小しても画像が劣化しない」ことなんです。
AppleがRetinaディスプレイ（4〜5K）に対応させるために、例えば「アイコンやロゴやバナーを表示の2倍の大きさに作成しておいて、埋め込む時に実寸サイズに指定する」といったような事をしなくてもいいわけです。
画面をズームしても画像が荒れないので、スマートフォンやスマートタブレットなどのスマートデバイスとの相性がいいです。
後で細かい調整がしやすい
SVGの拡張子は.svgで、ビットマップ形式と同じく画像として扱えます。
さらにSVGはコードとしてデータを扱うことが可能で、テキストエディタで開いて編集ができます！
例えばパスの色を変更したり、データ自体にクラス名を付加できたりします。というわけで…
CSS3やJavaScriptで要素を動かせる！
データとしてのSVGはCSS3のアニメーションやJavaScriptと組み合わせて、要素を動かしたり、色を変えたり、ぼかしたりとこれまではPhotoshopやIllustratorに頼っていたことも一部とはいえ、できる様になるようです。
See the Pen humberger menu-SVG by necomacustom (@tamayura) on CodePen.27739
ちょっとこれは難しいですね…でも、要点を押さえればこのくらいの動きはなんとかなりそうです。
実際にSVG画像を作ってみる
アニメーションなどの難しいことは置いておいて、まずSVG画像を作ってみます。
今回はAdobe Illustratorを使って作成します。代替ソフトのInkScapeやAffinity Designerでも基本は同じ、のはずです（使ったことがなくて^^;）。
画像を用意する
SVGデータにする画像を用意します。
テキストも全てアウトライン化してください（これを怠ると、ブラウザで表示しようとすると想定と違った見え方になります…）。
なるべくならデータに日本語を混ぜないようにしておきたいですね。レイヤー名を半角英数に修正しておきます。
準備ができたら、上図のようにメニューの オブジェクト>アートボード>オブジェクト全体に合わせる をクリックして、アートボードをオブジェクトぴったりのサイズにします。
画像を別名保存する
次は、メニューの ファイル>別名で保存する をクリックします。
ファイル形式をSVGに変更して保存ボタンをクリックします。
SVGオプション画面が表示されるので、画面真ん中ほどにある “Illustratorの編集機能を保持” のチェックを外してOKボタンをクリックします。
ファイルを編集することも考えて、 “Illustratorの編集機能を保持” にチェックを入れてもう一回保存しておきます。
これで、SVG画像データができました。次は表示させてみましょう。
SVG画像を表示してみよう！
SVGも画像データですので、JPEGやPNGなどと同じく画像をプレビューしたり、HTMLのimgタグで表示できます。
1 | <img src="sakura.svg" alt="sakura"> |
See the Pen sakura-svg by necomacustom (@tamayura) on CodePen.27739
こんな感じです。
widthやheightを指定しないと表示されないこともあります。また、先ほどコードとしても扱えるということをお話ししましたので、そのやり方も説明します。
SVGコードで表示してみよう
SVGで保存する画面、覚えていますでしょうか…？OKボタンから左側に視線を移すと SVGコード というのがあったはずです。そこをクリックしてみましょう。
そうすると下図のようなコードが出てきます。
このコードの <svg>〜</svg> までをコピーしてHTMLファイルに貼り付けると表示できます。
See the Pen sakura – svg code by necomacustom (@tamayura) on CodePen.27739
<svg> のタグ内にwidthを書いて大きさを調整しています…この仕組みが私にはまだよくわかっていません。64*64pxで作成したはずなのですが…。
ともあれ、コードでも画像表示が確認できました。
本日はここまでです。お疲れ様でした！
拡大しても画像が荒れない…これだけでも十分使う価値を感じました。
SVGはまだまだ色々なことができるので、アニメーションやアイコンについての記事も書けたらいいなーと考えています。
しばらく更新が途絶えていたのは、風邪をひいたりちょくちょくポートフォリオを作っていたりだったのですが、これから暑くなっていくので、体調管理には十分気をつけたいですね。ねこま（@necomacustom）でした。