Ist es möglich, einen Screenshot einer Webseite als SVG-Bild aufzunehmen?

31

Ich habe eine Webseite, die vollständig vektorbasiert ist (Text, Symbolschriftarten, SVGs, aber keine PNGs, JPEGs oder GIFs).

Gibt es eine Möglichkeit, einen Vektor-Screenshot dieser Webseite als voll skalierbare SVG-Datei zu speichern?
(damit ich den Screenshot auf einem normalen PC machen und auf der Netzhaut gut aussehen kann)

Das sollte möglich sein, aber ich kann nichts finden, das das kann.

Zusätzlicher Kredit: Wenn es ein paar Bitmap-Bilder hat, möchte ich eine SVG mit eingebetteten Bitmaps.

html screenshot svg SLaks
quelle
Es sieht so aus, als ob html2canvas.hertzen.com hier helfen könnte.
SLaks
1
Entspricht die fragliche HTML-Datei nicht Ihren Wünschen?
Sparr
@Sparr: Nein; Ich möchte die SVG-Datei in einem Editor bearbeiten (z. B. zuschneiden, ein Banner hinzufügen) und dann in einen einfügen <img>. (für die Hilfe / Tour-Seite einer Web-App)
SLaks
Wie würden PNG- oder JPEG-Dateien in SVG konvertiert?
HairOfTheDog
7
Dies ist eine erstaunlich nützliche Idee. Speziell für UI-Designer, die an bestehenden Website-Weiterentwicklungen arbeiten müssen. Ich werde für ein Tool bezahlen, das SVG-Exporte unterstützt, weil ich es hasse, an Mockups mit Bitmaps-Software zu arbeiten, das ist totaler Unsinn.
Smonff

Antworten:

10

Kein Screenshot, aber wenn die Seite gut gedruckt wird, können Sie sie als PDF drucken. Sowohl Inkscape als auch Illustrator laden eine PDF-Datei (und speichern sie bei Bedarf als SVG-Datei).

Dan
quelle
Als ich das ausprobierte, druckte Firefox Bitmap-Optionsfelder in die PDF-Datei. Chromium-Browser und wkhtmltopdf erzeugten All-Vector-Dateien.
Randall Whitman
9

CSSBox WebVector konvertiert HTML-Seiten in SVG. Es ist eine Java-Befehlszeilenanwendung, und Sie können hier ein Beispiel der Ausgabe sehen .

Andrew
quelle
Tatsächlich sowohl im Befehlszeilen- als auch im GUI-Modus. Ich habe WebVector ausprobiert, um ein kleines HTML-Formular mit Optionsfeldern nach SVG zu exportieren. Es wurde eine SVG-Datei erstellt, die nach Wunsch ausschließlich Vektorinhalte enthielt - keinen eingebetteten Bitmap-Inhalt. Die Optionsfelder werden als Quadrate dargestellt, die wie Kontrollkästchen für die typische Darstellung aussehen.
Randall Whitman
2

Dies wird bereits beim Erfassen eines großen Webseiten-Screenshots in Chrome beantwortet

Ich würde CutyCapt verwenden , um das Rendering des Webkits in einem Bild festzuhalten.

CutyCapt ist ein kleines plattformübergreifendes Befehlszeilenprogramm, mit dem WebKits Rendering einer Webseite in verschiedenen Vektor- und Bitmapformaten wie SVG, PDF, PS, PNG, JPEG, TIFF, GIF und BMP aufgezeichnet werden kann. In IECapt finden Sie ein ähnliches Tool, das auf Internet Explorer basiert.

chx
quelle
Ich habe CutyCapt ausprobiert, um ein kleines HTML-Formular mit Optionsfeldern nach SVG zu exportieren. Es wurde eine SVG-Datei erstellt, die teilweise Vektor- und teilweise Bitmap-Inhalte enthielt.
Randall Whitman
CutyCapt ist in den Canonical Repositories unter Ubuntu 18.04 verfügbar sudo apt install cutycapt. Mit ein paar Sekunden Verzögerung ( --delay=3000) wird sogar Mathjax gerendert !!!
Tscheschirekow
0

Ein Ansatz: Wenn Sie einen Raster-Screenshot (PNG, JPG usw.) erstellen, können Sie "Trace Bitmap" in Inkscape verwenden, um die Felder bestimmter verwandter Farben im Screenshot in Vektorobjekte "umzuwandeln". Ich bin sicher, dass es in Adobe Illustrator ein gleichwertiges Tool gibt. Achten Sie darauf, wie viele separate Farben Sie zum Verfolgen angeben - die resultierenden Vektordateien können schnell komplex werden. Jede Farbe ist ein separates Vektorobjekt, das die anderen Farbobjekte überlappt, um das ursprüngliche Rasterbild darzustellen. Daher müssen Sie möglicherweise einige Aufräumarbeiten durchführen.

Adam Keck
quelle
1
Es wird so viel Arbeit kosten, um die Einstellungen zu korrigieren. Ich denke nicht, dass dies akzeptabel ist. Aber du weißt nie. Adobe Flash kann dies ebenfalls und hat eine andere Vorgehensweise, die zu besseren oder schlechteren Ergebnissen führen kann.
SPRBRN
-1

Das könnte dir helfen. Zu Firefox gibt es ein großartiges Add-On namens Als PDF speichern, das die Tools von https://pdfcrowd.com/ verwendet . Für die endgültige SVG-Ausgabe würde ich dann eines der Online-Tools verwenden, um in SVG zu konvertieren.

Petr S
quelle