Në tonë artikulli i mëparshëm Ne pamë se si të përdorim softuerin e lirë për të përfshirë imazhet në formatin WebP. Tani do të shohim pse të krijojmë imazhe SVG për faqet e internetit.
Një nga sfidat e mëdha me të cilat përballen dizajnerët e uebit është numri i pajisjeve me të cilat njerëzit lidhen me rrjetin. Në ato raste kur imazhi është thjesht ilustrues, humbja e cilësisë nuk ndikon shumë. Por, nëse është e rëndësishme për përmbajtjen, si p.sh. një infografik, kornizë teli ose pamje nga ekrani, duhet të siguroheni që përmbajtja të duket saktësisht e njëjtë në çdo madhësi.
Krijoni imazhe SVG për faqet e internetit
Çfarë janë grafika në formatin SVG
Për të kuptuar ndryshimin midis këtij lloji grafike dhe atyre që përdoren zakonisht në faqet e internetit, duhet të shpjegojmë dy koncepte; atë të grafikës raster dhe atë të grafikës vektoriale.
- Grafika raster: Ky lloj grafike është ndërtuar me pikselë të rregulluar në një rrjet. Çdo piksel i caktohet një ngjyrë specifike. Cilësia bazohet në rezolucionin që përcaktohet nga numri i pikselëve për inç. Ndërsa madhësia rritet, densiteti i pikselit zvogëlohet, duke ndikuar në cilësinë e imazhit. Kjo do të thotë që, për të përfaqësuar imazhe komplekse me shumë detaje, si p.sh. një fotografi, nevojiten skedarë shumë të mëdhenj në një madhësi të caktuar.
- Grafika vektoriale: Ato ndërtohen nga objekte gjeometrike të shprehura në formula matematikore. Këto objekte mund të jenë vija, forma dhe kthesa. Siç janë shprehur në formula matematikore, madhësia e tyre mund të ndryshohet pa humbur cilësinë dhe mprehtësinë, duke paraqitur detajet me saktësi.
Grafikat raster janë më të përshtatshmet për imazhe shumë komplekse siç janë fotografitë ose që përfshijnë hijezimin e butë të ngjyrave dhe gradientët. Për t'i modifikuar ato, ata kërkojnë softuer të specializuar për redaktimin e fotografive si Gimp.
Nga ana e saj, Grafikat vektoriale janë më të mirat për ilustrime, ikona dhe logo. Edhe pse ka programe redaktimi si Inkscape, ato gjithashtu mund të krijohen dhe modifikohen duke shkruar tekst.
Grafika në formatin SVG (Grafika vektoriale e shkallëzuar) Ato përdoren kryesisht në faqet e internetit dhe kanë këto karakteristika:
- Ata nuk preken nga rezoluta: Grafikat në formatin SVG duken po aq të mprehta në çdo madhësi ekrani, duke përfshirë ato që përdorin teknologji me rezolucion shumë të lartë.
- Ato janë grafika vektoriale: Siç e kemi shpjeguar tashmë, kjo lloj grafike bazohet në paraqitjen e objekteve gjeometrike të ndërtuara nga formula matematikore. Ndryshimi i madhësisë thjesht zbaton formulën për vlerat e reja.
- madhësi më të vogël: Formati SVG nuk ka nevojë të ruajë informacion për çdo piksel. Formulat matematikore për t'i ndërtuar ato ruhen në një skedar teksti në formatin e ngjeshur XML.
- Botimi: Ashtu si të gjitha grafika vektoriale, formati SVG mund të modifikohet me softuer specifik ose një redaktues teksti.
- Ndërveprimi: Këto lloje grafike mund të animohen ose bëhen për t'iu përgjigjur udhëzimeve të përdoruesit duke përdorur kodin CSS ose Javascript.
- pajtueshmëri: Shumica e pajisjeve kanë shfletues që mbështesin këtë format grafik.
Thamë që një grafik SVG mund të krijohet duke përdorur një redaktues teksti. Hapni redaktuesin e tekstit të shpërndarjes tuaj dhe ngjisni kodin e mëposhtëm:
<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>
Tani ruajeni me emrin rreth.svg. Nëse shikoni në menaxherin e skedarëve, do të shihni miniaturën e rrethit të gjelbër dhe, nëse e hapni me një shikues imazhi, do ta shihni në madhësi të plotë.
Ku:
<svg width="200" height="200">
Vendosni gjerësinë dhe lartësinë në 200 piksele.
<rect width="100%" height="100%" fill="white" />
Përcakton që sfondi do të jetë një katror i bardhë që do të zërë të gjithë gjerësinë dhe lartësinë e imazhit.
<circle cx="50%" cy="50%" r="50" fill="green" />
Vendosni rrethin në mes të figurës, caktoni një rreze prej 50 pikselësh dhe tregoni se ngjyra do të jetë e gjelbër.
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
Vendoseni fjalën Ubunlog në qendër të rrethit.
Në një artikull të ardhshëm do të shohim redaktorët grafikë për këtë format.