開発者 / SVGカラー
SVGカラー変更ツール：SVGの色を変更してコピー
明示的に指定されたSVGの色と使用回数を確認し、グラデーションの色やシンプルなCSSの色指定を編集して、SVGをダウンロードまたはコードをコピーできます。
SVGカラー変更ツール：SVGの色を変更してコピー: fill、stroke、stop-color、color、flood-color、lighting-color属性、インラインスタイル、シンプルなstyleルールに含まれる明示的な色のトークンを検索します。名前付きカラー、短縮ヘックス、rgb()、hsl()は正規化されます。サニタイズのために変更が必要な場合を除き、置換後も元のソースの他のバイト列は保持されます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
SVGのペイント
SVGのfill、stroke、グラデーションの停止点では、色の値とペイントサーバーへの参照を使用します。仕様: https://www.w3.org/TR/SVG2/painting.html
色の構文
パーサーは、名前付きの色、16進数、rgb()、hsl()、currentColorに対応しています。指定されている場合、アルファ値は保持されます。CSS変数と高度な色空間は、このツールのパーサーの対象外です。仕様: https://www.w3.org/TR/css-color-4/
使い方
- SVGをドロップするか、マークアップを貼り付けます。
- 各カラーピッカーを使うか置換後の色を入力し、必要に応じてすべてのトークンを一括で変更します。
- 変更前と変更後を比較し、サニタイズ済みのSVGをダウンロードまたはコピーします。
プライバシーと制限事項
SVGコードはブラウザ内にとどまります。プレビューは分離された画像として表示され、安全でないコンテンツと外部リソースは削除されます。
関連ツール
よくある質問
使用回数は何を数えますか？
マークアップ内の明示的な色のトークン数です。レンダリングされたピクセル数や、継承されたスタイルを受け取る要素数ではありません。
グラデーションには対応していますか？
はい。グラデーションのIDや参照を置き換えずに、グラデーションストップの色を変更できます。
currentColorは何をしますか？
SVGをインラインで埋め込んだ場合、継承されたCSSのcolor値を使用します。通常、画像プレビューではSVG自体にcolorが定義されていない限り、黒が使用されます。
すべてのCSSカラーが解決されますか？
いいえ。CSS変数、高度なカラースペース、継承されたデフォルト値、セレクターから計算される結果は解決されません。シンプルな宣言とセレクターに対応しています。
無料ツール · ブラウザ内で · アカウント不要