Kisimbaji cha URL cha SVG

SVG ni nini?

SVG inasimama kwa Scalable Vector Graphics. SVG hutumiwa kufafanua picha za msingi wa vekta kwa Wavuti kwa muundo wa XML. Kila kipengele na sifa katika faili za SVG zinaweza kuhuishwa.

• Wikipedia - SVG

Jinsi ya kutumia SVG katika CSS?

Ili kutumia nambari za SVG moja kwa moja katika CSS, unahitaji kusimba SVG kwanza. Unaweza kutumia zana hii ya SVG URL Encoder au kazi ya JavaScript encodeURIComponent(). URI ya data ya SVG iliyosimbwa inaweza kutumika na mali za CSS background-image, border-image na mask kupitia kazi url(). Mfano: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

Jinsi ya kubadilisha rangi ya SVG katika CSS?

Ili kubadilisha rangi ya SVG yoyote, unaweza kuchanganya mali za CSS mask na background-color. Mfano ulio hapa chini utabadilisha rangi ya SVG kuwa bluu. Mfano: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

URL ni nini?

URL (Uniform Resource Locator) ni anwani ya rasilimali ya kipekee kwenye mtandao. Ni moja ya njia muhimu zinazotumika na vivinjari kupata rasilimali kama vile kurasa za HTML, hati za CSS, picha, na kadhalika.

• MDN - What is a URL?

Jinsi ya kusimba URL?

Ili kusimba URL unaweza kutumia kazi encodeURIComponent() ambayo inasimba URI kwa kubadilisha kila tukio la herufi fulani na moja, mbili, tatu, au nne za escape sequences zinazowakilisha usimbaji wa UTF-8 wa herufi hiyo. Ikilinganishwa na encodeURI(), kazi hii inasimba herufi zaidi, ikiwa ni pamoja na zile ambazo ni sehemu ya sintaksia ya URI.

• MDN - encodeURIComponent()

Jinsi ya kusimbua URL?

Ili kusimbua URL unaweza kutumia kazi decodeURIComponent() ambayo inasimbua URI kwa kutibu kila escape sequence katika umbo %XX kama kitengo kimoja cha msimbo wa UTF-8 (baiti moja). Katika UTF-8, idadi ya bits 1 zinazoongoza katika baiti ya kwanza, ambayo inaweza kuwa 0 (kwa herufi za ASCII za baiti moja), 2, 3, au 4, inaonyesha idadi ya baiti katika herufi hiyo.

• MDN - decodeURIComponent()