SVGをオンラインで編集する方法：ソフトを入れずに配色変更と背景除去

1. オンラインのSVGエディタでできること

SVGを編集すると、まずIllustratorをインストールしたくなりますが、配色を変える、背景を消す、要素を消すといった軽い作業ならオンラインのエディタで十分です。PolySVGのオンラインSVGエディタはブラウザで動作し、無料、インストール不要、登録不要で、パス単位の操作のうち、クリックでの削除、ワンクリックの背景除去、描画による補完、マスクを使った消去、配色変更、元取り消しとやり直し、そしてSVGまたはPNGの書き出しに対応します。SVGを直接アップロードすることも、画像→SVGツールから変換結果をワンクリックで読み込むこともできます。デザイナーには納品前の最後の掃除に、开发者にはページに入れる前にアイコンの色や大きさをすばやく調整するのに向いています。

2. 配色変更：アイコンに新しいテーマ色を

キャンバスの色面をクリックして対応するパスを選び、色パネルの塗りを選びかえます。よくある場面は、1セットのアイコンをライトテーマとダークテーマで使い分けること、ベクター化したロゴをブランド色に合わせること、違う出典の素材でパレットを統一することです。コードの中の属性を探すのに比べて、クリックで色を変えるほうがはるかに直感的で、ほかのパスを壊すことも起こりにくくなります。

3. 背景の除去：自動と手動の組合せ

「ワンクリック背景除去」をクリックすると、エンジンが主要な境界色を検出して背景の層を除去し、白背景のSVGが数秒で透明になります。残った背景パスはマウスで選んで削除できます。元がまだラスターなら、画像→透明ベクター変換ツールで変換と背景の除去を一度に行い、最後の仕上げをエディタで進めるのがいちばんに速いです。

4. 描画と消しゴム：補うことと消すこと

描画は足す操作です。欠けた線を描くと、その線は自動的にベクターのパスに変換され、元の絵に自然に馴染みます。ベクター化したロゴの崩れた線を直すのに最適です。消しゴムは引く操作です。マスクで範囲を隠すだけで元のパスデータは失われません。消しすぎたときはいつでも元に戻せます。どちらも元取り消しとやり直しに連動するので、自由に試せます。描画の線は独立したパスとしてファイルに入るので、あとからクリックして色を変えられます。消しゴムのマスクは書き出しのときに使われるので、書き出したSVGはキャンバスで見たとおりになります。

5. 元取り消し、やり直し、書き出し

エディタは操作の履歴をすべて残します。取り消して、思えばやり直せます。出来たら、Webやあとからの編集にはSVGを書き出し、ドキュメントや見本画像にはPNGを書き出しましょう。SVGファイルを開く方法はSVGファイルの開き方で解説しています。エディタの直リンクは/editorです。PNGを書き出すときは、ドキュメントに載せてしても鮮明なだけの解像度を選んでください。Webで使うならベクターの性質を保つため、SVGを書き出すのが基本です。

6. よくある編集作業のまとめ

• テーマに合わせてアイコンの色を変える：パスをクリックして塗りを替え、ライト用とダーク用の2つの版を書き出す；
• 白背景の素材を透明にする：ワンクリックの背景除去で背景を落とし、残ったパスを削除して透明なSVGを書き出す；
• ロゴの崩れた線を直す：欠けた部分をなぞって描画すると自動的にベクター化されるので、ぜんたいの色をそろえる；
• 不要な要素を削除する：不要な色面をクリックして削除し、細かい部分は消しゴムで処理する；
• ドキュメント用の画像を作る：編集が終わったらPNGを書き出して、WordやPowerPoint、チャット画面に入れる。