WebページのスクリーンショットをSVG画像として撮ることは可能ですか?


31

完全にベクターベースのWebページ(テキスト、アイコンフォント、SVGがありますが、PNG、JPEG、またはGIFはありません)があります。

そのWebページのベクタースクリーンショットを撮り、完全にスケーラブルなSVGファイルとして保存する方法はありますか?
(通常のPCでスクリーンショットを撮って、網膜上で見栄えよくするため)

これは可能なはずですが、それを行うものは何も見つかりません。

追加クレジット:ビットマップイメージがいくつかある場合、ビットマップが埋め込まれたSVGが必要です。


以下のように見えますhtml2canvas.hertzen.comがここに役立つかもしれません。
-SLaks

1
問題の.htmlファイルは実際にあなたが望むものではありませんか?
スパー

@Sparr:いいえ。エディターでSVGを操作(トリミング、バナーの追加など)し、それを<img>。(Webアプリのヘルプ/ツアーページ用)
SLaks

PNGまたはJPEGファイルはどのようにSVGに変換されますか?
HairOfTheDog

7
これは驚くべき便利なアイデアです。特に、既存のWebサイトの進化に取り組む必要があるUIデザイナー向けです。ビットマップソフトウェアを使用したモックアップでの作業が嫌いなので、SVGエクスポート機能を備えたツールを購入します。これはまったくナンセンスです。
smonff

回答:


10

スクリーンショットではありませんが、ページがうまく印刷できれば、PDFとして印刷できます。InkscapeとIllustratorの両方がPDFをロードします(必要に応じてSVGとして保存します)。


これを試してみると、FirefoxはPDFファイルにビットマップラジオボタンを印刷しました。Chromium-browserとwkhtmltopdfは、すべてベクトルのファイルを作成しました。
ランドールホイットマン

9

CSSBox WebVectorはHTMLページをSVGに変換します。これはjavaコマンドラインアプリケーションであり、その出力のサンプルはこちらで確認できます


実際には、コマンドラインモードとGUIモードの両方。WebVectorを試して、ラジオボタンを含む小さなHTMLフォームをSVGにエクスポートしました。必要に応じて、完全にベクターコンテンツを含むSVGファイルを作成しました-埋め込みビットマップコンテンツはありません。正方形としてレンダリングされたラジオボタンは、一般的なレンダリングのチェックボックスのように見えます。
ランドールホイットマン

2

これは、Chromeで大きなWebページのスクリーンショットキャプチャするで既に回答されています

CutyCaptを使用して、Webkitのレンダリングを画像にキャプチャします。

CutyCaptは、WebページのWebKitによるレンダリングを、SVG、PDF、PS、PNG、JPEG、TIFF、GIF、BMPなどのさまざまなベクターおよびビットマップ形式にキャプチャするための小さなクロスプラットフォームコマンドラインユーティリティです。Internet Explorerに基づいた同様のツールについては、IECaptを参照してください。


CutyCaptを試して、ラジオボタンを含む小さなHTMLフォームをSVGにエクスポートしました。部分的にベクトルと部分的にビットマップのコンテンツを含むSVGファイルを作成しました。
ランドールホイットマン

CutyCaptは、ubuntu 18.04の正規リポジトリで利用できるためsudo apt install cutycapt、試してみるために必要なことはすべて揃っています。数秒の遅延(--delay=3000)で、mathjaxもレンダリングされます!!!
cheshirekow

0

1つのアプローチ:ラスタースクリーンショット(PNG、JPGなど)を取得する場合、Inkscapeの「トレースビットマップ」を使用して、スクリーンショット内の特定の関連色のフィールドをベクターオブジェクトに「変換」できます。Adobe Illustratorには同等のツールがあると確信しています。トレースするために指定する個別の色の数に注意してください-結果のベクトルファイルはすぐに複雑になります。各色は、元のラスターイメージを表すために他の色オブジェクトと重複する個別のベクトルオブジェクトです。したがって、おそらくいくつかのクリーンアップを行う必要があります。


1
これは、設定を正しく取得するために非常に多くの作業を必要としますが、これが受け入れられるとは思いません。しかし、あなたは決して知りません。Adobe Flashも同様にこれを行うことができ、物事を行う別の方法があり、良い結果または悪い結果になる可能性があります。
SPRBRN

-1

これはあなたを助けるかもしれません。Firefoxには、PDFとして保存と呼ばれる素晴らしいアドオンがあり、https://pdfcrowd.com/のツールを使用します。最終的なSVG出力の場合、オンラインツールの1つを使用してSVGに変換します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.