What does the SVG Preview tool do?

It renders SVG markup live as you type, shows extracted attributes (width, height, viewBox), and produces a data: URI you can paste straight into CSS or HTML. Useful for debugging SVG icons, gradients, and viewBox math without spinning up a project.

Is the preview sandboxed?

Yes. The SVG renders inside a sandboxed iframe to isolate it from the rest of the page. Inline JavaScript inside the SVG won't run.

Can I download or copy the SVG?

Yes — copy the raw SVG text or the URL-encoded data: URI from the controls in the header.

SVG-esikatselu / editori

Ruudullinen tausta

leveys: 200korkeus: 200viewBox: 0 0 200 2007 elementtiä

SVG-lähdekoodi

Esikatselu

Tekniset tiedot

Miten SVG Preview / Editor toimii

Mitä työkalu tekee

SVG Preview / Editor renderöi SVG-merkkausta livenä muokatessasi sitä ja poimii metatietoja (leveys, korkeus, viewBox, elementtien määrä) nopeaa tarkastelua varten. Kytkin lisää ruudullisen taustan, jotta läpinäkyvät alueet näkyvät selvästi. Työkalu tuottaa myös URL-koodatun data URI:n, joka sopii käytettäväksi suoraan CSS:n background-image-ominaisuudessa tai HTML:n src-attribuuteissa.

Yleiset kehittäjien käyttötapaukset

Ikonisuunnittelijat testaavat viewBox-laskentaa ja viivanleveyksiä eri ko'oissa. Frontend-kehittäjät varmistavat, että käsin muokattu SVG-ikoni renderöityy edelleen oikein optimoinnin jälkeen (manuaalisesti tai SVGO:n kautta). Sähköpostikehittäjät luovat kompakteja data URI -versioita brändimerkeistä HTML:ään upotettavaksi. Opettajat havainnollistavat, miten attribuutit kuten preserveAspectRatio ja overflow vaikuttavat renderöintiin.

Tietomuodot, tyypit tai variantit

Syöte on raakaa SVG XML -merkkausta. Tuloste on sama SVG renderöitynä hiekkalaatikkoon eristetyssä iframessa sekä URL-koodattu data URI (data:image/svg+xml;charset=utf-8,…). Elementtimäärä-metriikka laskee jokaisen avaavan tagin (mukaan lukien defs, g, gradientit ja vastaavat sisäkkäiset elementit), antaen karkean käsityksen monimutkaisuudesta. Poimitut attribuuttien arvot näytetään raakamuodossa.

Yleiset sudenkuopat ja reunatapaukset

`use`- tai `image`-elementtien href:n kautta viittaamat ulkoiset resurssit eivät lataudu hiekkalaatikkoon eristetyssä iframessa. Script-elementtien sisäinen JavaScript estetään hiekkalaatikossa — animaatioiden tulisi perustua SMIL:iin tai CSS keyframes -animaatioihin. SVG:t, jotka riippuvat tietystä fontista, jota ei ole asennettu järjestelmään, käyttävät oletusfonttia; upota fontit tai käytä järjestelmäfontteja esikatseluissa.

Milloin käyttää tätä työkalua vs. koodia

Käytä selaintyökalua kertaluonteiseen ikonisuunnitteluun, debuggaamiseen tai data URI -osoitteiden luomiseen. Tuotantoassetit kannattaa ajaa SVGO:n läpi hienosäädetyllä konfiguraatiolla metadatan poistamiseksi ja merkkausen minifioimiseksi, ja käyttää sprite-järjestelmää tai kunnollista bundler-integraatiota ikonien lataamiseen sovelluksessa sen sijaan, että data URI -osoitteita upotetaan kaikkialle.