SVG na HTML

Převod SVG do HTML online

Vyberte soubor SVG nebo vložte jeho kód a získejte inline SVG pro stránku HTML. Prohlédněte si náhled výsledku, upravte nastavení optimalizace a zkopírujte kód. Zpracování, optimalizace i převod probíhají lokálně ve vašem prohlížeči a vaše SVG se neodesílá na žádný server.

Připravte responzivní inline SVG

Ponechte viewBox, aby se zachoval souřadnicový systém SVG. Pokud má SVG použitelný viewBox, odstraňte pevnou šířku a výšku a velikost nastavte ve vlastním CSS.

Velikost SVG a úspora

„Původní velikost“ je velikost vstupního SVG. „Velikost optimalizovaného SVG“ je jeho velikost po zpracování se zvolenými možnostmi, například po odstranění komentářů, zaokrouhlení souřadnic a minifikaci kódu. Velikosti se uvádějí v kB, přičemž 1 kB odpovídá 1 000 bajtů. „Ušetřeno“ udává procentní zmenšení: při zmenšení z 10 kB na 7 kB ušetříte 30 %. Pokud je výstup větší, například kvůli čitelnému formátování, zobrazí se místo toho „Nárůst velikosti“. Tato čísla porovnávají kód SVG, nikoli velikost exportů JSX, React, CSS Data URI nebo Base64.

Přesnost desetinných míst a odsazení

Přesnost desetinných míst určuje, kolik číslic za desetinnou tečkou se v souřadnicích a číselných atributech zachová. Při přesnosti 2 se z 12.34567 stane 12.35. Méně desetinných míst může zmenšit soubor, ale může také změnit jemné detaily; výchozí hodnota 3 je jen výchozí bod, proto zkontrolujte náhled. Odsazení pomocí 2 mezer, 4 mezer nebo tabulátorů zpřehlední kód HTML a JSX, aniž by změnilo obrázek. Volba „Minifikovat SVG“ odstraní nadbytečné mezery a zhustí výstup, proto je odsazení při zapnuté minifikaci vypnuté.

HTML, JSX, React a SVG Data URI

Výstup HTML je inline kód SVG a stahuje se jako soubor SVG. JSX upraví názvy atributů a inline styly pro React. Komponenta React ho zabalí do funkce v TypeScriptu, která přijímá standardní SVG props. CSS Data URI vytvoří deklaraci background-image; Base64 vytvoří zakódované URI obrázku SVG. Statistiky velikosti popisují optimalizované SVG, nikoli větší zakódované formáty. Pokud chcete na jedné stránce použít více inline kopií, zkontrolujte ID.

Statický a lokální postup pro SVG

Náhled je izolovaný obrázek, nikoli spustitelný kód stránky. Skripty, vložené HTML, animace, externí obrázky a šablony stylů se odstraní. Podporované inline prezentační styly a lokální odkazy na fragmenty zůstanou zachovány. Tento nástroj je určen pro statickou grafiku; nepodporované funkce mohou změnit její vzhled. Hodnota currentColor mění jednobarevné výplně a tahy a při inline použití přebírá barvu okolí; náhled jako obrázek používá vlastní barevný kontext.