arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[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に変更
SVGオプション画面が表示されるので、画面真ん中ほどにある “Illustratorの編集機能を保持” のチェックを外してOKボタンをクリックします。

ファイルを編集することも考えて、 “Illustratorの編集機能を保持” にチェックを入れてもう一回保存しておきます。

これで、SVG画像データができました。次は表示させてみましょう。

SVG画像を表示してみよう!

SVGも画像データですので、JPEGやPNGなどと同じく画像をプレビューしたり、HTMLのimgタグで表示できます。


See the Pen sakura-svg by necomacustom (@tamayura) on CodePen.27739


こんな感じです。

widthheightを指定しないと表示されないこともあります。また、先ほどコードとしても扱えるということをお話ししましたので、そのやり方も説明します。

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)でした。

Share

Leave a comment

PAGE TOP