Náhled / editor SVG

Jak funguje SVG Preview / Editor

Co nástroj dělá

SVG Preview / Editor vykresluje SVG značkování živě během úprav a extrahuje metadata (width, height, viewBox, počet prvků) pro rychlou kontrolu. Přepínač přidá šachovnicové pozadí, abyste jasně viděli průhledné oblasti. Nástroj také vytváří URL-kódované data URI vhodné pro přímé použití v CSS background-image nebo v HTML atributech src.

Běžné případy použití pro vývojáře

Designéři ikon testují výpočty viewBox a tloušťky tahů při různých velikostech. Frontend vývojáři ověřují, že ručně upravená SVG ikona se po optimalizaci (ručně nebo přes SVGO) stále vykresluje správně. Vývojáři e-mailů generují kompaktní verze data URI pro vložení značek do HTML. Lektoři ukazují, jak atributy jako preserveAspectRatio a overflow ovlivňují vykreslování.

Datové formáty, typy nebo varianty

Vstupem je surové SVG XML značkování. Výstupem je stejné SVG vykreslené v sandboxovaném iframe plus URL-kódované data URI (data:image/svg+xml;charset=utf-8,…). Metrika počtu prvků počítá každý otevírací tag (včetně defs, g, gradientů a podobných vnořených prvků), což dává hrubou představu o složitosti. Extrahované hodnoty atributů se zobrazují v surové podobě.

Běžné nástrahy a okrajové případy

Externí zdroje odkazované prvky `use` nebo `image` s href se uvnitř sandboxovaného iframe nenačtou. Inline JavaScript uvnitř prvků script je sandboxem blokován — animace by se měly spoléhat na SMIL nebo CSS keyframes. SVG, která závisí na konkrétním písmu, jež není nainstalované v systému, se přepnou na výchozí; pro náhledy písma vložte nebo používejte systémová písma.

Kdy použít tento nástroj vs. kód

Nástroj v prohlížeči použijte pro jednorázový návrh ikon, ladění nebo generování data URI. Pro produkční assety prožeňte SVG přes SVGO s vyladěnou konfigurací, aby se odstranila metadata a minimalizovalo značkování, a používejte sprite systém nebo správnou integraci bundleru pro načítání ikon v aplikaci, místo abyste všude vkládali data URI.