一般的にスクリーンショットといえば画像になります。画像の場合、テキストが書かれていたとしてもコピーできず、再利用性が劣ります。スクリーンショットに出ているエラーメッセージが欲しい、といった時にとても不便です。 今回紹介するSVG ScreenshotはスクリーンショットをSVGで保存してくれるGoogle Chrome機能拡張です。

SVG Screenshotの使い方

スクリーンショットは範囲指定します。

保存されたSVGです。元の表示とは多少異なってしまっているのが残念です。

しかしテキストがコピーできます。

SVG ScreenshotはDOMをSVGに変換するライブラリと組み合わせることで、画像ではなくSVGとしてDOMを保存します。一部だけでも使えるのがとても便利です。これがGoogle Chromeの標準になってくれたらすごく使い勝手がよさそうです。

SVG ScreenshotはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

SVG Screenshot - Chrome ウェブストア felixfbecker/dom-to-svg: Library to convert a given HTML DOM node into an accessible SVG "screenshot".