SVG画像の色を変える方法
当社のウェブサイトパターンオーダーでは、手書きのロゴをSVG形式の画像(拡大しても劣化しないデータ)にしてプレゼントしております。ロゴの色は、お選びいただいたイメージカラーにしておりますが、変更したい場合もあるかと思います。そこで、SVG形式の画像の色を変更して、汎用的なPNGファイルに変換する方法について、ご紹介します。
SVGとは(メリット)
SVGはScalable Vector Graphicsの略で、画像の形式の一つです。
Vector Graphicsとは、デジタル大辞泉によると次のとおりです。
コンピューターで画像や文字を表示する際、線や面などの図形要素に関するパラメーターで表現する方式。一方、色のついたドット(点)の集まりで表現する場合は、ビットマップグラフィックスという。ベクトル画像。ベクターグラフィックス。
デジタル大辞泉 https://www.weblio.jp/content/Vector+graphics
何のことやら…ですが、大事なことはこれだけです。
「拡大しても画像がギザギザにならない」
実例でお示しします。
![](https://theflow.co.jp/wp-content/uploads/2022/01/png.png)
![](https://theflow.co.jp/wp-content/uploads/2022/01/png.png)
元の画像の大きさは200×100ピクセルです。拡大していくとこうなります。
SVGのデメリット
「拡大してもギザギザにならない」というのは、ホームページにも名刺にも封筒にも使いたいロゴファイルとしてはとても便利なのですが、SVGはまだ簡単に編集できるソフトが標準では用意されていません。ブラウザはほとんどのものが対応していますが、ペイントなどでは扱えません。
そのままでは色を変えたり、印刷用などで「画像はJPEGかPNGで送ってください」と言われたときに対応出来ません。
それでは困りますよね。
そこで、専用ツール無しでSVG画像の色を変えて、PNGに変換する方法をご紹介します。
SVG画像の色を変更する方法
こちらのサービスを利用させていただきましょう。
iconscout Create and Edit SVG Icons Online
ブラウザから無料で利用できます。
使い方は簡単です。先ほどのSVG画像を使って実際にやってみましょう。
まずはサイトにアクセスしたら、画像を中央の「+」部分にドロップ…の前に、一応利用規約を確認しておきましょう。
利用規約 ここで禁止されていることはしてはいけません。
![](https://theflow.co.jp/wp-content/uploads/2022/01/20220104-1-1.png)
利用規約等の確認が終わりましたら、改めて画像をドロップ。(Sign Up Log Inしなくても使えます。)
すると、次のような画面にかわります。
![](https://theflow.co.jp/wp-content/uploads/2022/01/20220104-2.png)
ここで色を変更していきます。
グラデーションの基調色を変えたり、グレースケール化したりも出来ますが、今回の画像は単一色なのでとりあえず好きな色に変えていきます。
![](https://theflow.co.jp/wp-content/uploads/2022/01/20220104-3.png)
DEFAULT COLORから色を選んだり、プリセットされたカラーパレットから選ぶこともできますし、
![](https://theflow.co.jp/wp-content/uploads/2022/01/20220104-4.png)
CUSTOM COLORから好きな色を選ぶこともできます。
色を選んだら、アイコンに背景をつけることもできます。
![](https://theflow.co.jp/wp-content/uploads/2022/01/20220104-5.png)
背景の形、色、大きさ、角丸の調整もできます。
できあがったら、サイズを選んでダウンロード。サイズは自分で設定することもできます。封筒などの印刷用にも使えますね。
![](https://theflow.co.jp/wp-content/uploads/2022/01/20220104-6.png)
完了です!
本当に手軽に、色の変更とサイズを選んでPNGファイルに変換することができます。
![](https://theflow.co.jp/wp-content/uploads/usagi_s.png)
あなたの事務を楽にするコツや、事務に関する最新ニュースをお届けします。
配信は月2回程度。
メールアドレスだけでOKです。
投稿者プロフィール
![若林凜](https://theflow.co.jp/wp-content/uploads/daihyou256-150x150.jpg)
-
神奈川県内の地方自治体で
・総務(文書管理、議会対応)
・システム運用(教育、福祉、医療)
・会計(出納、資金管理、下水道企業会計)
・監査(社会福祉法人)
・小規模企業支援、労働行政、起業支援
に携わった後、2020年に業務改善系ITコンサルタントとして起業(神奈川県小規模企業支援強化事業コーディネーター)
現在、株式会社TheFlow代表取締役
最新の投稿
公共入札2024年7月21日【元自治体職員直伝】官公庁入札で勝つための戦略:予定価格を推測する方法
公共入札2024年7月11日【元自治体職員直伝】官公庁入札で勝つための戦略:入札公示前からできること
公共入札2024年6月7日【官公庁案件獲得率向上】元官公庁システム調達担当者が教える!入札書類作成ガイド
お役立ち情報2022年3月5日これだけやれば大丈夫!「電子帳簿保存法改正対応」