Konwertuj HTML na SVG

Edytor grafiki lub system DTP może obsługiwać grafikę wektorową, ale nie stronę HTML. Zapisanie strony jako SVG daje skalowalną grafikę, ale nie zachowuje jej interaktywnych funkcji internetowych.

Czym jest HTML

HTML to język znaczników służący do strukturyzowania stron internetowych. Strony są często stylizowane za pomocą CSS i wzbogacane o interaktywne funkcje przy użyciu JavaScript. Pliki HTML tworzą programiści, systemy zarządzania treścią i kreatory stron; strony mogą też korzystać z zewnętrznych czcionek, obrazów, arkuszy stylów lub skryptów.

Czym jest SVG

SVG to oparty na XML format grafiki wektorowej. Ścieżki, kształty i tekst można skalować bez pikselizacji, a wiele elementów da się edytować w programach do grafiki wektorowej. SVG jest powszechnie używany do tworzenia logo, diagramów i ilustracji. Fotografie i inne obrazy rastrowe pozostają rastrowe po osadzeniu w SVG.

Jak przekonwertować stronę HTML na SVG

Aby bezpośrednio zapisać stronę offline, użyj CutyCapt — narzędzia wiersza poleceń opartego na WebKit, które może zapisywać pliki SVG. Otwórz terminal w folderze zawierającym stronę i uruchom:

CutyCapt --url="file:///absolute/path/page.html" --out="page.svg" --min-width=1200 --min-height=1600

Zastąp adres pliku i wymiary lokalizacją strony oraz żądanym rozmiarem obszaru renderowania. W systemie Windows użyj adresu takiego jak file:///C:/folder/page.html. Zasoby lokalne umieść w oczekiwanych folderach. Jeśli strona potrzebuje czasu na załadowanie przed przechwyceniem, dodaj --delay=1000. CutyCapt korzysta ze starszego silnika Qt WebKit, dlatego sprawdź w aktualnej przeglądarce, czy poprawnie renderuje nowoczesny CSS i JavaScript.

Jeśli CutyCapt nie renderuje strony poprawnie, użyj aktualnej przeglądarki Firefox lub Chrome oraz Inkscape:

1. Otwórz plik HTML w przeglądarce i sprawdź, czy czcionki, obrazy i style zostały załadowane.
2. Wydrukuj stronę do pliku PDF, używając opcji Print → Save to PDF lub Print → Microsoft Print to PDF. Ustaw rozmiar i orientację papieru, w razie potrzeby włącz drukowanie grafiki tła oraz wyłącz nagłówki i stopki przeglądarki.
3. Otwórz plik PDF w Inkscape za pomocą opcji File → Open, wybierz stronę i opcje importowania tekstu, a następnie użyj File → Save As i wybierz Plain SVG lub Inkscape SVG.
4. Sprawdź plik SVG w przeglądarce lub edytorze grafiki wektorowej pod kątem przycięć, przesuniętego tekstu i brakujących obrazów.

Jakość i zgodność

Obie metody zapisują wyrenderowaną stronę, zamiast konwertować jej strukturę HTML. Linki, formularze, skrypty, animacje i układ responsywny nie zostają zachowane. Wynik zależy od rozmiaru obszaru renderowania lub strony PDF, ustawień drukowania w przeglądarce, załadowanych zasobów i dostępnych czcionek; zawartość poza przechwyconym obszarem może zostać przycięta. Tekst i kształty mogą pozostać obiektami wektorowymi, ale obrazy rastrowe pozostają rastrowe. SVG może osadzać HTML za pomocą foreignObject, jednak obsługa tej funkcji różni się w zależności od przeglądarki i edytora, więc nie jest to niezawodny sposób na zachowanie całej strony internetowej.