SVGの色はどこにある?
SVGは図形を記述したもので、各図形には塗り(内側)と線(輪郭)があります。色は属性やスタイルとしてファイルに書かれています。そのためSVGは、描き直すことなく、シャープさも失わずに色を変えられるのです。
SVGのアイコンやロゴを開いて、1つの図形だけ、または同じ色をまとめて変更し、色を変えたファイルをダウンロードできます。
SVGは図形を記述したもので、各図形には塗り(内側)と線(輪郭)があります。色は属性やスタイルとしてファイルに書かれています。そのためSVGは、描き直すことなく、シャープさも失わずに色を変えられるのです。
図形を選ぶと、その塗りや線の色を変えられます。アイコンセットやロゴのブランドカラーを変えるなら、ドキュメント内の色を置き換えましょう。その色を使っている図形がすべて一度に変わり、ダウンロードする前に結果をリアルタイムで確認できます。
図形もその順番もファイルの構造も保たれ、ダウンロードしたSVGは、開いたSVGの色だけが変わったものになります。アイコンセットのアイコン、書き出したロゴ、イラストのどれにも使えます。
SVGファイルをエディターにドロップするか、コードを貼り付けます。
図形を選んで塗りか線の色を選ぶか、ドキュメント全体で1つの色を置き換えます。
プレビューを確認して、色を変えたファイルをダウンロードします。
Webサイトでは、塗りがcurrentColorのアイコンはまわりの文字と同じ色になります。ファイルを編集する代わりに、CSSで色を変えましょう。
ブランドカラーのロゴなら、ドキュメント全体で色を置き換えれば、すべての図形の色がそろいます。
ヒントSVGはブラウザの中で編集され、サーバーには何もアップロードされません。
表示する前にマークアップからスクリプトを取り除くので、Webから持ってきたSVGがページ上でコードを実行することはありません。
安全性SVGの色変更のポイント