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 peržiūra / redaktorius

Šachmatinis fonas

plotis: 200aukštis: 200viewBox: 0 0 200 2007 elementų

SVG šaltinis

Peržiūra

Techninė informacija

Kaip veikia SVG peržiūra / redaktorius

Ką daro įrankis

SVG Preview / Editor gyvai atvaizduoja SVG žymėjimą, kol jį redaguojate, ir ištraukia metaduomenis (plotį, aukštį, viewBox, elementų skaičių) greitai peržiūrai. Perjungiklis prideda languotą foną, kad aiškiai matytumėte skaidrias sritis. Įrankis taip pat sukuria URL koduotą data URI, tinkamą naudoti tiesiogiai CSS background-image arba HTML src atributuose.

Dažniausi kūrėjų naudojimo atvejai

Piktogramų dizaineriai tikrina viewBox skaičiavimus ir brūkšnių storius skirtingais dydžiais. Frontend kūrėjai patikrina, ar rankiniu būdu redaguota SVG piktograma vis dar teisingai atvaizduojama po optimizavimo (rankinio arba per SVGO). El. laiškų kūrėjai generuoja kompaktiškas data URI prekės ženklo ženklų versijas įterpimui į HTML. Dėstytojai demonstruoja, kaip tokie atributai kaip preserveAspectRatio ir overflow veikia atvaizdavimą.

Duomenų formatai, tipai arba variantai

Įvestis — neapdorotas SVG XML žymėjimas. Išvestis — tas pats SVG, atvaizduotas izoliuotame iframe, ir URL koduotas data URI (data:image/svg+xml;charset=utf-8,…). Elementų skaičiaus metrika suskaičiuoja kiekvieną atidarančią žymą (įskaitant defs, g, gradientus ir panašius įdėtinius elementus), suteikdama apytikrį sudėtingumo pojūtį. Ištrauktos atributų reikšmės rodomos neapdorota forma.

Dažniausios klaidos ir kraštiniai atvejai

Išoriniai ištekliai, į kuriuos nurodo `use` arba `image` elementai su href, nebus įkelti izoliuotame iframe. Įterptas JavaScript script elementuose yra blokuojamas sandbox — animacijos turėtų remtis SMIL arba CSS keyframes. SVG, kurios priklauso nuo konkretaus šrifto, kuris nėra įdiegtas sistemoje, naudos numatytąjį; peržiūroms įterpkite šriftus arba naudokite sisteminius šriftus.

Kada naudoti šį įrankį, o kada kodą

Naudokite naršyklės įrankį vienkartiniam piktogramų dizainui, derinimui ar data URI generavimui. Gamybiniams resursams paleiskite SVG per SVGO su sureguliuota konfigūracija, kad pašalintumėte metaduomenis ir sumažintumėte žymėjimą, ir naudokite sprite sistemą arba tinkamą bundler integraciją piktogramoms įkelti programoje, o ne visur įterpinėkite data URI.