Apakah mungkin untuk mengambil tangkapan layar halaman web sebagai gambar SVG?

31

Saya memiliki halaman web yang seluruhnya berbasis vektor (teks, font ikon, SVG, tetapi tidak ada PNG, JPEG, atau GIF).

Apakah ada cara untuk mengambil screenshot vektor dari halaman web itu dan menyimpannya sebagai file SVG yang sepenuhnya dapat diskalakan?
(agar saya dapat mengambil tangkapan layar pada PC normal dan membuatnya terlihat bagus di retina)

Ini seharusnya mungkin, tetapi saya tidak dapat menemukan apa pun yang dapat melakukannya.

Kredit ekstra: Jika memiliki beberapa gambar bitmap, saya ingin SVG dengan bitmap tertanam.

html screenshot svg Slaks
sumber
Sepertinya html2canvas.hertzen.com mungkin membantu di sini.
SLaks
1
apakah file .html yang dimaksud sebenarnya bukan yang Anda inginkan?
Sparr
@Sparr: Tidak; Saya ingin memanipulasi SVG di editor (mis., Pangkas, tambahkan spanduk), lalu taruh di <img>. (untuk halaman bantuan / tur aplikasi web)
SLaks
Bagaimana file PNG atau JPEG akan dikonversi ke SVG?
HairOfTheDog
7
Ini adalah ide berguna yang luar biasa. Terutama untuk desainer UI yang harus mengerjakan evolusi situs web yang ada. Saya akan membayar alat yang menampilkan ekspor SVG karena saya benci bekerja pada mockup dengan software bitmap, ini omong kosong.
smonff

Jawaban:

10

Bukan tangkapan layar yang cukup, tetapi jika halaman dicetak dengan baik Anda bisa mencetaknya sebagai PDF. Inkscape dan Illustrator akan memuat PDF (dan menyimpannya sebagai SVG jika diperlukan).

Dan
sumber
Ketika saya mencoba ini, Firefox mencetak tombol radio bitmap ke file PDF. Browser Chromium dan wkhtmltopdf menghasilkan semua file vektor.
Randall Whitman
9

CSSBox WebVector akan mengonversi halaman HTML ke SVG. Ini adalah aplikasi command-line java, dan Anda dapat melihat contoh hasilnya di sini .

Andrew
sumber
Baik mode command-line dan GUI sebenarnya. Saya mencoba WebVector untuk mengekspor ke SVG bentuk HTML kecil yang berisi tombol radio. Ini menghasilkan file SVG yang seluruhnya mengandung konten vektor, seperti yang diinginkan - tidak ada konten bitmap tertanam. Tombol-tombol radio diterjemahkan sebagai kotak, yang terlihat seperti kotak centang rendering yang khas.
Randall Whitman
2

Ini dijawab sudah di Tangkap tangkapan layar halaman web besar di Chrome

Saya akan menggunakan CutyCapt untuk menangkap render webkit ke suatu gambar.

CutyCapt adalah utilitas lintas-platform lintas-platform kecil untuk menangkap rendering WebKit dari halaman web ke dalam berbagai format vektor dan bitmap, termasuk SVG, PDF, PS, PNG, JPEG, TIFF, GIF, dan BMP. Lihat IECapt untuk alat serupa yang berbasis pada Internet Explorer.

chx
sumber
Saya mencoba CutyCapt untuk mengekspor ke SVG bentuk HTML kecil yang berisi tombol radio. Ini menghasilkan file SVG yang mengandung sebagian vektor dan sebagian konten bitmap.
Randall Whitman
CutyCapt tersedia di repositori kanonik di ubuntu 18.04, jadi hanya sudo apt install cutycaptitu yang perlu saya lakukan untuk mencobanya. Dengan penundaan beberapa detik ( --delay=3000) itu bahkan menjadikan mathjax !!!
cheshirekow
0

Satu pendekatan: Jika Anda mengambil tangkapan layar raster (PNG, JPG, dll.), Anda kemudian dapat menggunakan "Trace Bitmap" di Inkscape untuk "mengubah" bidang warna terkait tertentu di tangkapan layar ke objek vektor. Saya yakin ada alat yang setara di Adobe Illustrator. Perhatikan berapa banyak warna terpisah yang Anda tentukan untuk dilacak - file vektor yang dihasilkan dapat tumbuh dengan cepat. Setiap warna adalah objek vektor terpisah yang tumpang tindih dengan objek warna lain untuk mewakili gambar raster asli, jadi Anda mungkin perlu melakukan pembersihan.

Adam Keck
sumber
1
Ini akan mengambil begitu banyak pekerjaan untuk mendapatkan pengaturan yang benar, saya tidak berpikir ini akan diterima. Tapi kamu tidak pernah tahu. Adobe Flash dapat melakukan ini juga, dan memiliki cara berbeda dalam melakukan sesuatu, yang dapat memberikan hasil yang lebih baik atau lebih buruk.
SPRBRN
-1

Ini mungkin bisa membantu Anda. Ada add-on yang bagus untuk Firefox, yang disebut Save as PDF, yang menggunakan alat-alat dari https://pdfcrowd.com/ . Untuk keluaran SVG akhir saya kemudian akan menggunakan salah satu alat online untuk mengkonversi ke SVG.

Petr S
sumber