Zamknij swój kod HTML i osadzony CSS w skalowalnym pliku SVG za pomocą elementu foreignObject. Obejrzyj podgląd na żywo i pobierz gotowy plik .svg. Wszystko działa w Twojej przeglądarce.
Element foreignObject w SVG pozwala osadzić żywy kod HTML i CSS wewnątrz obrazu wektorowego. Wynik skaluje się bez strat i sprawdzi się wszędzie tam, gdzie przyjmowane są pliki SVG — świetnie nadaje się na plakietki, karty i rozbudowane etykiety.
Plik SVG zbudowany z użyciem foreignObject to nie zrzut ekranu - Twój kod pozostaje w nim żywy. Tekst nadal jest prawdziwym tekstem, osadzony CSS wciąż go stylizuje, a nic nie jest rasteryzowane, więc grafika pozostaje idealnie ostra przy każdym powiększeniu, a sam plik waży zwykle tylko kilka kilobajtów. Dlatego to świetne rozwiązanie na plakietki do plików README, karty profilowe, widżety w panelach i wszędzie tam, gdzie chcesz, żeby ostylowany fragment HTML zachowywał się jak pojedynczy plik graficzny, który można hostować, osadzać i wersjonować.
Skorzystaj z tego narzędzia, jeśli wynik ma być pokazywany w przeglądarce - przeglądarki renderują foreignObject natywnie i zachowują pełną ostrość. Jeśli potrzebujesz obrazu rastrowego, który zadziała wszędzie - w komunikatorach, dokumentach czy programach graficznych - wyrenderuj ten sam kod naszym konwerterem HTML na obraz, który tworzy pliki PNG, JPG i PDF. Oba narzędzia się uzupełniają: jedno zachowuje HTML jako skalowalny wektor, drugie zamraża go w bitmapie.
Wszystko, co musisz wiedzieć o konwersji HTML na SVG.
Twój kod HTML trafia do elementu <foreignObject> w pliku SVG, który przeglądarki renderują jako część wektora. Całość skaluje się bez pikselozy.
Najlepiej sprawdzają się osadzony CSS i obrazy w postaci data-URI. Zasoby zewnętrzne mogą się nie wczytać, gdy plik SVG zostanie otwarty poza Twoją stroną, więc osadzaj w nim wszystko, co się da.
Nie. Plik SVG powstaje w całości w Twojej przeglądarce.
Tak. Przed wygenerowaniem podaj dowolną szerokość i wysokość w pikselach. Określają one obszar roboczy SVG i jego viewBox, a ponieważ plik jest wektorem, możesz go później skalować bez utraty ostrości.
foreignObject renderują przeglądarki internetowe, ale wiele edytorów graficznych, takich jak Inkscape czy Illustrator, nie obsługuje go w pełni. Najlepsze efekty uzyskasz, używając pliku SVG na stronach WWW i w narzędziach działających w przeglądarce.
To narzędzie zachowuje Twój kod jako wektor i nigdy go nie rasteryzuje. Jeśli potrzebujesz obrazu rastrowego, wyrenderuj ten sam kod HTML naszym narzędziem HTML na obraz, które tworzy pliki PNG, JPG i PDF.