SVG na HTML

Konwertuj SVG na HTML online

Importuj plik SVG lub wklej jego kod, aby uzyskać inline SVG do strony HTML. Obejrzyj podgląd wyniku, dostosuj ustawienia optymalizacji i skopiuj kod. Całe parsowanie, optymalizacja i konwersja odbywają się lokalnie w przeglądarce, bez wysyłania pliku SVG na serwer.

Przygotuj responsywną grafikę SVG inline

Zachowaj viewBox, aby nie zmienić układu współrzędnych SVG. Gdy SVG ma użyteczny viewBox, usuń stałą szerokość i wysokość, a potem ustal rozmiar we własnym CSS.

Rozmiar SVG i oszczędność miejsca

„Rozmiar oryginalny” to rozmiar wejściowego SVG. „Rozmiar zoptymalizowanego SVG” to jego rozmiar po przetworzeniu z wybranymi opcjami, takimi jak usuwanie komentarzy, zaokrąglanie współrzędnych i minifikacja kodu. Rozmiary są podawane w kB, gdzie 1 kB to 1 000 bajtów. „Oszczędność” to procentowe zmniejszenie: zejście z 10 kB do 7 kB oznacza oszczędność 30%. Jeśli wynik jest większy, na przykład z powodu czytelnego formatowania, zamiast niej pojawia się „Wzrost rozmiaru”. Te wartości porównują kod SVG, a nie rozmiar eksportów JSX, React, CSS Data URI czy Base64.

Precyzja dziesiętna i wcięcia

Precyzja dziesiętna określa, ile cyfr po przecinku zostaje we współrzędnych i atrybutach liczbowych. Przy precyzji 2 liczba 12,34567 staje się 12,35. Mniej miejsc po przecinku może zmniejszyć rozmiar pliku, ale też zmienić drobne szczegóły; domyślna wartość 3 to punkt wyjścia, więc sprawdź podgląd. Wcięcia z 2 spacji, 4 spacji lub tabulatorów ułatwiają czytanie kodu HTML i JSX, nie zmieniając obrazu. „Minifikuj SVG” usuwa zbędne białe znaki formatowania, by skrócić wynik, dlatego przy włączonej minifikacji wcięcia są wyłączone.

HTML, JSX, React i SVG jako Data URI

Wynik HTML to kod inline SVG, pobierany jako plik SVG. JSX dostosowuje nazwy atrybutów i style inline do wymagań React. „Komponent React” opakowuje go w funkcję TypeScript przyjmującą standardowe właściwości (props) SVG. CSS Data URI tworzy deklarację background-image; Base64 tworzy zakodowany URI obrazu SVG. Statystyki rozmiaru dotyczą zoptymalizowanego SVG, a nie większych formatów zakodowanych. Zanim wstawisz kilka kopii inline na jedną stronę, sprawdź atrybuty id.

Statyczne SVG przetwarzane lokalnie

Podgląd jest izolowanym obrazem, a nie wykonywalnym kodem strony. Skrypty, osadzony HTML, animacje, zewnętrzne obrazy i arkusze stylów są usuwane. Obsługiwane style prezentacji inline i lokalne odwołania do fragmentów zostają zachowane. To narzędzie jest przeznaczone do statycznych grafik; nieobsługiwane funkcje mogą zmienić ich wygląd. currentColor zmienia jednolite wypełnienia i obrysy, a w kodzie inline dziedziczy kolor; podgląd jako obraz korzysta z własnego kontekstu kolorów.