国朗3703800※この記事は2017年3月30日に執筆された記事です。現在は仕様が異なる可能性があります。スマートフォン、Retinaディスプレイ、など高解像度ディスプレイへの対応にSVGが注目されるなか、WebNAUTでもリニューアルに伴いアイコン類を全てSVGにしました。この記事では、サイトのリニューアルや立ち上げなど、沢山のアイコンをSVG形式で作るときに役立つ方法を紹介します。Graphics”の略称であり、簡単に言うとweb上で使える拡縮可能なベクター画像です。下記のようなメリットがあります。スマホ対応・Retina対応も1つのファイルでOK同じデザインなら、スマホ用、hover用、色違い...、などいくつもpng画像を用意する必要はありません。結果的に画像が減るのでHTTPリクエスト数の削減にも繋がります。後から大きいサイズが必要になった時にPhotoshop開いてサイズ変えなくでも、CSS上でサイズや色を変えることができます。CodePen.アニメーションできるPhotoshopやFlashでgifアニメーション作らずとも、CSSやjavaScriptで動きを付けれます。CodePen.具体的な作り方とポイントを紹介それではsvgアイコンを作る際のポイントを見ていきましょう。今回はこちらの5つのアイコンを作る例として解説していきます。100px」で進めていきますします。アイコンに使う場合のアートボードサイズは編集しやすければいくつでも良いのですが、正方形がどんな形のアイコンでも展開しやすいと思います。他の設定は、[RGBカラー][72PPI]にするなど基本的なweb用の設定でOKです。幅or高さが一杯になるように作ります。今回は100pxに合わせます。アートボードとオブジェクトの間に余白がある場合は余白も含めて書き出されます。細かいところですが、ここがズレているとwebに表示する際もズレて見える原因となってしまいます。ダイレクト選択ツールなどを使い調整していきます。ピクセルプレビュー]から変更できます。パスを一繋がりにして複合パスにテキストデータや、線のデータ、角を丸くするなどの効果を使っている場合は、全てアウトライン化しましょう。白い箇所もオブジェクトが乗ってる状態ではなく、型抜きのパスファインダーなどを使い1つのオブジェクトにします。色を変えたりする場合はCSSで変更しやすいように一色のオブジェクトにしておきましょう。各アートボードに名前を付けておくと一括書き出しする際に、ファイル名に反映されるので非常に効率的です。幅or高さを一杯にしないほうが良い場合も基本的には幅or高さが一杯になるように作りますが、下記のSNSボタン群のように各アイコンの大きさを揃えたい場合があると思います。この場合、CSSで後から一つ一つサイズ調整することもできますが、他の箇所にはあまり登場しないアイコンであれば、アートボード内でサイズを整えてしまったほうが、コードもスッキリしますし見た目も整えやすくなります。SVG画像として書き出す最終の状態を一度保存してから、別名で保存をして書き出します。別名で保存のダイアログで、ファイル形式を【SVG形式】に選択。【アートボードごとに作成】にチェックを入れます。次のダイアログでは、下記のような設定にします。illustrator編集機能をオンにすると重くなってしまうので、ここではオフが推奨です。詳細に設定を変更することも可能ですが、基本的には上記のような設定で充分な場合が多いです。これでSVG画像の作成は完了です。無事に5枚のSVG画像が並んでいるはずです。Web上に表示させるhtmlへの実装方法はいくつかあるのですが、例えば、画像のように<img>タグで貼る形式があります。class="test-icon">他にもアイコンフォント化したりスプライトにしたり、色々あるので詳しくはまた別の記事で解説していきたいと思います。まとめSVG画像の作成方法を一通り紹介してみましたがいかがでしょうか。最初は戸惑う点もありましたが、一度作ってしまえば簡単です。デザイナーWebを中心に色々なデザイン作っています。新しいものが好きです。漫画は毎週読んでます。更新中!ビーワークスの多様な実績をぜひご覧ください。Inc.の登録商標または商標です。Inc.の登録商標または商標です。その他、本サイトに記載されている会社名・商品名は、各社の商標または登録商標です。reserved株式会社ビーワークスの運営する情報メディア。クリエイティブに関する様々なお役立ち情報を通して、ビーワークスのこだわりや制作プロセスをご紹介しています。企業サイトへお問い合わせ。