Katsokaa skaalautuvaa vektorigrafiikkaa (SVG)
Vektorigrafiikkaa on käytetty laajalti tulostusmateriaalissa. Web-sivustossa voimme myös lisätä vektorigrafiikkaa SVG: llä tai Skaalautuva vektorigrafiikka. Viitaten viralliseen speciin W3.orgissa, SVG on kuvattu seuraavasti:
Kieli, jossa kuvataan kaksiulotteista grafiikkaa XML: ssä. SVG sallii kolmenlaiset ßgrafiset kohteet: vektorigrafiikkamuodot (esim. Suorat ja käyrät koostuvat polut), kuvat ja teksti.
Se on ollut jo vuodesta 1999 lähtien ja 16.8.2011 alkaen siitä tuli W3C-suositus. Silti SVG on edelleen huomattavasti alikäytetty, kun taas Vectorin sijasta bittikartan avulla on paljon etuja palvelemaan graafista tai kuvaa verkkosivustolla.
SVG-edut
SVG: n grafiikkapalvelun aikana SVG tarjoaa muutamia etuja Bitmapiin verrattuna, joista osa sisältää:
Resoluutio Riippumaton
Bittikartta / rasterigrafiikka on resoluutiosta riippuvainen - se on rakennettu pikseleihin. Palvelun grafiikka näytettiin pikseloituna, kun sitä muutetaan tietyllä zoomaustasolla. Se ei tapahdu vektorigrafiikalla, joka on luonteeltaan itsenäinen resoluutio, koska graafinen ilmaisu on matemaattinen yhtälö, joka tekee siitä skaalattavissa missä tahansa zoomaustasossa säilyttäen laatu, jopa verkkokalvonäytössä.
HTTP-pyynnön vähentäminen
SVG voidaan upottaa suoraan HTML-dokumenttiin svg tunniste, joten selaimen ei tarvitse tehdä pyyntöä palvella grafiikkaa. Tämä johtaa myös parempaan latauksen suorituskykyyn sivustolla.
Styling ja komentosarjat
Upottaminen suoraan svg tunniste mahdollistaa myös graafisen tyylin CSS: n kautta. Me voimme muuta objektin ominaisuuksia kuten taustaväri, opasiteetti, reunukset jne. samalla tavalla kuin tavallisella HTML-tunnisteella. Samoin voimme myös käsitellä grafiikkaa JavaScriptin avulla.
Voidaan animoida ja muokata
SVG-objekti voidaan animoida, kun se käyttää animaatioelementtiä tai JavaScript-kirjastoa, kuten jQuery. SVG-objektia voidaan myös muokata missä tahansa tekstikoodieditorissa tai graafisessa ohjelmistossa, kuten Inkscape (joka on ilmainen) tai Adobe Illustrator.
Pienempi tiedostokoko
SVG: llä on pienempi tiedostokoko kuin Bitmap, jolla on samanlainen graafinen esitys.
Piirustusten tekeminen SVG: n avulla
Mukaan spec, voimme piirtää joitakin perusmuotoja kuten suorakulmio, ympyrä, viiva, ellipsi, monilinja ja monikulmio SVG: n avulla ja jotta selain voi tehdä SVG-grafiikan, kaikki nämä graafiset elementit on asetettava tag. Katsotaan alla olevia esimerkkejä saadaksesi lisätietoja:
Linja
Piirtää linja SVG: ssä voimme käyttää
Kuten edellä näet, linjan aloituspisteen koordinaatti ilmaistaan kahdella ensimmäisellä määritteellä x1 ja x2, kun linjan loppupisteen koordinaatti ilmaistaan y1 ja y2.
On myös kaksi muuta ominaisuutta tahti ja aivohalvauksen leveys joita käytetään rajavärin ja reunan leveyden määrittämiseen. Vaihtoehtoisesti voimme myös määritellä nämä määritteet inline-tyyliin, kuten:
se lopulta vain tekee saman.
- Näytä demo “Linja”
Moniviiva
Se on melkein samanlainen kuin
pistettä määritteet, jotka tallentavat kaikki linjat muodostavat koordinaatit.
- Näytä demo “Moniviiva”
Suorakulmio
Myös suorakulmion piirtäminen on yksinkertaista
- Näytä demo “Suorakulmio”
Ympyrä
Voimme myös piirtää ympyrän 100 säde, joka on määritelty R määrite:
Kaksi ensimmäistä ominaisuutta, CX ja CY määrittävät ympyrän keskikoordinaatin. Yllä olevassa esimerkissä olemme asettaneet 102 molemmat x ja y koordinaatti, jos näitä määritteitä ei ole määritetty, 0 otetaan oletusarvoksi.
- Näytä demo “Ympyrä”
Ellipsi
Voimme piirtää ellipsin x linjan säde ja y linjan säde rx ja ry ominaisuus;
- Näytä demo “Ellipsi”
Monikulmio
Kanssa
- Näytä demo “Monikulmio”
Vector Graphic Editorin käyttäminen
Kuten näette, yksinkertaisten objektien piirtäminen SVG: llä HTML: ssä on melko helppoa. Kuitenkin, kun esine muuttuu monimutkaisemmaksi, tämä käytäntö ei ole enää ihanteellinen ja antaa sinulle päänsärkyä.
Onneksi, kuten edellä mainitsimme, voimme käyttää vektorigrafiikkaa Adobe Illustrator tai Inkscape tehdä työtä. Jos olet perehtynyt näihin ohjelmistoihin, on varmasti paljon helpompi piirtää kohteita GUI: lla kuin koodata itse grafiikkaa HTML-tunnisteella.
Jos työskentelet Inkscapen kanssa, voit tallentaa vektorigrafiikan tavalliseksi SVG: ksi ja avata sen tekstikoodieditorissa. Nyt pitäisi löytää SVG-koodit tiedostosta. Kopioi kaikki koodit ja liitä ne HTML-asiakirjan sisään.
Voit myös upottaa .svg jokin näistä elementeistä; upottaa, iframe ja esine, esimerkiksi;
Tulokset ovat lopulta samat.
Tässä esimerkissä käytän tätä Apple iPodia OpenClipArt.orgista.
- Näytä demo “iPod”
Selaimen tuki
Selaintuen osalta SVG: tä on tuettu kaikilla tärkeimmillä selaimilla hyvin, paitsi IE8: ssa ja sitä aikaisemmin. Tämä asia voidaan kuitenkin ratkaista tällä JavaScript-kirjastolla nimeltä Raphael.js. Helpottaaksemme asioita, käytämme tätä työkalua, ReadySetRaphael.com: n muuntamalla SVG-koodimme Raphaelin tukemaan muotoon. Näin on.
Ensinnäkin, lataa ja sisältää Raphael.js kirjasto HTML-dokumenttiin. Lataa sitten .svg kopioi ja liitä luotu koodi seuraavan kuorman sisällä toimia;
window.onload = toiminto () // Raphaelin koodi menee täällä
Sisällä ruumis tag, laita seuraava div kanssa RSR id-määrite;
Se on se, olet valmis. Katso esimerkki alla olevasta linkistä.
- Näytä demo “Raphael”
Lopulliset ajatukset
Joten se on SVG: n perusasiat. Toivomme nyt, että ymmärrätte oikeudenmukaisesti tästä aiheesta. Se on paras tapa optimoida sivustosi millä tahansa näytön resoluutiolla, jopa käytettäväksi Retina-näytössä.
Kuten aina, jos olet seikkailunhaluinen henkilö, täällä olemme tehneet muutamia viitteitä ja keskustelua syvemmälle tähän aiheeseen.
- Johdatus SVG-W3-kouluihin
- Ratkaisu riippumaton SVG - Smashing Magazine -lehdestä
- Miksi et käytä SVG: tä? - NetTuts
Kiitos, että olet lukenut, ja toivomme, että nautit tästä postista.
- Näytä demo
- Lataa lähde
