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 előnézet / szerkesztő

Kockás háttér

szélesség: 200magasság: 200viewBox: 0 0 200 2007 elem

SVG forrás

Előnézet

Technikai részletek

Hogyan működik az SVG előnézet / szerkesztő

Mit csinál az eszköz

Az SVG előnézet / szerkesztő élőben rendereli az SVG jelölést szerkesztés közben, és metaadatokat (szélesség, magasság, viewBox, elemszám) is kinyer a gyors ellenőrzéshez. Egy kapcsoló sakktáblás hátteret ad hozzá, hogy az átlátszó területek jól láthatók legyenek. Az eszköz URL-kódolt data URI-t is előállít, amely közvetlenül használható CSS background-image-ban vagy HTML src attribútumokban.

Gyakori fejlesztői felhasználási esetek

Ikontervezők különböző méreteken tesztelik a viewBox számításokat és a vonalvastagságokat. Frontend fejlesztők ellenőrzik, hogy egy kézzel szerkesztett SVG ikon optimalizálás után (kézzel vagy SVGO-val) még helyesen renderelődik-e. E-mail fejlesztők kompakt data URI verziókat készítenek márkajelekből HTML-be ágyazáshoz. Oktatók bemutatják, hogyan befolyásolják a renderelést az olyan attribútumok, mint a preserveAspectRatio és az overflow.

Adatformátumok, típusok vagy változatok

A bemenet nyers SVG XML jelölés. A kimenet ugyanaz az SVG sandboxolt iframe-ben renderelve, plusz egy URL-kódolt data URI (data:image/svg+xml;charset=utf-8,…). Az elemszám metrika minden nyitó taget számol (beleértve a defs, g, gradiensek és hasonló beágyazott elemeket), így durva képet ad a komplexitásról. A kinyert attribútumértékek nyers formában jelennek meg.

Gyakori buktatók és szélső esetek

A `use` vagy `image` elemek href-jével hivatkozott külső erőforrások nem töltődnek be a sandboxolt iframe-ben. A script elemekben lévő inline JavaScriptet a sandbox blokkolja — az animációk támaszkodjanak inkább SMIL-re vagy CSS keyframe-ekre. Azok az SVG-k, amelyek egy nem rendszertelepített betűtípustól függenek, alapértelmezett betűtípusra fognak visszaesni; előnézethez ágyazz be fontokat, vagy használj rendszerbetűtípusokat.

Mikor érdemes ezt az eszközt használni a kód helyett

Használd a böngészős eszközt egyszeri ikon-tervezéshez, hibakereséshez vagy data URI-k generálásához. Éles assetekhez futtasd az SVG-ket SVGO-n egy finomhangolt konfigurációval a metaadatok eltávolításához és a jelölés minifikálásához, és használj sprite rendszert vagy megfelelő bundler integrációt az ikonok betöltéséhez az appodban, ahelyett hogy mindenhol data URI-kat inline-olnál.