Czy można zrobić zrzut ekranu strony internetowej jako obraz SVG?

31

Mam stronę internetową opartą całkowicie na wektorze (tekst, czcionki, SVG, ale nie ma plików PNG, JPEG ani GIF).

Czy jest jakiś sposób na wykonanie zrzutu ekranu wektorowego tej strony i zapisanie go jako w pełni skalowalny plik SVG?
(dzięki czemu mogę zrobić zrzut ekranu na normalnym komputerze i dobrze wyglądać na siatkówce)

To powinno być możliwe, ale nie mogę znaleźć niczego, co by to zrobiło.

Dodatkowy kredyt: jeśli ma kilka obrazów bitmapowych, chcę SVG z osadzonymi mapami bitowymi.

html screenshot svg

— SLaks
źródło

Wygląda na to, że html2canvas.hertzen.com może tu pomóc.

— SLaks,

1

czy dany plik .html nie jest tym, czego chcesz?

— Sparr

@Sparr: Nie; Chcę manipulować SVG w edytorze (np. Przytnij go, dodaj baner), a następnie umieść go w pliku <img>. (dla strony pomocy / trasy aplikacji internetowej)

— SLaks

Jak konwertować pliki PNG lub JPEG na SVG?

— HairOfTheDog

7

To niesamowity użyteczny pomysł. Specjalnie dla projektantów interfejsu użytkownika, którzy muszą pracować nad ewolucjami istniejących witryn. Zapłacę za narzędzie, które oferuje eksport SVG, ponieważ nie znoszę pracować na makietach z oprogramowaniem do map bitowych, to totalny nonsens.

— smonff

10

Niezupełnie zrzut ekranu, ale jeśli strona wydrukuje się dobrze, możesz wydrukować ją jako plik PDF. Zarówno Inkscape, jak i Illustrator załadują plik PDF (i w razie potrzeby zapisze go jako SVG).

— Dan
źródło

Kiedy to wypróbowałem, Firefox wydrukował przyciski opcji bitmapy do pliku PDF. Przeglądarka Chromium i wkhtmltopdf utworzyły pliki wektorów.

— Randall Whitman

9

CSSBox WebVector konwertuje strony HTML do SVG. Jest to aplikacja wiersza polecenia java, i można zobaczyć próbkę jego wyjściu tutaj .

— Andrzej
źródło

Zarówno tryby wiersza polecenia, jak i GUI. Wypróbowałem WebVector, aby wyeksportować do SVG mały formularz HTML zawierający przyciski opcji. W ten sposób utworzono plik SVG zawierający zawartość całkowicie wektorową, zgodnie z potrzebami - bez osadzonej zawartości bitmapy. Przyciski opcji renderowane jako kwadraty, które wyglądają jak pola wyboru typowego renderowania.

— Randall Whitman

2

Odpowiedzi na to pytanie znajduje się już w Zrzut ekranu dużej strony w Chrome

Chciałbym użyć CutyCapt, który przechwytuje renderowanie webkita do obrazu.

CutyCapt to małe wieloplatformowe narzędzie wiersza polecenia do przechwytywania renderowania strony internetowej przez WebKit w różnych formatach wektorowych i bitmapowych, w tym SVG, PDF, PS, PNG, JPEG, TIFF, GIF i BMP. Zobacz IECapt, aby zobaczyć podobne narzędzie oparte na Internet Explorerze.

— chx
źródło

Wypróbowałem CutyCapt, aby wyeksportować do SVG mały formularz HTML zawierający przyciski opcji. Stworzył plik SVG zawierający częściowo wektor i częściowo bitmapę.

— Randall Whitman

CutyCapt jest dostępny w kanonicznych repozytoriach na Ubuntu 18.04, więc sudo apt install cutycaptwszystko, co musiałem zrobić, aby go wypróbować. Z --delay=3000kilkuminutowym opóźnieniem ( ) renderuje nawet mathjax !!!

— cheshirekow

0

Jedno podejście: jeśli wykonasz zrzut rastrowy (PNG, JPG itp.), Możesz następnie użyć „Śledź mapę bitową” w Inkscape, aby „przekonwertować” pola niektórych powiązanych kolorów na zrzucie na obiekty wektorowe. Jestem pewien, że w programie Adobe Illustrator istnieje równoważne narzędzie. Zwróć uwagę na liczbę oddzielnych kolorów do śledzenia - wynikowe pliki wektorowe mogą szybko się skomplikować. Każdy kolor jest osobnym obiektem wektorowym, który nakłada się na inne obiekty kolorowe, reprezentując oryginalny obraz rastrowy, więc prawdopodobnie będziesz musiał zrobić porządek.

— Adam Keck
źródło

1

To zajmie tyle pracy, aby ustawienia były prawidłowe, nie sądzę, że będzie to do zaakceptowania. Ale nigdy nie wiesz. Adobe Flash może to również zrobić i ma inny sposób robienia rzeczy, które mogą mieć lepsze lub gorsze wyniki.

— SPRBRN

-1

To może ci pomóc. Istnieje świetny dodatek do przeglądarki Firefox o nazwie Zapisz jako PDF, który korzysta z narzędzi z https://pdfcrowd.com/ . Aby uzyskać ostateczne wyjście SVG, użyłbym jednego z narzędzi online do konwersji na SVG.

— Petr S.
źródło