Chakata hadi picha 200 kwa kazi moja — weka mipangilio mara moja, zikimbie zote.
Umechoshwa na maombi ya ziada ya HTTP kwa kila ikoni ndogo inayopunguza kasi ya tovuti yako? Kigeuzi chetu cha SVG hadi Data URI ndio suluhisho. Zana hii inakuwezesha kupachika picha za SVG moja kwa moja kwenye HTML au CSS yako, kuondoa hitaji la maombi tofauti ya faili na kusaidia kuharakisha upakiaji wa ukurasa wako. Kwa kubadilisha msimbo wako wa SVG kuwa data URI fupi ya base64, unaweza kurahisisha rasilimali zako na kuboresha utendaji wa tovuti kwa sekunde chache.
Jinsi Kigeuzi Chetu cha SVG hadi Data URI Kinavyofanya Kazi
Mchakato ni rahisi sana. Bandika tu msimbo wako kamili wa SVG—ukianza na <svg> na kuishia na </svg>—kwenye kisanduku cha kuingiza na ubofye kitufe cha kubadilisha. Zana yetu inachakata msimbo mara moja kwenye kivinjari chako, ikisimba kwa mfuatano wa base64. Kisha inafunga mfuatano huu katika umbizo sahihi la matumizi ya moja kwa moja, ikikupa sehemu tayari kunakiliwa kwenye sifa yako ya CSS background-image au sifa ya src ya tagi ya HTML <img>. Hakuna usanidi mgumu; ni operesheni rahisi ya kunakili-na-bandika.
Wakati wa Kutumia Data URI ya SVG
Kupachika SVGs kama data URI ni bora kwa aikoni ndogo na rahisi na picha zinazotumiwa mara kwa mara kwenye tovuti yako, kama vile nembo, alama za vitone, au vipengele vya kiolesura cha mtumiaji. Faida kuu ni kupunguza maombi ya seva, ambayo inaweza kuongeza kasi ya upakiaji wa tovuti yako, hasa kwenye vifaa vya mkononi. Hata hivyo, njia hii haifai kwa SVGs kubwa au ngumu sana. Kwa sababu usimbaji wa base64 huongeza ukubwa wa faili kwa takriban 33%, kupachika SVG kubwa kunaweza kupanua faili yako ya CSS au HTML, na kupoteza faida za utendaji. Kwa kazi ngumu zaidi za vekta, angalia seti yetu kamili ya zana za vekta za SVG.
Vidokezo vya Matokeo Bora
Ili kupata manufaa zaidi kutoka kwa mbinu hii, daima boresha SVG yako kabla ya kuibadilisha. Faili ndogo na safi ya SVG itasababisha data URI fupi na yenye ufanisi zaidi. Tunapendekeza sana uendeshe msimbo wako kupitia zana yetu ya Kiboreshaji cha SVG kwanza ili kuondoa data zisizo za lazima na kupunguza ukubwa wake. Pia, kumbuka kwamba mara SVG inapopachikwa kama data URI, huwezi kuweka mtindo wa sehemu zake za ndani kwa CSS ya nje. Inafanya kazi kama PNG au JPEG katika suala hilo. Kwa picha zinazohitaji mitindo inayobadilika, kuunganisha kwa faili ya nje ya .svg bado ni njia bora. Pata msukumo na picha tayari kutumika katika orodha zetu za SVG.
Maswali yanayoulizwa mara kwa mara
SVG data URI ni nini?
SVG data URI ni mfuatano wa maandishi unaowakilisha picha ya SVG, iliyosimbwa kwa umbizo la base64. Hii inakuwezesha kupachika picha moja kwa moja kwenye HTML au CSS bila kuhitaji faili tofauti.
Je, ni bora kupachika SVG au kutumia lebo ya <img>?
Kupachika SVG kama URI ya data ni bora kwa aikoni ndogo ili kupunguza maombi ya HTTP na kuboresha upakiaji wa awali wa ukurasa. Kwa SVG kubwa na ngumu, lebo ya kawaida ya <img> inayounganisha faili ya .svg ni bora kwa kuhifadhi kumbukumbu.
Je, ninawezaje kutumia SVG ya base64 katika CSS?
Unaweza kutumia SVG iliyosimbwa kwa base64 katika CSS kwa kuiweka kama thamani ya sifa ya `background-image`. Umbizo ni `url('data:image/svg+xml;base64,...')`, ambapo nukta ni mfuatano wako uliosimbwa.
Kwa nini URI yangu ya data ya SVG ni ndefu sana?
Usimbaji wa Base64 huongeza ukubwa wa faili asili kwa takriban 33%. Ili kupata URI fupi ya data, unapaswa kwanza kupunguza msimbo wako wa SVG ili kuondoa herufi na maoni yasiyo ya lazima.
Je, ninaweza kupamba SVG iliyopachikwa kama URI ya data?
Hapana, huwezi kupamba njia za ndani za SVG ya URI ya data kwa kutumia CSS ya nje kutoka kwa ukurasa wako wa wavuti. Katika muktadha huu, kivinjari huitendea kama picha tuli ya rasta kama vile PNG.
Je, URI za data za SVG ni mbaya kwa SEO?
Hapana, sio mbaya kwa SEO kwa asili yake. Zikitumika kwa usahihi kwa aikoni ndogo, zinaweza kuboresha kasi ya ukurasa, ambayo ni kipengele chanya cha viwango vya ukurasa. Epuka kuzitumia kwa picha kubwa ambazo zinaweza kupunguza kasi ya uchanganuzi wa HTML/CSS yako.
Kuna tofauti gani kati ya base64 na SVGs zilizosimbwa kwa URL?
Zote ni njia za kupachika SVGs. Base64 ni mbinu ya kusimba data kutoka binary hadi maandishi inayofaa kwa data yoyote, wakati usimbaji wa URL (au usimbaji wa asilimia) unahakikisha XML ya SVG ni salama kutumia ndani ya mfuatano wa URL.
Je, zana hii inahifadhi data yangu ya SVG?
Hapana, zana yetu inafanya kazi ndani ya kivinjari chako pekee. Msimbo wako wa SVG haujawahi kupakiwa kwenye seva zetu, kuhakikisha data yako inabaki kuwa ya faragha.
Kuhusu SVG hadi CSS Data URI
SVG hadi CSS Data URI ni zana ya bure mtandaoni kutoka Wallpapers.com inayofanya kazi kwenye kivinjari chako — hakuna usakinishaji, hakuna alama ya maji, hakuna usajili wa barua pepe kwa jaribio la kwanza.
Simbaisha SVG katika data URI ya base64 kwa upachikaji wa CSS / HTML moja kwa moja.
Jinsi ya kutumia SVG hadi CSS Data URI
- Weka picha yako kwenye eneo la kupakia (moja au kundi — washa Bulk juu).
- Chagua mipangilio yoyote inayowekwa na zana (ukubwa, umbizo, ubora).
- Bonyeza Run. Matokeo yatashuka kiotomatiki — hakuna hatua ya kuhifadhi mwenyewe.
Wakati wa kuitumia
Matumizi ya kawaida ni pamoja na:
kuandaa picha kwa ajili ya kupakia kwenye wavuti, orodha za biashara mtandaoni, majukwaa ya mitandao ya kijamii yenye vikwazo vya umbizo, na kubadilisha faili kutoka kifaa au programu moja hadi nyingine.
Bure dhidi ya Premium
Kila mgeni anapata jaribio la bure; watumiaji walioingia na akaunti ya bure wanapata kiwango cha juu cha kila siku. Jiandikisha kwa
Premium
kwa matumizi yasiyo na kikomo, usindikaji wa wingi hadi picha 200 kwa kazi, foleni ya kipaumbele, na kuvinjari bila matangazo.
Zana zinazohusiana
Unatafuta kitu tofauti kidogo? Jaribu
Kibadilishaji SVG hadi PNG
,
Kibadilishaji cha SVG hadi JPG
or
Kibadilishaji cha SVG hadi WebP
— au vinjari vyote
SVG / Vekta Zana.
