Johdatus SVG: hen
Kuvissa voi olla useita muotoja, jotka vaihtelevat kuvan ominaisuuksien mukaan. Kuva voi olla läpinäkymätön, läpinäkyvä ja niin edelleen, ja kaikki kuvat ominaisuudet voidaan määritellä sen muodossa. Jotkut erittäin yleisesti käytetyistä kuvamuodoista ovat JPEG.webp, PNG, GIF jne. Eri muotojen joukossa on tärkeä muoto, joka luodaan XML- tai HTML-koodirivillä, nimeltään SVG. Tässä artikkelissa opitaan SVG: stä, kuinka se luodaan, mitkä lisäominaisuudet tällä muodolla ovat ja vastaavat. Vaikka se ei ole kuvien yleisesti käytetty muoto, sillä on tärkeä rooli nykyaikaisessa verkkosovelluksessa, joka vaatii laatua ja houkuttelevaa käyttöliittymää.
Määritelmä SVG
SVG tarkoittaa skaalautuvaa vektorigrafiikkaa. Se voidaan määritellä XML- tai HTML-tunnisteilla tuotettujen kuvien muotoksi. On erittäin hyödyllistä suunnitella kaksiulotteinen grafiikka ja se voi parantaa käyttäjien vuorovaikutuskokemusta. Sen on kehittänyt maailmanlaajuinen verkkokonsortio kaksikymmentä vuotta sitten vuonna 1999. Uusin SVG-versio on 1.1, joka julkaistiin vuonna 2011. Se eroaa huomattavasti muiden muotojen kuvista, koska ne vaativat suunnittelussa graafisen suunnittelun sovelluksia, mutta grafiikkaa SVG-laajennus kehitetään tosiasiallisesti koodeilla tai tunnisteilla. Se on erittäin vuorovaikutteinen ja voi mahdollistaa kaksiulotteisen grafiikan suunnittelun.
Tärkeä asia, joka tulisi tietää skaalattavasta vektorigrafiikasta, on se, että sitä ei voi ladata samalla tavalla kuin JPEG.webp- tai PNG-muotoisia kuvia. Kun lataamme kuvia JPEG.webp- tai PNG-laajennuksella, se tallentaa kopion kuvasta, jota voidaan muokata graafisen suunnittelun työkaluilla, kuten Adobe Photoshop, maali jne., Kun taas SVG-kuvaa on muokattava muuttamalla koodeja. Nykyaikana, jolloin web-sovellusten on tarkoitus olla täydellisiä kaikin tavoin, SVG-grafiikka lisää siihen hämmästyttävää laatua. Pelkän ympyrän suunnittelusta monimutkaisen grafiikan suunnitteluun on käytettävä tunnisteita, jos he haluavat grafiikan kehittää SVG: tä käyttämällä.
Kuinka SVG tekee työskentelystä niin helppoa?
On olemassa useita kohtia, joissa SVG todella tekee asiat erittäin helpoiksi. Kuten aiemmin keskustelimme, se on erittäin hyödyllinen suunnitellessaan verkkosovellusta, jonka oletetaan olevan uskomattomia näkymiä. SVG-muodossa luodut grafiikat tekevät siitä käyttäjän erittäin interaktiivisen työskentelemään sovelluksen kanssa. Se on erittäin hyödyllinen, kun joudut käyttämään graafista komponenttia missä tahansa web-sovelluksessa. Yhdessä HTML-koodien kanssa on kirjoitettava SVG-tunniste, jotta sen toiminnallisuus saadaan verkkosivulle. Jos halutaan piirtää yksinkertainen käyttöliittymä, se voidaan tehdä muutamalla rivinumerolla, mutta jos grafiikan oletetaan olevan hieman monimutkainen, se vaatii pitkän HTML- tai XML-koodin kirjoittamisen. Integroimalla yksinkertaisemmat graafiset komponentit, kuten ympyrä, neliö, suorakulmio ja niin edelleen, voidaan suunnitella monimutkainen grafiikka.
Yhteistyö SVG: n kanssa
Jotta voimme oppia työskentelemään SVG: n kanssa, käymme läpi koodirivin, joka on kirjoitettava SVG-grafiikan kehittämiseksi. Tarkastellaan esimerkkiä, jossa suunnittelemme yksinkertaisen ympyrän, jonka punainen väri on täytetty ja musta reunus. Me kirjoitamme koodeja HTML-muodossa ja käytämme SVG-tunnistetta grafiikan esittelemiseen verkkosivulle.
Yllä olevaan koodiin olemme kirjoittaneet SVG-grafiikan käyttämällä SVG-tunnistetta ja sen tärkeitä ominaisuuksia. Ensimmäisessä rivissä, jolla on SVG-tunniste, olemme maininneet ympyrän leveyden ja korkeuden. Toisella rivillä olemme käyttäneet ympyrätunnistetta, jota voidaan käyttää SVG-tunnisteen alamerkkinä. Cx on ympyrätunnisteen ominaisuus, jota käytetään määrittelemään kuinka monta pikseliä ympyrän on peitettävä x-akselilla. Cy on ympyrätagin ominaisuus, jota käytetään määrittelemään kuinka monta pikseliä ympyrän on peitettävä y-akselilla. Attribuutti r määrittelee ympyrän säteen.
Stroke määrittelee reunan värin, joka meidän tapauksessamme on musta. Seuraava määritteen viivan leveys määrittelee ympyrän leveyden, jonka pikselit voivat tarjota. Ympyrätagin viimeinen ominaisuus on täytetty, jota käytetään määrittelemään, mikä väri on täytettävä ympyrässä. Olemme valinneet punaisen, joten tulosteessa näet, että ympyrän punainen väri on täytetty. Jos haluat työskennellä SVG-koodin kanssa, voit kopioida koodin yllä olevasta kuvasta, tallentaa sen HTML-laajennuksella ja nähdä, mitä löydät tulosteena. Voit pitää heidät muokkaamalla oppiaksesi tai tutkiaksesi lisää.
Vaadittavat taidot
Jotta voisit työskennellä SVG: n kanssa, sinun tulee tietää, miten HTML-tunnisteita käytetään. HTML-muodossa se toteutetaan käyttämällä SVG-tunnistetta, jolla on lisäksi alisivut, joita voidaan käyttää SVG-tunnisteen alla grafiikan suunnitteluun. Jos olet jo työskennellyt suunnitellulla verkkosovelluksella, voi olla helppoa työskennellä SVG: n kanssa. Vaikka kyse ei ole kaikesta sivun rakenteen antamisesta HTML-elementtien ulkoasun muuttamiseen, tarvitset vähän harjoittelua ennen kuin voit aloittaa työskentelyn SVG: n kanssa. Jos sinulla on hyvä ajatus grafiikan suunnittelusta, se lisää reunan saadaksesi sinut työskentelemään tai oppimaan SVG: tä lyhyessä ajassa.
johtopäätös
Skaalautuva vektorigrafiikka on kuvien erityismuoto, jossa on kaksiulotteinen grafiikka. Vaatimuksen perusteella kuvia voidaan käyttää missä tahansa muodossa, mutta SVG: tä käytettäessä se on hiukan erilainen, koska sitä kehitetään koodirivien sijaan graafisen suunnittelun työkalujen sijaan. Sitä käytetään pääasiassa verkkosovelluksessa, koska se on kirjoitettava käyttämällä XML- tai HTML-tunnistetta. Sitä voidaan käyttää tekemään verkkosovelluksesta melko interaktiivinen käyttäjien kokemuksen parantamiseksi.
Suositellut artikkelit
Tämä on opas Mikä on SVG. Tässä keskustellaan määritelmästä, käsitteistä, työskentelystä ja siitä, kuinka SVG helpottaa työskentelyä. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -
- Ruudukon asettelu Java-sovelluksessa
- PHP-merkkijonotoiminnot
- HTML-sovellukset
- Ura ASP.NET: ssä