【Illustrator】ラスタ画像からsvg画像を作る方法

この記事は最終更新から4年以上が経過しています。情報が古くなっている可能性があります。

これまでsvg画像は、素材かデザイナーさんから受け取ったAIデータから書き出して使うくらいで、自分で作ったことがありませんでした。
Illustrator自体も書き出し以外はほぼ使えず…(´ω`;)
Photoshopはまだ使えるので、最近四苦八苦デザインし始めたというところです。

今回はPhotoshopから書き出したラスタ画像を、Illustrator CCを使ってsvg化する方法を調べたので覚書きです!

png等の画像からsvg画像を作る方法

この豚画像(png)をsvgにしていきます。

手順

  1. Illustratorでラスタ画像を開く
  2. 画像を選択している状態で、ウィンドウ>画像トレースをクリック

  3. 画像トレースパネルから色々と調整
    プレビューにチェックするといじりながら調整できます。今回は以下の設定にしました。

    プリセット カスタム
    表示 トレース結果とアウトライン
    カラーモード カラー
    パレット 限定
    カラー 30

    「詳細」をクリックするとパスやコーナー、ノイズの調整等が行えます。

    詳しくはこちらから→「画像トレースおよびライブペイントの使用方法 (Illustrator CC)」

  4. 画面上部の拡張ボタンをクリック

  5. 個別のパスに書き出されるので、不要なパスがないか確認する

  6. アセット書き出しからSVG画像を生成

完成!

サイズはpng画像19KB→svg画像3KBになりました!

ポイントは手順5の不要なパスをしっかり削除することです。
あまり意味がない点のようなパスが結構入ったりしますが、その分だけコードが複雑になって重くなるのですっきりさせましょう。

大量の画像を変換したい場合は…

探したら変換してくれるオンラインツールがありました。
私はまだ試していませんが、量が多い場合は使う予定です。

Photoshopのデザインでカスタムシェイプツール等を使っている場合は…

わざわざIllustratorを通さなくても、ベクター式データでデザインしているパーツはPhotoshopから直接書き出せるみたいです。

カスタムシェイプツールも使ったことがないのですが、直接できるのは便利ですね
いずれはphotoshop、Illustratorでバリバリデザインするようになっていきたい…(・艸・)

書き出したSVGの整備

svgスプライト

svgの勉強ついでに、svgスプライトも試してみました!
1つのファイルに複数のSVG画像を扱う手法で、こういったメリットがあります。

  • リクエスト数が減らせる
  • cssで色を変更できる

既成svgのスプライト化は以下のサイトでできます。

IcoMoon

*使い方の詳細はこちらを参考にさせていただきました。
IllustratorとIcoMoonでSVGスプライトのラクラク設定!

スプライトしたら、呼び出したい画像をuse要素を使って表示させます。
demoファイルが入っているのでわかりやすいですね。

See the Pen QQjErm by BICOxxx (@BICOxxx) on CodePen.

HTML内に書くとコードが汚れてメンテナンス性が悪いという点があるので、外部ファイル化する場合は「xlink:href=”#icon-pig01″」ここに「xlink:href=”svgファイル名.svg#icon-pig01″」とすればOKです。

ただIE11以下だとuse要素の外部svgファイルは表示されないらしいので、それに対応するにはPHPかajaxでsvgを読み込む必要があります。

svg画像の軽量化

こちらのサイトで軽量化できます。
今回は10.34%軽量化できました。


今回は、svg初心者の現時点でのsvg画像の作成方法等をまとめてみました!
追々、より効率的なやり方やsvgアニメーション等にも手を出していこうと思います。