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ファイルに変換することができます。

あなたの事務を楽にするコツや、事務に関する最新ニュースをお届けします。
配信は月2回程度。
メールアドレスだけでOKです。
投稿者プロフィール

-
神奈川県内の地方自治体で
・総務(文書管理、議会対応)
・システム運用(教育、福祉、医療)
・会計(出納、資金管理、下水道企業会計)
・監査(社会福祉法人)
・小規模企業支援、労働行政、起業支援
に携わった後、2020年に業務改善系ITコンサルタントとして起業(神奈川県小規模企業支援強化事業コーディネーター)
現在、株式会社TheFlow代表取締役
最新の投稿
公共入札2025年2月6日【元自治体職員直伝】官公庁入札で勝つための戦略:公共入札で落札できない? 原因と解決策
公共入札2025年1月22日【元自治体職員直伝】官公庁入札で勝つための戦略:総合評価落札方式と企画競争の違い
公共入札2025年1月14日【元自治体職員直伝】官公庁入札で勝つための戦略:営業活動の重要性
公共入札2024年12月17日【元自治体職員直伝】官公庁入札で勝つための戦略:図表の重要性と効果的な活用法