Miks luua veebisaitide jaoks SVG-pilte?

Kuigi see oli algselt SVG-graafika, ei toeta meie sisuhaldur seda vormingut, mistõttu see teisendati PNG-vormingusse

Meie eelmises artiklis Nägime, kuidas kasutada tasuta tarkvara WebP-vormingus piltide lisamiseks. Nüüd näeme, miks luua veebisaitide jaoks SVG-pilte.

Üks suuri väljakutseid, millega veebidisainerid silmitsi seisavad, on seadmete arv, millega inimesed võrguga ühenduse loovad. Juhtudel, kui pilt on vaid illustratiivne, ei mõjuta kvaliteedi langus palju. Kuid kui see on sisu (nt infograafika, traatraam või ekraanipilt) jaoks oluline, peate tagama, et sisu näeks igas suuruses täpselt samasugune välja.

Looge veebisaitide jaoks SVG-pilte

Mis on SVG-vormingus graafika

Et mõista erinevust seda tüüpi graafika ja veebisaitidel tavaliselt kasutatava graafika vahel, peame selgitama kahte mõistet; rastergraafika ja vektorgraafika oma.

  • Rastergraafika: Seda tüüpi graafika on üles ehitatud ruudustikku paigutatud pikslitega. Igale pikslile on määratud konkreetne värv. Kvaliteet põhineb eraldusvõimel, mille määrab pikslite arv tolli kohta. Kui suurus suureneb, pikslite tihedus väheneb, mis mõjutab pildi kvaliteeti. See tähendab, et paljude detailidega keerukate piltide (nt foto) esitamiseks on vaja väga suuri teatud suurusega faile.
  • Vektorgraafika: Need on ehitatud geomeetrilistest objektidest, mis on väljendatud matemaatiliste valemitega. Need objektid võivad olla jooned, kujundid ja kõverad. Kuna need on väljendatud matemaatilistes valemites, saab nende suurust muuta kvaliteeti ja teravust kaotamata, esitades detaile täpselt.

Rastergraafika sobib kõige paremini väga keeruliste piltide, näiteks fotode jaoks või mis sisaldavad pehmeid värvivarjundeid ja gradiente. Nende redigeerimiseks vajavad nad fototöötluseks spetsiaalset tarkvara, näiteks Gimp.

Omalt Vektorgraafika sobib kõige paremini illustratsioonide, ikoonide ja logode jaoks. Kuigi on olemas redigeerimisprogramme nagu Inkscape, saab neid luua ja redigeerida ka teksti kirjutades.

Graafika SVG-vormingus (skaleeritav vektorgraafika) Neid kasutatakse peamiselt veebisaitidel ja neil on järgmised omadused:

  • Neid resolutsioon ei mõjuta:  SVG-vormingus graafika näeb võrdselt terav välja igas suuruses ekraanil, kaasa arvatud need, mis kasutavad väga kõrge eraldusvõimega tehnoloogiat.
  • Need on vektorgraafika: Nagu me juba selgitasime, põhineb seda tüüpi graafika matemaatiliste valemite abil ehitatud geomeetriliste objektide esitamisel. Suuruse muutmisel rakendatakse uutele väärtustele lihtsalt valem.
  • väiksem suurus: SVG-vorming ei pea iga piksli kohta teavet salvestama. Nende koostamiseks kasutatavad matemaatilised valemid salvestatakse tihendatud XML-vormingus tekstifaili.
  • Väljaanne: Nagu kogu vektorgraafikat, saab ka SVG-vormingut muuta spetsiaalse tarkvara või tekstiredaktoriga.
  • Interaktiivsus: seda tüüpi graafikat saab animeerida või panna vastama kasutaja juhistele, kasutades CSS-i või Javascripti koodi.
  • Ühilduvus: enamikul seadmetel on seda graafilist vormingut toetavad brauserid.

Ütlesime, et SVG-graafikat saab luua tekstiredaktoriga. Avage oma distributsiooni tekstiredaktor ja kleepige järgmine kood:

<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>

Nüüd salvestage see nimega circle.svg. Kui vaatate failihaldurisse, näete rohelise ringi pisipilti ja kui avate selle pildivaaturiga, näete seda täissuuruses.

Kui:

<svg width="200" height="200">

Määrake laiuseks ja kõrguseks 200 pikslit.

<rect width="100%" height="100%" fill="white" />

Määrab, et taustaks on valge ruut, mis võtab enda alla kogu pildi laiuse ja kõrguse.
<circle cx="50%" cy="50%" r="50" fill="green" />

Asetage ring pildi keskele, määrake selle raadius 50 pikslit ja märkige, et värv on roheline.

<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>

Pange sõna Ubunlog täpselt ringi keskpunktis.

Järgmises artiklis näeme selle vormingu graafilisi redigeerijaid.


Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.