2次元ベクターイメージ用の画像形式の1つであり、画像を円や直線といった図形の集まりとして表現する形式・Scalable Vector Graphics(SVG)には、平面上のドットの集まりとして表現するPNGやJPEGと違い、拡大・縮小しても画質が損なわれないという特徴があります。「SvgPathEditor」はそんなSVG形式の画像を、インタラクティブな操作で作成・編集できるウェブサービスとなっています。

SvgPathEditor

https://yqnn.github.io/svg-path-editor/

SvgPathEditor - Online editor to create and manipulate SVG paths

https://reposhub.com/javascript/image-processing/Yqnn-svg-path-editor.html

「SvgPathEditor」にアクセスすると、剣の形をしたSVG画像が表示されていました。画面左上のボックスに、表示されているSVG画像のパスが貼り付けられています。



表示されている画像の線をドラッグすると……



直感的な操作で画像を変形させることが可能。



また、画面の左下には、それぞれの線を示すコマンドも表示されています。



コマンドにカーソルを合わせると、そのコマンドが画像上のどの線に対応しているのかがわかります。



コマンドの右端にあるメニューボタンをクリックすると、コマンドを編集するメニューが表示されます。「Delete」をクリックすると……



コマンドが削除され、画像が変形しました。



また、「Convert to(コマンドを変換する)」をクリックすると、該当するコマンドを別のコマンドに置き換えることができます。ためしに「A(円弧を示すコマンド)」を「L(直線を示すコマンド)」に置き換えてみると……



該当するコマンドが「L」に置き換わり、曲線だった部分が直線に変化しました。



「Insert After(後ろにコマンドを挿入する)」をクリックし、「L(Line to)」コマンドを選択すると……



該当するコマンドの後ろに、新たな線を挿入することが可能です。



左下のコマンドが茶色の時は、SVGのパスが平面の正確な座標値を示す「絶対座標」で記されていることを示します。一方、直前に指定した点からの相対的な位置を示す表記法は「相対座標」と呼ばれます。



座標を切り替えるには、コマンドの上部にある「Convert to relative(相対座標に変換する)」または「Convert to absolute(絶対座標に変換する)」をクリック。



すると、コマンドが相対座標に切り替わり、紫色で表示されました。



右上のダウンロードボタンをクリックすると……



SVG画像のダウンロード画面が開きます。



カラーコードを指定して、塗りつぶしの色や線の色を変えることも可能です。色が決まれば水色のダウンロードボタンからダウンロードを行います。



左上のバツ印をクリックすると、入力されているパスを削除できます。



自分が作成したパスを入力して、SvgPathEditor上に表示させることが可能。



コマンドの数字を変えて画像の形を修正したり……



パスの座標を変換したりできます。SvgPathEditorはクリック一つでパスの相対座標・絶対座標を変換できるため、インタラクティブにSVG画像を編集したい時に加え、「相対座標で書いたパスを絶対座標に変換したい」という時にも便利なツールとなっていました。



なお、SvgPathEditorのコードはGitHub上で公開されています。

GitHub - Yqnn/svg-path-editor: Online editor to create and manipulate SVG paths

https://github.com/Yqnn/svg-path-editor