今回はicooon-monoと言われるアイコン素材の提供サイトでダウンロードしたSVGの使い方を紹介します。
icooon-monoはjpg、pngの画像データとしてアイコンをダウンロードできる無料アイコンサイトです。
他にもSVGでのダウンロードが可能で少しの知識があれば下記のように自由なサイズと大きさでアイコンを使用できます。
今回はその編集の仕方と使い方についてを紹介します。
icooon-monoのサイトは下記のリンクからいけます。
JPGとPNG
JPGまたはPNGの素材をダウンロードしたい場合は、サイト内でアイコンを見つけたらDLボタンの「PNG」or「JPG」の部分を押せば完了です。
その際に、カラー選択とサイズの選択が可能になっています。
PNGとJPGデータのアイコンは非常に簡単に利用できる方法だが、HTMLでの編集や埋め込みは少しやり辛いです。
しっかりとしたアイコンとしてサイトに埋め込んでいきたい場合はSVGのデータを編集して使っていく方が良いかと思います。
SVGの編集
SVGでは自由に大きさと色を変えることが出来、配置に関してもHTML内に埋め込めるのでアイコンフォントと同じように利用できます。
下記は実際にSVGアイコン使ったリストです。
- ごはん
- スープ
- ドリンク
- デザート
※再販や配布は禁止なのでSVGの実際のコードは載せれませんので編集部分を文章で解説します。
まずは、アイコンをSVG形式でDLしたらテキストエディタで開き<svg>〜</svg>の部分をコピーしてサイトの表示させたい部分に貼り付けます。
そのコードの2.3行目にwidth=”512px” height=”512px”と書いてある部分があるのでそこで大きさを変更します。
SVGのコード内にある3.4行目〜7.8行目あたりにある<style>の中に.st0{fill:#111111;}のようにカラーを設定している部分があるのでそこのカラーコードを変更する事でカラーを変更できます。
.st0{fill:#111111;}の「.st0」をオリジナルのクラス名に変更する。<path class=”st0″…>の部分をクラス名に合わせる。
<path class=”st0″…>は複数に設置されているアイコンもあるおで全てに適応させて下さい。
httpのリンクがあるのでSSL化されているサイトなら「s」を付けてあげましょう。（Command＋Fで検索をかけてあげればすぐに見つかります。）
以上が「icooon-monoでDLしたSVGの色とサイズの変更方法」でした。
SVGはCSSやHTMLとはまた違った技術ですがHTMLにも埋め込めら画像劣化がなく容量を圧迫しない優れものです。理解が出来る人ならばicooon-monoでもSVGのアイコンがお勧めです。
