1クリックでSVGのデバッグが可能!SVGのパスをアウトラインに変換、アンカーやポイントやハンドルを表示 -xvg

Webページで使用しているSVGのパスをアウトラインに変換し、アンカー、コントロールポイント、ハンドルを表示してデバッグができるChromeの拡張機能「xvg」を紹介します。

SVGで作成したコリスのロゴSVGで作成したコリスのロゴ

「xvg」は無料で利用できるChromenの機能拡張で、オンラインのWebページでもローカルファイルでも、ブラウザ上に表示したSVGのデバッグができます。
というわけで、SVGで作成したコリスのロゴを用意してみました。

SVGで作成したコリスのロゴ

SVGで作成したコリスのロゴ
※キャプチャ画像です。

「xvg」を1クリックするだけで、すぐにSVGのパスをアウトラインに変換して、アンカー、コントロールポイント、ハンドルが表示されます。
変換したアウトラインは、拡大表示にも対応しています。

SVGで作成したコリスのロゴ

「xvg」でデバッグ中

「xvg」のインストールは、下記ページから。

サイトのキャプチャ

xvg
xvg -GitHub
xvg -Chromeウェブストア

「Install」ボタンをクリックすると、Chromeウェブストアにアクセスし、インストールすることができます。

top of page

©2017 coliss