SVG vietturu ģenerators

Kā darbojas SVG viettura ģenerators

Ko rīks dara

SVG viettura ģenerators izveido vieglus vektoru viettura attēlus ar pielāgotiem izmēriem, fona krāsām, teksta pārklājumiem un fontu iestatījumiem. Tas izvada SVG marķējumu tieši un arī kā Base64 data URI, kas gatavs iegulšanai HTML vai CSS. Tā kā SVG ir no izšķirtspējas neatkarīgs un parasti mazāks par 1 KB, šie vietturi ielādējas uzreiz bez tīkla pieprasījumiem.

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

Frontend izstrādātāji prototipēšanas laikā izmanto SVG vietturus, lai rezervētu izkārtojuma vietu, pirms ir pieejami īstie attēli, izvairoties no kumulatīvās izkārtojuma nobīdes (CLS). Tie ir noderīgi dizaina sistēmās avatāru rezerves variantiem, sīktēlu skeletiem un responsīviem attēlu konteineriem. E-pasta izstrādātāji iegulda data URI vietturus HTML veidnēs, kur e-pasta klienti var bloķēt ārējo attēlu ielādi.

Datu formāti, tipi vai varianti

Izvade ir standarta SVG 1.1 dokuments, kas satur aizpildītu taisnstūri un centrētu teksta elementu. Data URI variants kodē šo SVG kā Base64 virkni ar prefiksu 'data:image/svg+xml;base64,' tiešai izmantošanai img src atribūtos, CSS background-image īpašībās vai iekļautā HTML. Izmēri tiek norādīti pikseļos, taču SVG mērogojas līdz jebkuram konteinera izmēram bez pikseļošanās, jo tas ir vektoru formāts.

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

Datu URI pārlūkprogrammas nekešo neatkarīgi no dokumenta, kurā tie ir iegulti, tāpēc viena un tā paša viettura izmantošana daudzās lapās palielina kopējo pārsūtīšanas apjomu, salīdzinot ar vienu kešotu ārēju failu. Ļoti garas teksta etiķetes var pārsniegt SVG viewBox, ja izmēri ir mazi. Daži vecāki e-pasta klienti neatbalsta SVG datu URI, tāpēc tiek rādīta bojāta attēla ikona. Content Security Policy (CSP) galvenes var bloķēt iekļautos datu URI, ja img-src nav iekļauts 'data:'.

Kad izmantot šo rīku, nevis kodu

Izmantojiet šo pārlūkprogrammas rīku, lai ātri ģenerētu vienreizējus viettura attēlus maketēšanas vai prototipēšanas laikā, nepievienojot būvēšanas atkarības. Dinamiskai vietturu ģenerēšanai produkcijā (piem., lietotāju augšupielādētu attēlu aizstājējiem) izmantojiet servera puses SVG veidņu ģenerēšanu vai specializētus pakalpojumus, piemēram, plaiceholder, kas integrējas ar jūsu attēlu optimizācijas cauruļvadu un var ģenerēt izpludinātus zemas kvalitātes attēlu vietturus (LQIP) no reāliem attēliem.