Sissejuhatus SVG-sse

Kujutistel võib olla mitu vormingut, mis varieeruvad vastavalt pildi omadustele. Pilt võib olla läbipaistmatu, läbipaistev ja nii edasi, ja kõik sellised kujutise omadused saab määratleda selle vormingu järgi. Mõned kõige sagedamini kasutatavad pildivormingud on JPEG.webp, PNG, GIF jne. Erinevate vormingute hulgas on üks oluline, mis luuakse XML-is või HTML-is koodirea abil, mida nimetatakse SVG-ks. Selles artiklis õpime tundma SVG-d, kuidas see luuakse, millised on selle vormingu lisad ja muud sellised asjad. Kuigi see pole piltide sagedamini kasutatav formaat, mängib see olulist rolli kaasaegses veebirakenduses, mis nõuab kvaliteeti koos atraktiivse liidesega.

SVG määratlus

SVG tähistab skaleeritavat vektorgraafikat. Seda saab määratleda kui piltide vormingut, mis on toodetud XML- või HTML-siltide abil. Kahemõõtmelise graafika kujundamine on väga kasulik ja see võib parandada kasutajate suhtlemiskogemust. Selle töötas välja veebikonsortsium kakskümmend aastat tagasi 1999. SVG uusim versioon on 1.1, mis ilmus 2011. aastal. See erineb muude vormingute piltidest väga palju, kuna nende jaoks oli vaja kavandada graafilise disaini rakendusi, kuid graafikat koos SVG laiendusi arendatakse tegelikult koodide või siltide abil. See on väga interaktiivne ja võimaldab kahemõõtmelise graafika kujundamist.

Mõõdetava vektorgraafika kohta peaks teadma, et seda ei saa alla laadida sarnaselt JPEG.webp- ega PNG-vormingus piltidega. Kui laadime alla JPEG.webp- või PNG-laiendiga pilte, salvestab see pildi koopia, mida saab redigeerida graafiliste kujundusriistade abil, näiteks Adobe Photoshop, paint jne, samas kui SVG-pilti tuleb muuta, muutes koode. Moodsal ajastul, kus veebirakendused peaksid olema igas mõttes täiuslikud, lisab SVG graafika sellele hämmastavat kvaliteeti. Alates pelgalt ringi kujundamisest kuni keeruka graafika kujundamiseni tuleb kasutada silte, kui nad soovivad, et graafikat arendataks SVG abil.

Kuidas teeb SVG töötamise nii lihtsaks?

On mitmeid punkte, kus SVG teeb asja tegelikult väga lihtsaks. Nagu me varem arutasime, on see väga kasulik veebirakenduse kavandamisel, millel peaks olema hämmastav väljavaade. SVG-vormingus loodud graafika muudab kasutaja rakendusega töötamise väga interaktiivseks. See on väga kasulik, kui peate graafilist komponenti kasutama ükskõik kus veebirakenduses. Koos HTML-koodidega tuleb kirjutada SVG-silt, et tuua selle funktsionaalsus veebilehele. Lihtsa liidese joonistamiseks võiks seda teha mõne reaga, kuid kui graafika peaks olema natuke keeruline, nõuab see pika HTML- või XML-koodi kirjutamist. Integreerides lihtsamad graafilised komponendid nagu ring, ruut, ristkülik jms, saab kujundada keeruka graafika.

Töö SVG-ga

SVG-ga töötamise õppimiseks läbime SVG-graafika arendamiseks kirjutatavate koodide rea. Vaatleme näidet, kus me kujundame lihtsa ringi, mille punane värv on täidetud ja millel on must ääris. Kirjutame HTML-koodid ja veebilehe graafika tutvustamiseks kasutame SVG-märgendit.

Ülaltoodud koodis oleme SVG-graafika kirjutanud, kasutades SVG-silti ja selle olulisi atribuute. SVG-sildiga esimeses reas oleme maininud ringi laiust ja kõrgust. Teises reas oleme kasutanud ringi silti, mida saab kasutada SVG-sildi alammärgisena. Cx on ringmärgise atribuut, mida kasutatakse, et määratleda mitu pikslit ring peab x-teljel katma. Cy on ringmärgise atribuut, mida kasutatakse, et määratleda mitu pikslit ring peab y-teljel katma. Atribuut r määratleb ringi raadiuse.

Stroke määratleb äärise värvi, mis meie puhul on must. Järgmine atribuut insuldi laius määratleb ringi laiuse, mida see võib pikslites anda. Ringi sildi viimane atribuut on täidetud, mida kasutatakse selle ringi määratlemiseks, milline värv tuleb täita. Oleme valinud punase, nii et väljundis näete, et ringil on punane värv täidetud. Kui soovite töötada SVG-koodiga, saate selle pildi lihtsalt ülaltoodud pildilt kopeerida, salvestada HTML-laiendiga ja vaadata, mida leiate väljundina. Lisateabe saamiseks või uurimiseks saate neid modifitseerida.

Vajalikud oskused

SVG-ga töötamiseks peaksite teadma, kuidas HTML-siltidega töötada. HTML-is rakendatakse seda SVG-sildi abil, millel on lisaks alam-sildid, mida saab SVG-sildi all kasutada graafika kujundamiseks. Kui olete juba projekteeritud veebirakendusena töötanud, võib teil SVG-ga töötada olla lihtne. Kuigi HTML-i elementide ilme muutmine ei tähenda ainult lehe struktuuri andmist, peate enne SVG-ga alustamist natuke harjutama. Kui teil on graafilise disaini kohta hea idee, lisab see eelise, et saaksite SVG-ga töötada või lühikese aja jooksul õppida.

Järeldus

Skaleeritav vektorgraafika on piltide spetsiaalne vorming, millel on kahemõõtmeline graafika. Nõude põhjal saab pilte kasutada mis tahes vormingus, kuid SVG-d kasutades on see pisut erinev, kuna see on välja töötatud koodiridade, mitte graafilise kujundamise tööriistade abil. Seda kasutatakse peamiselt veebirakenduses, kuna selle kirjutamiseks tuleb kasutada XML-i või HTML-silti. Seda saab kasutada, et muuta veebirakendus kasutajate kogemuste parendamiseks üsna interaktiivseks.

Soovitatavad artiklid

See on juhis Mis on SVG. Siin käsitleme määratlust, mõisteid, töötamist ja seda, kuidas SVG teeb töö lihtsaks. Lisateavet leiate ka meie muudest soovitatud artiklitest -

  1. Ruudustiku paigutus Java-s
  2. PHP stringifunktsioonid
  3. HTML-i rakendused
  4. Karjäär ASP.NET-is

Kategooria:

Tarkvaraarendus