SVG-ből HTML

SVG konvertálása HTML-re online

Importálj egy SVG-fájlt, vagy illeszd be a kódját, hogy inline SVG-t kapj egy HTML-oldalhoz. Nézd meg az előnézetet, állítsd be az optimalizálást, és másold ki a kódot. Az elemzés, az optimalizálás és a konvertálás helyben, a böngésződben történik, az SVG-t nem küldjük el szerverre.

Reszponzív inline SVG készítése

Az SVG koordináta-rendszerének megőrzéséhez tartsd meg a viewBox attribútumot. Ha az SVG-nek van használható viewBox attribútuma, távolítsd el a rögzített szélességet és magasságot, majd a méretét a saját CSS-edben add meg.

Az SVG mérete és a megtakarítás

Az „Eredeti méret” a bemeneti SVG mérete. Az „Optimalizált SVG-méret” a kiválasztott beállításokkal – például a megjegyzések eltávolításával, a koordináták kerekítésével és a kód minifikálásával – feldolgozott SVG mérete. A méretek kB-ban szerepelnek, 1 kB 1000 bájtnak felel meg. A „Megtakarítás” a százalékos csökkenés: 10 kB-ról 7 kB-ra csökkentve 30% a megtakarítás. Ha a kimenet nagyobb, például az olvasható formázás miatt, helyette a „Méretnövekedés” jelenik meg. Ezek az értékek az SVG-kódra vonatkoznak, nem a JSX, React, CSS Data URI vagy Base64 formátumú exportokra.

Tizedes pontosság és behúzás

A tizedes pontosság azt határozza meg, hány számjegy maradjon a tizedesjel után a koordinátákban és a numerikus attribútumokban. 2-es pontosságnál a 12.34567 értékből 12.35 lesz. Kevesebb tizedesjegy csökkentheti a fájlméretet, de a finom részletek megváltozhatnak; az alapértelmezett 3-as érték csak kiindulópont, ezért nézd meg az előnézetet. A behúzás 2 vagy 4 szóközzel, illetve tabulátorral teszi olvashatóbbá a HTML- és JSX-kódot, a kép változatlan marad. Az „SVG minifikálása” eltávolítja a felesleges formázó térközöket, így tömörebb lesz a kimenet, ezért bekapcsolt minifikálás mellett a behúzás nem állítható.

HTML, JSX, React és SVG Data URI-k

A HTML-kimenet inline SVG-kód, és SVG-fájlként töltődik le. A JSX a React számára igazítja az attribútumneveket és az inline stílusokat. A React-komponens ezt egy TypeScript-függvénybe csomagolja, amely a szabványos SVG-propokat fogadja. A CSS Data URI egy background-image deklarációt állít elő, a Base64 pedig kódolt SVG-kép URI-t. A méretstatisztikák az optimalizált SVG-re vonatkoznak, nem a nagyobb, kódolt formátumokra. Ha egy oldalon több inline példányt használsz, előtte nézd át az id attribútumokat.

Statikus, helyi SVG-feldolgozás

Az előnézet elkülönített kép, nem futtatható oldalkód. A szkripteket, a beágyazott HTML-t, az animációkat, a külső képeket és a stíluslapokat eltávolítjuk. A támogatott inline megjelenítési stílusok és a helyi fragmenthivatkozások megmaradnak. Az eszköz statikus grafikákhoz készült; a nem támogatott funkciók megváltoztathatják a megjelenést. A currentColor az egyszínű kitöltéseket és körvonalakat módosítja, és inline használva a környezetéből örökli a színt; a képes előnézetnek saját színkörnyezete van.