Bir web sayfasının ekran görüntüsünü SVG resmi olarak almak mümkün müdür?

31

Tamamen vektörel bir web sayfam var (metin, simge fontları, SVG'ler, ancak PNG'ler, JPEG'ler veya GIF'ler yok).

Bu web sayfasının vektör ekran görüntüsünü almanın ve tamamen ölçeklenebilir bir SVG dosyası olarak kaydetmenin bir yolu var mı?
(böylece normal bir PC'de ekran görüntüsünü alabilir ve retinada iyi görünmesini sağlayabilirim)

Bu mümkün olmalı, ama yapacak bir şey bulamıyorum.

Ekstra kredi: Birkaç bitmap görüntü varsa, gömülü bitmap içeren bir SVG istiyorum.

html screenshot svg

— SLaks
kaynak

Görünüşe göre html2canvas.hertzen.com burada yardımcı olabilir.

— SLaks,

1

.html dosyası aslında ne istediğinizi değil mi?

— Sparr

@Sparr: Hayır; SVG'yi bir editörde manipüle etmek istiyorum (örneğin, kırp, afiş ekle), sonra bir içine koyun <img>. (bir web uygulamasının yardım / tur sayfası için)

— SLaks,

PNG veya JPEG dosyaları SVG'ye nasıl dönüştürülür?

— HairOfTheDog

7

Bu inanılmaz faydalı bir fikir. Özellikle mevcut web sitelerinin evrimlerinde çalışmak zorunda olan UI tasarımcıları için. SVG ihracatını içeren bir araç için ödeme yapacağım çünkü bitmap yazılımlarıyla örnekler üzerinde çalışmaktan nefret ediyorum, bu tamamen saçmalık.

— smonff

10

Tam bir ekran görüntüsü değil, ancak sayfa iyi yazdırılırsa, PDF olarak yazdırabilirsiniz. Hem Inkscape hem de Illustrator bir PDF yükler (ve gerekirse SVG olarak kaydeder).

— Dan
kaynak

Bunu denediğimde, Firefox bitmap radyo düğmelerini PDF dosyasına yazdırdı. Chromium tarayıcı ve wkhtmltopdf tüm vektör dosyalarını üretti.

— Randall Whitman

9

CSSBox WebVector , HTML sayfalarını SVG'ye dönüştürür. Bu bir java komut satırı uygulaması ve burada çıktısının bir örneğini burada görebilirsiniz .

— Andrew
kaynak

Aslında hem komut satırı, hem de GUI modları. WebVector’ü SVG’ye radyo düğmelerini içeren küçük bir HTML biçiminde dışa aktarmayı denedim. İsteğe bağlı olarak tamamen vektör içeriği içeren bir SVG dosyası oluşturdu - gömülü bitmap içeriği yok. Radyo düğmeleri tipik görüntü oluşturma onay kutularına benzeyen kareler şeklinde oluşturulmuştur.

— Randall Whitman

2

Bu zaten Chrome'daki Capture large web sayfası ekran görüntüsünde zaten yanıtlandı

Webkit'in oluşturduğu görüntüyü yakalayan CutyCapt'i kullanırdım .

CutyCapt, WebKit'in bir web sayfasını görüntülemesini, SVG, PDF, PS, PNG, JPEG, TIFF, GIF ve BMP dahil olmak üzere çeşitli vektör ve bitmap biçimlerinde yakalamak için küçük bir platformlar arası komut satırı yardımcı programıdır. Internet Explorer'ı temel alan benzer bir araç için IECapt'a bakın.

— chx
kaynak

CutyCapt’i SVG’ye radyo düğmelerini içeren küçük bir HTML biçiminde dışa aktarmayı denedim. Kısmen vektör ve kısmen bitmap içeriği içeren bir SVG dosyası üretti.

— Randall Whitman

CutyCapt, ubuntu 18.04'teki kanon depolarında mevcuttur, sudo apt install cutycaptdenemek için tek ihtiyacım olan şey bu. Birkaç saniye gecikme ile ( --delay=3000) mathjax bile verir !!!

— cheshirekow

0

Bir yaklaşım: Raster bir ekran görüntüsü alırsanız (PNG, JPG, vb.), Daha sonra Inkscape'deki "Trace Bitmap" i kullanarak, ekran görüntüsündeki belirli renk alanlarını vektör nesnelerine dönüştürmek için kullanabilirsiniz. Adobe Illustrator'da eşdeğer bir araç olduğundan eminim. İzlemek için kaç ayrı renk belirlediğinize dikkat edin - ortaya çıkan vektör dosyaları hızla karmaşıklaşabilir. Her renk, orijinal raster görüntüsünü temsil etmek için diğer renk nesnelerinin üstüne binen ayrı bir vektör nesnesidir, bu nedenle muhtemelen biraz temizleme yapmanız gerekir.

— Adam Keck
kaynak

1

Bu ayarların doğru yapılması için çok fazla iş gerekecek, bunun kabul edilebilir olacağını sanmıyorum. Ama sen asla bilemezsin. Adobe Flash bunu da yapabilir ve daha iyi veya daha kötü sonuçlar doğurabilecek farklı şeyler yapmanın bir yoludur.

— SPRBRN

-1

Bu size yardımcı olabilir. Https://pdfcrowd.com/ adresindeki araçları kullanan Firefox'a PDF Olarak Kaydet adında harika bir eklenti var . Son SVG çıktısı için SVG'ye dönüştürmek için çevrimiçi araçlardan birini kullanırdım.

— Petr S
kaynak