SVGのテキストをオンラインで編集する方法

SVGには、文字を二通りの方法で保存できます。ファイルが実際の<text>要素を使っている場合、文字は実データのテキストとして保存されているため、選択したり打ち直したり、スタイルを変更したりできます。デザイナーが保存前に「テキストをアウトラインに変換」していた場合、各文字はベクター図形になっており、見た目は同じでも、もはや文字ではないため、ポイントの形を調整することしかできず、文字そのものを書き換えることはできません。

Web用に書き出されたロゴやアイコンの多くは実データのテキストを保持しており、これはまさに求めている状態です。もしアウトライン化されていても、図形を動かしたり色を変えたりすることは引き続き可能ですが、文言は変更できません。

EditItAllのベクター編集ツールでファイルを開くと、テキストは編集可能なオブジェクトとして読み込まれます。変更方法は次のとおりです。

• 選択ツールでテキストをダブルクリックすると、カーソルが表示され、古い文字の上に直接新しい文字を入力できます。
• Escapeキーを押すか、ほかの場所をクリックして変更を確定します。
• 複数行のテキストは改行を保持するため、見出しとサブタイトルを別々に編集できます。

この編集ツールは完全にお使いの端末上で動作するため、SVGがサーバーに送信されることはありません。ページの読み込みが終われば、オフラインのまま編集を続けることもできます。

文字の内容が決まったら、見た目を調整しましょう。フォント、サイズ、太さを設定し、配置（左揃え、中央揃え、右揃え）を変更して、新しい塗りの色を選べます。テキストをドラッグして位置を変えたり、作品の他の要素と一緒にレイヤー間で移動したりすることもできます。テキストの周りのパスも調整したい場合は、同じドキュメント内にペンツールとブール演算が用意されています。

編集が終わったら書き出すと、編集後の文字が実際の<text>として保存された標準的なSVGが得られるため、次に開いたときも編集可能なままです。スライドやSNS投稿用にラスター画像が必要な場合は、選んだサイズでPNGとして書き出すこともできます。ファイルを開いてから最終的な書き出しまで、すべての作業がお使いの端末上で行われ、デザインの内容が外部に送信されることはありません。