メインコンテンツへスキップ
無料・ブラウザで完結

SVGの色を変える

SVGのアイコンやロゴを開いて、1つの図形だけ、または同じ色をまとめて変更し、色を変えたファイルをダウンロードできます。

くわしく知る

SVGの色を数秒で変える

SVGの色はどこにある?

SVGは図形を記述したもので、各図形には塗り(内側)と線(輪郭)があります。色は属性やスタイルとしてファイルに書かれています。そのためSVGは、描き直すことなく、シャープさも失わずに色を変えられるのです。

1つの図形だけ、または同じ色を全部

図形を選ぶと、その塗りや線の色を変えられます。アイコンセットやロゴのブランドカラーを変えるなら、ドキュメント内の色を置き換えましょう。その色を使っている図形がすべて一度に変わり、ダウンロードする前に結果をリアルタイムで確認できます。

同じSVGの色だけを変える

図形もその順番もファイルの構造も保たれ、ダウンロードしたSVGは、開いたSVGの色だけが変わったものになります。アイコンセットのアイコン、書き出したロゴ、イラストのどれにも使えます。

使い方

SVGの色を変える方法

  1. SVGを開く

    SVGファイルをエディターにドロップするか、コードを貼り付けます。

  2. 色を変える

    図形を選んで塗りか線の色を選ぶか、ドキュメント全体で1つの色を置き換えます。

  3. SVGをダウンロード

    プレビューを確認して、色を変えたファイルをダウンロードします。

活用ガイド

コツとガイド

文字の色に合わせて変わるアイコン

Webサイトでは、塗りがcurrentColorのアイコンはまわりの文字と同じ色になります。ファイルを編集する代わりに、CSSで色を変えましょう。

ブランドカラーのロゴなら、ドキュメント全体で色を置き換えれば、すべての図形の色がそろいます。

ヒント

ファイルは外部に出ません

SVGはブラウザの中で編集され、サーバーには何もアップロードされません。

表示する前にマークアップからスクリプトを取り除くので、Webから持ってきたSVGがページ上でコードを実行することはありません。

安全性
よくある質問

よくある質問

SVGの色変更のポイント