SVGの色をオンラインで変更

16進コード置換フォームではなく、エディタ

単機能の色変更ツールは、ファイル内の16進値を並べてダウンロードボタンを出すのが普通です。それで足りるのは、2つの図形が同じ値を共有していて片方だけ変えたい、あるいは変えたい色がグラデーションだった、という事態が起きるまで。RayziaはファイルをネイティブSVGとして読み込むので、すべての図形・パス・文字がそれぞれ編集可能なオブジェクトとして開き、何を変えるかを正確に決められます。同じエディタには 50+のツール と150+のエフェクトが揃っているので、色が決まったあともパスを変形したりテキストをその場で打ち直したりと、そのまま作業を続けられます。ClaudeやGPTなど、すでにお持ちのAIアカウントを接続すれば、あなたが見ている前でキャンバス上に直接色替えや編集を行い、どの変更もアンドゥ1回で戻せます。

SVGの色を変更する方法

1. エディタを開く。 rayzia.comにアクセスし、エディタを開きます: /vector/。Windows・Mac・Linux・ChromeOS・タブレットのどのブラウザでも動作し、ダウンロード不要、始めるのにアカウントも要りません。
2. .svgをドラッグで読み込む。 ファイルをキャンバスにドロップするか、「ファイル」→「開く」を使います。RayziaはネイティブSVGとして読み込むため、すべての要素がロックされた画像ではなく編集可能なオブジェクトとして開きます。
3. 色を変えたい部分をクリックする。 要素をクリックして選択します。複数まとめて選択もできます。自動選択(マジックワンド)は同じ色やスタイルを共有するものをすべて選択するので、ファイル全体でひとつの色を変えるならこれが近道です。
4. 新しい塗りまたは線を設定する。 「塗りと線」パネルは右側のドックにあり、エディタ起動時からすでに開いています。単色を選ぶか、サブタブを切り替えて線形・放射状・円錐グラデーション、またはパターンを選べます。
5. きれいなSVG、またはPNGで書き出す。 「書き出し」からSVGを選べば、新しい色が反映された整ったファイルが得られます。ラスター画像が必要ならPNGも選べます。

単色のその先へ

この 塗りと線パネル がカラーピッカーで、できるのは単色塗りだけではありません。単色タブにはカラーモデルのドロップダウンがあるので表記法に縛られず、別のサブタブで線形・放射状・円錐グラデーションとパターン塗りを扱えます。 グラデーションツール は、つかんで動かせるハンドルでアートワーク上のグラデーションを直接編集でき、グラデーションメッシュは多点のカラーメッシュを組んで柔らかい絵画的な陰影を作れます。 ペイントバケツ はクリックひとつで塗りつぶし、細かい隙間も賢く処理します。スポイトはキャンバス上のあらゆるものから塗り・線・テキストのスタイルを拾えます。作業を速くするキーもいくつかあります: X は塗りと線のどちらをアクティブにするかを切り替え、 Shift+X は2つの色を入れ替え、 D は白の塗りと黒の線にリセットし、 / はアクティブなペイントをなしに設定し、 . は線形グラデーションを適用します。

使うのは無料、書き出しはきれいに

編集は無料で、SVG・PNGへの書き出しも無料です。無料プランにはすべてのツール、AIアシスタント、クラウドファイル3件が含まれます。Proは月$8で、PDF書き出し、無制限クラウドファイル、30日間のバージョン履歴、ウォーターマークなしの共有リンクが加わります。エディタは作業中に自動保存し、接続が切れても動き続けます。ネイティブフォーマットがSVGなので、開いたファイルがそのまま編集対象です。

SVGの色変更についてのよくある質問