SVG:stä HTML:ksi

Muunna SVG HTML:ksi verkossa

Tuo SVG-tiedosto tai liitä sen koodi, niin saat HTML-sivulle sopivan inline-SVG:n. Esikatsele tulosta, säädä optimointiasetuksia ja kopioi koodi. Jäsennys, optimointi ja muunnos tapahtuvat kokonaan selaimessasi, eikä SVG:tä lähetetä palvelimelle.

Valmistele responsiivinen inline-SVG

Säilytä viewBox, niin SVG:n koordinaatisto pysyy ennallaan. Kun SVG:ssä on käyttökelpoinen viewBox, poista kiinteä leveys ja korkeus ja määritä koko omassa CSS:ssäsi.

Näin SVG:n koko ja säästö lasketaan

Alkuperäinen koko on syöttämäsi SVG:n koko. Optimoidun SVG:n koko kertoo koon sen jälkeen, kun SVG on käsitelty valitsemillasi asetuksilla, kuten kommenttien poistolla, koordinaattien pyöristyksellä ja koodin tiivistyksellä. Koot näytetään kilotavuina (kt), ja 1 kt on 1 000 tavua. Säästö kertoo pienennyksen prosentteina: kun koko pienenee 10 kilotavusta 7 kilotavuun, säästö on 30 %. Jos tulos on suurempi esimerkiksi luettavan muotoilun vuoksi, sen sijaan näytetään Koon kasvu. Luvut vertaavat SVG-koodia, eivät viennin kokoa muodoissa JSX, React, CSS Data URI tai Base64.

Desimaalitarkkuus ja sisennys

Desimaalitarkkuus määrää, montako numeroa koordinaateissa ja numeerisissa määritteissä säilytetään desimaalierottimen jälkeen. Tarkkuudella 2 arvosta 12.34567 tulee 12.35. Pienempi desimaalien määrä voi pienentää tiedostokokoa, mutta se saattaa muuttaa hienoja yksityiskohtia. Oletusarvo 3 on vain lähtökohta, joten tarkista esikatselu. Sisennys käyttää kahta tai neljää välilyöntiä tai sarkaimia, jotta HTML- ja JSX-koodia on helpompi lukea, eikä se muuta kuvaa. Tiivistä SVG -asetus poistaa tarpeettomat muotoilun tyhjämerkit ja tiivistää tuloksen, joten sisennys ei ole käytettävissä, kun tiivistys on päällä.

HTML, JSX, React ja SVG Data URI -muodot

HTML-tulos on inline-SVG-koodia, ja se ladataan SVG-tiedostona. JSX muokkaa määritteiden nimet ja inline-tyylit Reactille sopiviksi. React-komponentti käärii JSX-koodin TypeScript-funktioon, joka ottaa vastaan tavalliset SVG-propsit. CSS Data URI tuottaa background-image-määrittelyn, ja Base64 tuottaa koodatun SVG-kuvan URI:n. Kokotilastot koskevat optimoitua SVG:tä, eivät suurempia koodattuja muotoja. Tarkista ID:t, ennen kuin käytät samalla sivulla useita inline-kopioita.

Staattinen ja paikallinen SVG-työnkulku

Esikatselu on eristetty kuva eikä suoritettavaa sivukoodia. Skriptit, upotettu HTML, animaatiot, ulkoiset kuvat ja tyylisivut poistetaan. Tuetut inline-esitystyylit ja paikalliset fragmenttiviittaukset säilytetään. Työkalu on tarkoitettu staattisille kuville, ja ei-tuetut ominaisuudet voivat muuttaa kuvan ulkoasua. currentColor-arvo muuttaa yhtenäiset täytöt ja reunaviivat ja perii värinsä, kun SVG:tä käytetään inline-muodossa; kuvana näytettävä esikatselu käyttää omaa värikontekstiaan.