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

Post on:2017年3月15日

sponsors

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

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

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

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

「xvg」でデバッグ中

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

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