ITエンジニア/デザイナ向けにオープンソースを毎日紹介

SVGを作成する場合、Illustratorなどのドローアプリケーションを使ってSVG形式でエクスポートするのではないでしょうか。SVGを直接作成、編集できるソフトウェアはあまりないように思います。

そこで使ってみたいのがSvgPathEditorです。SVGをWebブラウザ上で作成、編集できるソフトウェアです。

SvgPathEditorの使い方

メイン画面です。

マウスでドラッグして編集できます。

パスの追加や描画の種類を変更できます。

プレビューです。

コマンド一覧から、描画している範囲を可視化できます。

保存機能もあります。

SvgPathEditorを使えばSVGをWebブラウザ上で手軽に加工できます。最初はドローアプリケーションでもいいですが、その後のちょっとした編集はSvgPathEditorで行えるのが便利です。また、JavaScriptと連携させたい時の動作確認などにも使えそうです。

SvgPathEditorはTypeScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

SvgPathEditor

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

 

MOONGIFTの関連記事

  • DevRel
  • Com2