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

一般的にスクリーンショットといえば画像になります。画像の場合、テキストが書かれていたとしてもコピーできず、再利用性が劣ります。スクリーンショットに出ているエラーメッセージが欲しい、といった時にとても不便です。

今回紹介する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".

 

MOONGIFTの関連記事

  • DevRel
  • Com2