SVG画像の色を変える方法

当社のウェブサイトパターンオーダーでは、手書きのロゴをSVG形式の画像（拡大しても劣化しないデータ）にしてプレゼントしております。ロゴの色は、お選びいただいたイメージカラーにしておりますが、変更したい場合もあるかと思います。そこで、SVG形式の画像の色を変更して、汎用的なPNGファイルに変換する方法について、ご紹介します。

SVGとは(メリット)

SVGはScalable Vector Graphicsの略で、画像の形式の一つです。
Vector Graphicsとは、デジタル大辞泉によると次のとおりです。

コンピューターで画像や文字を表示する際、線や面などの図形要素に関するパラメーターで表現する方式。一方、色のついたドット（点）の集まりで表現する場合は、ビットマップグラフィックスという。ベクトル画像。ベクターグラフィックス。

デジタル大辞泉　https://www.weblio.jp/content/Vector+graphics

何のことやら…ですが、大事なことはこれだけです。

「拡大しても画像がギザギザにならない」

実例でお示しします。

元の画像の大きさは200×100ピクセルです。拡大していくとこうなります。

SVGのデメリット

「拡大してもギザギザにならない」というのは、ホームページにも名刺にも封筒にも使いたいロゴファイルとしてはとても便利なのですが、SVGはまだ簡単に編集できるソフトが標準では用意されていません。ブラウザはほとんどのものが対応していますが、ペイントなどでは扱えません。
そのままでは色を変えたり、印刷用などで「画像はJPEGかPNGで送ってください」と言われたときに対応出来ません。
それでは困りますよね。

そこで、専用ツール無しでSVG画像の色を変えて、PNGに変換する方法をご紹介します。

SVG画像の色を変更する方法

こちらのサービスを利用させていただきましょう。

iconscout Create and Edit SVG Icons Online

ブラウザから無料で利用できます。
使い方は簡単です。先ほどのSVG画像を使って実際にやってみましょう。

まずはサイトにアクセスしたら、画像を中央の「＋」部分にドロップ…の前に、一応利用規約を確認しておきましょう。

利用規約　ここで禁止されていることはしてはいけません。

利用規約等の確認が終わりましたら、改めて画像をドロップ。（Sign Up Log Inしなくても使えます。）
すると、次のような画面にかわります。

ここで色を変更していきます。
グラデーションの基調色を変えたり、グレースケール化したりも出来ますが、今回の画像は単一色なのでとりあえず好きな色に変えていきます。

DEFAULT COLORから色を選んだり、プリセットされたカラーパレットから選ぶこともできますし、

CUSTOM COLORから好きな色を選ぶこともできます。
色を選んだら、アイコンに背景をつけることもできます。

背景の形、色、大きさ、角丸の調整もできます。

できあがったら、サイズを選んでダウンロード。サイズは自分で設定することもできます。封筒などの印刷用にも使えますね。

完了です！

本当に手軽に、色の変更とサイズを選んでPNGファイルに変換することができます。