Generátor zástupných SVG

Jak funguje generátor SVG zástupných obrázků

Co nástroj dělá

Generátor SVG zástupných obrázků vytváří lehké vektorové zástupné obrázky s vlastními rozměry, barvami pozadí, textovými překryvy a nastavením písma. Vypisuje SVG markup přímo i jako Base64 data URI připravené k vložení do HTML nebo CSS. Protože SVG je nezávislé na rozlišení a typicky má méně než 1 KB, tyto zástupné obrázky se načítají okamžitě bez síťových požadavků.

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

Frontend vývojáři používají SVG zástupné obrázky během prototypování k rezervaci místa v rozvržení, než jsou k dispozici skutečné obrázky, čímž se vyhnou kumulativnímu posunu rozvržení (CLS). Jsou užitečné v design systémech jako fallback pro avatary, skeletony náhledů a kontejnery pro responzivní obrázky. Vývojáři e-mailů vkládají zástupné obrázky jako data URI do HTML šablon, kde mohou e-mailoví klienti blokovat načítání externích obrázků.

Datové formáty, typy nebo varianty

Výstupem je standardní dokument SVG 1.1 obsahující vyplněný obdélník a vycentrovaný textový prvek. Varianta data URI kóduje toto SVG jako Base64 řetězec s prefixem 'data:image/svg+xml;base64,' pro přímé použití v atributech img src, vlastnostech CSS background-image nebo inline HTML. Rozměry se zadávají v pixelech, ale SVG se škáluje na libovolnou velikost kontejneru bez pixelizace, protože jde o vektorový formát.

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

Data URI nejsou prohlížeči ukládány do mezipaměti nezávisle na dokumentu, do kterého jsou vloženy, takže použití stejného placeholderu na mnoha stránkách zvyšuje celkový objem přenesených dat oproti jednomu externímu souboru uloženému v cache. Velmi dlouhé textové popisky mohou při malých rozměrech přetéct mimo SVG viewBox. Někteří starší e-mailoví klienti nepodporují SVG data URI a místo toho zobrazí ikonu rozbitého obrázku. Hlavičky Content Security Policy (CSP) mohou blokovat inline data URI, pokud v img-src není zahrnuto 'data:'.

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

Použijte tento nástroj v prohlížeči k rychlému generování jednorázových placeholder obrázků při tvorbě wireframů nebo prototypování bez přidávání závislostí do buildu. Pro dynamické generování placeholderů v produkci (např. fallbacky pro uživatelsky nahrané obrázky) použijte server-side šablonování SVG nebo specializované služby jako plaiceholder, které se integrují s vaším pipeline pro optimalizaci obrázků a dokážou z reálných obrázků generovat rozmazané low-quality image placeholders (LQIP).