ブラウザでSVGファイルを編集する方法

SVG（Scalable Vector Graphics）は、画像をピクセルではなく数式による形状とパスとして保存します。だからこそSVGで保存したロゴは、ファビコンでも看板広告でも常にくっきりとした状態を保ち、アイコンやロゴ、イラストに最適な形式なのです。また、ピクセルを一つずつ操作するのではなく、ファイルを開いて実際の形状そのものを編集できることも意味します。

SVGのソースを編集するのは、書き出したPNGを編集するよりもほぼ常に優れています。アンカーポイントを動かしても曲線は滑らかなまま、塗りの色を変えても色は正確、全体を拡大縮小してもぼやけません。そのためには、ベクターを理解した編集ツールが必要です。

EditItAllのベクター編集ツールは、ブラウザで直接SVGファイルを開きます。

• 編集ツールを開いて、ロゴやアイコンセット、イラストなど.svgを読み込みます。
• 選択ツール（V）でオブジェクト全体を移動・サイズ変更し、ダイレクト選択ツール（A）で個々のアンカーポイントをつかみます。
• 塗りと線の色を変更し、文字ツール（T）で任意のテキストを編集し、スマートガイドとIllustrator風のショートカットで形状を正確な位置に合わせます。

作業内容は進めるたびにブラウザへ自動保存され、読み込み後にオフラインになっても編集ツール全体が動き続けます。これはファイルがどこにも送信されていない明確な証拠です。

本当の力を発揮するのはパスの整形です。ペンツール（P）はベジェハンドル付きのアンカーポイントを配置するので、曲線を描き直したり、ロゴにポイントを追加したり、まっさらな状態から新しい形状をトレースしたりできます。フリーハンドで描くための鉛筆ツールもあります。

より複雑な作品を作るには、ブール演算でシンプルな形状を組み合わせます。合体で複数の形状を一つに融合し、前面オブジェクトで型抜きで一方をもう一方から切り抜き、交差で重なり合う部分だけを残し、中マドでその部分を取り除きます。これらは正確な演算によるジオメトリエンジン上で処理されるため、結果として得られるエッジはピクセルの何分の一もずれることなく、常にきれいな状態を保ちます。こうしていくつかの四角形と円が、完成したアイコンへと変わっていきます。

作業が終わったら、ファイルを完全に編集可能な状態に保つために.svgとして保存し直すか、Webや文書用のラスター画像が必要なときは2×のPNGを書き出します。すでにSVGがあってPNGだけが必要な場合は、専用のSVGからPNGへの変換ツールなら一度の操作で済みます。

正直な話、二つの制限があります。編集ツールが読み込むのは標準のSVGであり、Adobeの.aiや.epsファイルは読み込みません。また、グラデーションメッシュ、パターン塗り、CMYKカラーにも対応していません。とはいえ、日常のロゴやアイコン、イラストをSVGとして編集する用途であれば、必要なものはすべてお使いのデバイス上で動作します。ベクター編集ツールを開いて始めましょう。