このツールについて
アイコン、ロゴ、イラストの色を変更できます。よく使われる色の指定と使用箇所の数を一覧にし、置き換える色を選んで静的プレビューで確認したあと、新しい SVG を保存できます。
使い方
- SVG ファイルを選ぶかソースを貼り付け、「色を読み込む」を押します。
- 元の色、色見本、使用箇所の数を確認し、変更したい色に新しい値を指定します。
- 色の置き換えを適用し、塗り、線、グラデーションを確認します。
- 配色を確認し、コピーするか edited-colors.svg をダウンロードします。
機能
- fill、stroke、stop-color、flood-color、lighting-color の一般的な色指定を検出します。
- 16 進数、rgb、rgba、一般的な色名に対応し、属性や一般的なスタイル指定を読み取ります。
- 色指定だけを置き換え、本文、要素 ID、リンク内にある同じ文字は変更しません。
通常の色として置き換えない値
- none は描画なし、currentColor は現在の文字色、url(#gradient) は内部のグラデーションやパターンの参照です。これらは通常の色値として置き換えません。
- グラデーションは各色のポイントを変更します。複雑な継承や未対応のスタイルがあると、最終的な色をすべて一覧にできない場合があります。
- 通常のダウンロードはコメントやメタデータなど未変更の内容を保持し、スクリプトや外部参照も残る場合があります。プレビューでは除去し、安全処理済み SVG も別途保存できます。
SVG の安全性について
プレビューには安全処理済みの静的コピーを使います。スクリプト、クリック時の動作、アニメーションは実行せず、外部画像、フォント、スタイルも読み込みません。外部参照、埋め込み Web ページ、未対応の内容を除去するため、元の表示と異なる場合があります。DOCTYPE や独自の実体を含む文書には対応していません。
SVG ファイルや UTF-8 ソースは最大 2 MiB、ノード数は要素とテキストを含め 20,000 個、入れ子は 96 階層までです。大きすぎる場合や構造が複雑な場合は、先にファイルを簡略化してください。
プライバシー
SVG はお使いのブラウザー内で処理され、サーバーにはアップロードされません。
入力や結果は自動保存されません。クリアやページ移動の前に必要なファイルを保存し、元のファイルも保管してください。
よくある質問
直接変更できない色があるのはなぜですか？
継承、現在の文字色、グラデーション、複雑なスタイルなどで決まる色には、置き換えられる固定値がない場合があります。色の一覧とプレビューを確認してください。
currentColor とは何ですか？
固定の 16 進数の色ではなく、現在の文字色を使う指定です。そのため通常の色値として置き換えません。
url(#gradient) は色ではないのですか？
SVG 内のグラデーションやパターンの定義を参照する値です。色を変えるにはグラデーション内の各色を調整します。
色の変更で SVG の構造は変わりますか？
色指定を変更し、パスをピクセル画像には変換しません。通常のダウンロードは未変更部分を保持します。安全処理済み版は未対応の動作や外部参照を除去します。