How does HTML to SVG work?

Your HTML is placed inside an SVG foreignObject, which browsers render as part of the vector so it scales without pixelation.

Do external images and fonts work?

Inline CSS and data-URI images work best. External resources may not load when the SVG is opened outside your site.

Is my HTML uploaded anywhere?

No. The SVG is generated entirely in your browser.

Can I set the size of the SVG?

Yes. Enter any width and height in pixels before generating. They define the SVG canvas and its viewBox, and because the file is a vector you can scale it later without losing sharpness.

Why does my SVG look blank in some graphics apps?

foreignObject is rendered by web browsers, but many graphics editors such as Inkscape or Illustrator do not fully support it. For best results use the SVG on web pages or in browser-based tools.

Can I turn the result into a PNG or JPG instead?

This tool keeps your markup as a vector and never rasterizes it. If you need a pixel image, render the same HTML with our HTML to Image tool, which outputs PNG, JPG or PDF.

HTML na SVG

Umieść swój HTML i CSS w skalowalnym SVG za pomocą foreignObject. Obejrzyj podgląd na żywo i pobierz jako .svg, PNG lub JPG. Wszystko działa w Twojej przeglądarce.

Kod HTML

Szerokość

Wysokość

Format

Podgląd

Kod źródłowy SVG

HTML w skalowalnym wektorze

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.

Po co zamykać HTML w pliku SVG?

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ć.

Wektor czy zrzut ekranu - czego potrzebujesz?

Użyj tego narzędzia, gdy wynik ma być pokazany w przeglądarce internetowej, ponieważ przeglądarki renderują foreignObject natywnie i zachowują jego ostrość. Wektor utrzymuje Twój kod znaczników żywy i skalowalny, więc pozostaje ostry w każdym rozmiarze, a plik pozostaje mały. Zrzut ekranu natomiast zamraża ten sam kod w stałej siatce pikseli: przydaje się tam, gdzie SVG nie jest obsługiwany, ale później nie da się go ponownie ostylować ani powiększyć.

Najczęściej zadawane pytania

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.