Printscreen webu do formátu SVG

[rado877]

Zdravím, dělám printscreens naší webové aplikace, pokud použiji standartní tool na print screen je to uložené v jpeg nebo png, ale je to rastr, pří zmenšování nebo zvětšování písma písmo začne "pixelovat".

Ideální by bylo použít něco, co umí printscreen rovnou do svg.

Chrome, tam je třeba SVG Screenshot extension, kde lze označit plochu na stránce a přímo uložit do SVG, ale nefunguje to úplně 100% pokud má stránka nějak více UI elementů.

Má někdo zkušenost ? Díky

[Reklama]

[Death Walker]

Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

[rado877]

Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

To si úplně nemyslím, je potřeba mít UI rendering engine s vektorovým backendem. Např. Gtk+ 3 to má. Mohlo by to fungovat, ale možná se pletu ....
https://github.com/nomeata/gtk-vector-screenshot

[Death Walker]

Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

To si úplně nemyslím, je potřeba mít UI rendering engine s vektorovým backendem. Např. Gtk+ 3 to má. Mohlo by to fungovat, ale možná se pletu ....
https://github.com/nomeata/gtk-vector-screenshot

Stale to ale nepredstavuje proti ulozit ako html nejaky benefit.

[Martin Poljak]

Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

To si úplně nemyslím, je potřeba mít UI rendering engine s vektorovým backendem. Např. Gtk+ 3 to má. Mohlo by to fungovat, ale možná se pletu ....
https://github.com/nomeata/gtk-vector-screenshot

Problém je jaksi v tom že to je backend Gtk+. Který ale opravdu nesouvisí s backendem prohlížeče, který velmi velmi velmi komplikovaně HTML a všechny související asety, navíc rozhýbané javascriptem a CSS animacemi, renderuje typicky pomocí grafické karty případně softwarovým rasterováním.

[Reklama]

[tecka]

Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

A ta reference může být Data URL, takže není problém vkládat bitmapy přímo do SVG.

[tecka]

Problém je jaksi v tom že to je backend Gtk+. Který ale opravdu nesouvisí s backendem prohlížeče, který velmi velmi velmi komplikovaně HTML a všechny související asety, navíc rozhýbané javascriptem a CSS animacemi, renderuje typicky pomocí grafické karty případně softwarovým rasterováním.

To není problém ani trochu a princip je úplně stejný. Rastrování není někde různě poházené, ale používá se centrální renderer, pracující s high-level informacemi a proto jde třeba tisknout do PDF a šlo by to i do SVG.

[qelurg]

Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

No to význam má, protože html se dá interpretovat dost volně. Ale imho není rozdíl mezi exportem do svg a pdf, kde export do pdf funguje výborně, takže nemá smysl řešit ho do svg.

[Filip Jirsák]

Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

No to význam má, protože html se dá interpretovat dost volně. Ale imho není rozdíl mezi exportem do svg a pdf, kde export do pdf funguje výborně, takže nemá smysl řešit ho do svg.

Není ten export do PDF rastrový nebo převážně rastrový? (Tedy takový export by samozřejmě šel udělat i do SVG, ale o to asi rado877 nejde.)

[qelurg]

Text zůstává textem, což je to, co autor výslovně požaduje. A naopak, dokonce v něm jde vyhledávat, což by u SVG nešlo.

[rado877]

Text zůstává textem, což je to, co autor výslovně požaduje. A naopak, dokonce v něm jde vyhledávat, což by u SVG nešlo.

Ano, je tomu tak.  U printscreens obrazovek na naší webové stránce, dochází v zavislosti na rozlišení obrazovky klienta k  upscaling nebo descaling obrázku, a pokud je v printscreen text, na některých rozlišeních degradace čitelnosti textu roste.

Můj dotaz byl, zda existuje nějaká možnost jak to zlepšit. Ideál je asi svg, tam je ostrost bez ohledu na rozlišení. Pdf možnost mne napadla také ale zatím jsem nezkoušel.

[Filip Jirsák]

Můj dotaz byl, zda existuje nějaká možnost jak to zlepšit. Ideál je asi svg, tam je ostrost bez ohledu na rozlišení. Pdf možnost mne napadla také ale zatím jsem nezkoušel.

Pořád to dost motáte. To, že bude zachována ostrost u textu při zvětšování a zmenšování, závisí na tom, jestli ten text bude uložen jako text nebo alespoň vektorově. Což automaticky nezaručí použití vektorového formátu – jak do SVG tak do PDF se dají vložit i bitmapy. A vždycky záleží na tom, zda se vůbec do nástroje na vytvoření screenshotu dostane ta informace o textu (pokud dostane na vstupu vyrenderovaný raster, nic s tím neudělá) a také a tom, zda cílový formát podporuje dané zobrazení. Protože například pomocí CSS můžete na textu vytvořit efekty, které se v SVG reprezentovat nedají –  a pokud má screenshotovací nástroj udělat věrný obraz takové stránky, nezbude mu než to vyrenderovat do bitmapy.

[_Jenda]

Pokud by stačilo zachování obsahu a nejde o zachování přesného vzhledu, co to vytisknout na virtuální PDF tiskárnu?

[rado877]

nakonec jsem zkusil udělat ten tisk do pdf a z pdf konverzi do svg a zatím to nevypadá úplně špatně :-). Postup byl následující :
- otevřít požadovanou stránku v browseru
- v developer tool nastavit emulate CSS media na Screen , jinak by print do pdf vzal jenom css, zjistil jsem ze musim mit furt otevreny develper tool
- pak print - do pdf, v advanced setting zaškrtnout background graphics, a save
- pro konverzi pdf do svg jsem pouzil Inkscape
- ještě zkusím optimalizovat velikost svg, má to teď 600kb.
Zatím je výsledek lepší než jsem čekal ....

[Ondrej Nemecek]

To samé se dá udělat pouhým tiskem do pdf, media type print se aplikuje automaticky. Následná konverze pdf do svg už podle mě nemá pro  smysl (většinu použití).