タイトルの通り、以前から触ってみたかったSVGにちょっと触ってみたので、分かったことなどまとめました。
SVGについて
ベクターデータで作られた画像データのことです。
ベクターデータは所謂パスで描かれたものですね。写真などピクセルに分割されてるものはラスターデータといいます。
従来の画像データは殆どがラスターデータで、拡大縮小をするとデータが汚くなります。
その点、ベクターデータは拡大縮小しても綺麗に描画できます。
最近は高解像度なディスプレイも増えてきて、さらにレスポンシブに対応するためSVGが注目されています。
詳しくは以下のサイトで。
参考）
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス
そんなSVG、パス使いとしてはいつか触ってみなければと思いつつ、今に至り、ようやく触ってみた次第です。
SVGデータを作ってみる
SVGデータはIllustratorなどで画像を描いて、それをSVGとして書き出す方法と、テキストエディタなどで文字を書いて描く方法とあります。
エディタで描くのはなんだか難しそうなので、今回はIllustratorで書いてみました。
エディタで書いてみたい方は「svg要素の基本的な使い方まとめ」を参考にどうぞ。
Illustratorでデータを作る
とりあえず、Illustratorで画像を作ってみます。
今回はこんな簡単なボタンにしてみました。
画像が出来たら、別名で保存→SVG形式で保存。
とすると、こんなダイアログがでます。
OKを押すと「ボタン1.svg」というファイルが出来上がります。
これでも大丈夫ですが、今回はインライン表示（後述します）で使用したいので、「SVGコードを表示」をクリック。
するとテキストエディタが開いて文字列がたくさん出てきます。これの<svg>〜</svg>部分をコピーしておきます。
注意点
・SVGに書き出す際、アートボードのサイズで書き出されるので、必要であればアートボードのサイズを調整しましょう。
（アートボードツールで要素をダブルクリックすると簡単にその要素のサイズにアートボートのリサイズができます）
・非表示レイヤーなども一緒に書き出される（表示はされないが、データ上は書き込まれてる）ので、必要なレイヤーやオブジェクトだけにまとめてから書き出しましょう。
・<svg>〜</svg>のコピペをし忘れても、書き出されたsvgファイルをテキストエディタで開けば大丈夫です。
SVGをHTML上で表示＆動かす
まず、SVGデータは表示のさせ方にいくつか方法があって、従来の画像データのようにimgで参照する方法と、インライン表示と言われるHTML上に文字列を書くことで表示させる方法とあります。
詳しくは前述の「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス」を参考にしてください。
今回はインライン表示で使ってみます。
SVGファイルのコピーしておいた分をHTML上に貼付けると、こんな感じで表示されました。
See the Pen SVGのインライン表示 by Mei Koutsuki (@mei331) on CodePen.
hoverで色が変わるようにしてみる
この真ん中のグレー部分を色が変わるようにします。
参考サイトではベタ塗りのものについてしか触れていなかったので、自分なりに色々やってみた結果、こんな感じで落ち着きました。
See the Pen svg gradient btn:hover by Mei Koutsuki (@mei331) on CodePen.
グレーの円形グラデーション要素（id=pushbtn1）をコピペして、色の部分だけ変えた赤形のグラデーション要素（id=pushbtn2）を作ります。
この２つの要素をCSSで切り替えるようにして実現しています。
他にいいやり方って、あるんでしょうか…。
SVGのグラデーションについて分かった事
・linearGradient（直線のグラデ）やradialGradient（円形のグラデ）の要素を circle（円形）やrect（四角形）などの形の要素にfill（塗りつぶし）することで表現している。
・fillにはカラーコードなどを指定する他、linearGradientなどのグラデーション要素につけられたID名を指定する事ができる。
・circleやrectにはbackground-colorの指定はできない
クリックで色が変わるようにしてみる
jQueryを使い、クリックしたら色が変わるようにしてみます。
See the Pen SVG gradient btn by Mei Koutsuki (@mei331) on CodePen.
ちなみに、css() でfillの値を変えていますが、attr() でも動きました。
他にも試して分かった事
・svgに、widthとheightの両方を指定してやることでサイズを変形させることができる。
・％指定もできるが、IEだと変形しなかった。
・stroke で線の色、stroke-width で線の太さを変えられる。
こんな感じで、自分なりに使い方が分かってきました。
まだまだ色んな使い方ができるようなので、色々試してみたいと思います。
余談
実はこのSVGで作ったボタンだけのサンプルページがあるんです。
ちなみに何のために作ったかというと、息子のためです。
外出するとき、よくバスを利用するんですが、バスの降車ボタンをすごく押したがるんですよ。
で、それを躱すために、ボタンを押したい欲求をiPhoneを差し出す事で解消したいな、と思いまして。
出来上がってから息子に見せたらひたすら押してました。してやったりです。
ボタンぽちぽちの欲求が凄まじい子どもをお持ちのみなさま、ぜひお使いください。
test1