SVG カラー リプレーサ

はい。 SVG カラー置換機能は塗りつぶしとストロークを一緒に更新するため、輪郭と内部の位置が揃った状態が保たれます。 1 つだけ必要な場合は、ファイルを複製し、さまざまなオプションを指定して SVG カラー置換を実行すると、バリアント間で結果を比較できます。一貫したテーマを実現するには、UI で使用するものと同じトークン セットから色を選択し、明るい背景と暗い背景でテストします。

currentColor は、親から CSS カラーを継承するように SVG に指示します。 SVG カラー置換機能は、アイコンがテーマ トークンに応答するように、すべての単色を currentColor に切り替えることができます。 SVG カラー置換出力を CSS 変数と組み合わせて、コンポーネント間で一貫したテーマを設定します。 CSS 変数を使用すると、SVG を再度編集しなくても、出力は更新を自動的に継承します。これは、カラー プロップを受け入れるアイコン コンポーネントでうまく機能します。

はい。 SVG カラー置換では値が変更されないため、透明な形状は透明のままになります。予期しない塗りつぶしが表示された場合は、SVG カラー置換を再度実行する前に、属性をオーバーライドするインライン スタイルがないか確認してください。ストロークの幅に基づいて位置を調整する場合は、置換後のプレビューを確認して、視覚的なずれがないことを確認してください。

SVG カラー置換はソリッド値のみを置換します。グラデーションとパターンは定義されたままになるため、複雑なイラストがそのまま残ります。グラデーション編集が必要な場合は、デザイン ツールで調整してから、残りのソリッドに対して SVG カラー置換を実行します。パターンやグラデーションには複数のストップが含まれることが多いため、上流で処理することで色相の不一致を防ぎます。統一した外観が必要な場合は、デザイン ツールでストップ カラーを調整し、再度エクスポートします。

いいえ。SVG カラー リプレーサーはローカルで実行されるため、アセットがデバイスから流出することはありません。このローカル SVG カラー置換フローは、ブランド アイコン、製品 UI、クライアント ライブラリに対して安全であり、厳格な企業ネットワーク ポリシーでも機能します。また、ローカル処理により、アップロード サービスによって課せられるファイル サイズ制限が回避され、コンプライアンスが簡単に保たれます。

はい。 SVG カラー置換を使用した後、最適化を実行してバイトをトリミングします。 SVG カラー置換は色のみを変更するため、最適化と縮小は、特に大きなアイコン セットの場合、サイズとパフォーマンスの点で依然として価値があります。最適化後にクイック プレビューを実行して、エッジが鮮明なままであり、透明度が維持されていることを確認します。

インライン スタイルは属性と同じように扱われるため、単色は一貫して置き換えられます。さらに制御したい場合は、色を置換する前に、ソース ファイル内のスタイルを属性に変換します。スタイルがスタイル タグで定義されている場合は、予測可能な結果を​​得るために、最初にスタイルをインラインに移動することを検討してください。通常、プレゼンテーション属性は継承されたスタイルをオーバーライドするため、ソース内で一貫性を保つ必要があります。これは、アイコンが複数のソースから取得されている場合に特に便利です。

このツールは、単一の置換をすべての単色に適用します。選択的な変更が必要な場合は、SVG を複製してエディターで色を分離し、各バージョンに置換を適用します。高度なワークフローの場合は、ベース SVG を維持し、ビルド スクリプトまたは CSS クラスを使用してバリアントを派生します。 CSS クラスを交換することで、実行時に異なるテーマを適用することもできます。

はい。 SVG Color Replacer はブラウザで無料で使用できます。ダウンロードやインストールは必要ありません。

いいえ、SVG Color Replacer はサインアップしなくてもブラウザで即座に動作し、ファイルはローカルに残ります。