入力
<path fill="#000000" d="M0 0h24v24H0z"/>
出力
<path fill="#ff0000" d="M0 0h24v24H0z"/>
デザインツール
SVGカラーエディター - fill と stroke を編集
SVG markup を貼り付けると fill / stroke の色を抽出して編集可能な palette として表示し、変更内容をライブプレビューしながら更新後の SVG をコピーできます。icon の recolor や簡単な vector tint 調整向けです。
SVGRecolorIcons
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
SVGカラーエディター
SVG markup を貼り付けると fill / stroke の色を抽出して編集可能な palette として表示し、変更内容をライブプレビューしながら更新後の SVG をコピーできます。icon の recolor や簡単な vector tint 調整向けです。
被侦测到的矢量色盘 (Detected Colors)
等待注入矢量代码...
篡改后的新 SVG 源代码
利用シーン
- icon library の SVG をブランドカラーへ recolor する
- 複数色 SVG の fill / stroke を統一する
- light / dark 背景上で icon の見え方を確認する
使い方
- 完全な SVG を貼り付ける
- palette 上で抽出された色を編集する
- プレビューを確認して最終 SVG をコピーする
入出力サンプル
FAQ
gradient も編集できますか？
主対象は単色の fill / stroke 値です。defs 内の linear gradient などは完全には列挙・編集できない場合があります。
preview は安全ですか？
悪意ある SVG による script 実行リスクを下げるため、preview 前に実行可能な node や event attribute は除去されます。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
SVG最適化
SVG最適化 - クリーンアップと圧縮
SVG comment、editor metadata、余分な whitespace をブラウザ内でローカル除去し、より短い markup へ整えます。icon 圧縮、書き出し後の cleanup、inline SVG の準備に便利です。これは軽量 cleaner であり、完全な SVGO plugin pipeline ではありません。
SVG Optimize Minify
SVGプレースホルダー生成
SVGプレースホルダー生成 - サイズとラベル付きプレースホルダー
width、height、background、label text、font size から軽量な SVG placeholder を生成できます。prototype の image slot、list skeleton、loading placeholder に使いやすく、準備できたら SVG markup をそのままコピーできます。
SVG Placeholder Prototype
CSS名前付きカラー
CSS名前付きカラー - 標準色名リファレンス
W3C / CSS の named color とその値を一覧できます。keyword や family で絞り込み、標準 color name や HEX をコピーして素の CSS 実装に使えます。
CSS Color Cheat sheet