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 priekšskatījums / redaktors

Rūtiņu fons

platums: 200augstums: 200viewBox: 0 0 200 2007 elementi

SVG avots

Priekšskatījums

Tehniskā informācija

Kā darbojas SVG priekšskatījums / redaktors

Ko rīks dara

SVG priekšskatījums / redaktors renderē SVG marķējumu tiešsaistē, kamēr to rediģējat, un izvelk metadatus (platums, augstums, viewBox, elementu skaits) ātrai pārbaudei. Slēdzis pievieno rūtiņu fonu, lai caurspīdīgās zonas būtu skaidri redzamas. Rīks arī izveido URL kodētu data URI, kas piemērots tiešai izmantošanai CSS background-image vai HTML src atribūtos.

Biežākie izstrādātāju lietošanas gadījumi

Ikonu dizaineri testē viewBox aprēķinus un līniju biezumus dažādos izmēros. Frontend izstrādātāji pārbauda, vai ar roku rediģēta SVG ikona joprojām renderējas pareizi pēc optimizācijas (manuāli vai ar SVGO). E-pastu izstrādātāji ģenerē kompaktas data URI zīmolu zīmju versijas iekļaušanai HTML. Pasniedzēji demonstrē, kā tādi atribūti kā preserveAspectRatio un overflow ietekmē renderēšanu.

Datu formāti, tipi vai varianti

Ievade ir neapstrādāts SVG XML marķējums. Izvade ir tas pats SVG, renderēts izolētā iframe, plus URL kodēts data URI (data:image/svg+xml;charset=utf-8,…). Elementu skaita metriks saskaita katru atverošo tagu (tostarp defs, g, gradientus un līdzīgus ligzdotus elementus), sniedzot aptuvenu priekšstatu par sarežģītību. Izvilktās atribūtu vērtības tiek rādītas neapstrādātā formā.

Biežākās kļūdas un robežgadījumi

Ārējie resursi, uz kuriem atsaucas `use` vai `image` elementi ar href, netiks ielādēti izolētajā iframe. Iekļauts JavaScript script elementos tiek bloķēts ar smilškasti — animācijām jābalstās uz SMIL vai CSS keyframes. SVG, kas paļaujas uz konkrētu fontu, kas nav instalēts sistēmā, izmantos noklusējuma aizstājēju; priekšskatījumiem ieguliet fontus vai izmantojiet sistēmas fontus.

Kad izmantot šo rīku, nevis kodu

Izmantojiet pārlūka rīku vienreizējai ikonu izstrādei, atkļūdošanai vai data URI ģenerēšanai. Ražošanas resursiem palaidiet SVG caur SVGO ar pielāgotu konfigurāciju, lai noņemtu metadatus un minimizētu marķējumu, un izmantojiet sprite sistēmu vai pareizu bundlera integrāciju, lai ielādētu ikonas lietotnē, nevis visur iekļautu data URI.