SVG-platshållargenerator

Hur SVG-platshållargeneratorn fungerar

Vad verktyget gör

SVG-platshållargeneratorn skapar lätta vektorbaserade platshållarbilder med anpassade dimensioner, bakgrundsfärger, textöverlägg och typsnittsinställningar. Den matar ut SVG-markupen direkt och som en Base64-data-URI redo att bäddas in i HTML eller CSS. Eftersom SVG är upplösningsoberoende och vanligtvis under 1 KB laddas dessa platshållare omedelbart utan nätverksförfrågningar.

Vanliga användningsfall för utvecklare

Frontendutvecklare använder SVG-platshållare under prototypning för att reservera layoututrymme innan riktiga bilder finns tillgängliga, vilket undviker kumulativ layoutförskjutning (CLS). De är användbara i designsystem för avatar-fallbacks, miniatyrskelett och responsiva bildbehållare. E-postutvecklare bäddar in data-URI-platshållare i HTML-mallar där extern bildinläsning kan blockeras av e-postklienter.

Dataformat, typer eller varianter

Utdata är ett standardiserat SVG 1.1-dokument som innehåller en fylld rektangel och ett centrerat textelement. Data-URI-varianten kodar denna SVG som en Base64-sträng med prefixet 'data:image/svg+xml;base64,' för direkt användning i img src-attribut, CSS-egenskaperna background-image eller inline-HTML. Dimensioner anges i pixlar men SVG:n skalar till valfri behållarstorlek utan pixelering eftersom det är ett vektorformat.

Vanliga fallgropar och specialfall

Data-URI:er cachelagras inte av webbläsare oberoende av dokumentet de är inbäddade i, så att använda samma platshållare på många sidor ökar den totala överföringsstorleken jämfört med en enda cachelagrad extern fil. Mycket långa textetiketter kan spilla över SVG:ns viewBox om dimensionerna är små. Vissa äldre e-postklienter stöder inte SVG-data-URI:er och faller tillbaka till en trasig bildikon. Content Security Policy (CSP)-headers kan blockera inline data-URI:er om 'data:' inte ingår i img-src.

När du ska använda det här verktyget jämfört med kod

Använd det här webbläsarverktyget för att snabbt generera engångs-platshållarbilder under wireframing eller prototypande utan att lägga till byggberoenden. För dynamisk platshållargenerering i produktion (t.ex. reservbilder för användaruppladdade bilder), använd SVG-mallning på serversidan eller dedikerade tjänster som plaiceholder som integreras med din bildoptimeringspipeline och kan generera suddiga platshållarbilder med låg bildkvalitet (LQIP) från faktiska bilder.