Svg verkossa. Johdatus skaalautuvaan vektorigrafiikkaan (SVG). !!! On tärkeää, että pisteiden määrä täsmää

Hei kaikki, rakkaat ilmaisen muuntamisen fanimme. Tänään työpöydällämme on mielenkiintoinen projekti, koodinimeltään Scalable Vector Graphics tai lyhyesti SVG. Miksi vieraalla kielellä? Jotta kukaan ei arvaisi.

Tutkimuksen suorittamiseen tarvitsemme materiaalia, mukaan lukien jonkinlaisen vapaasti vaihdettavan valuutan, mahdollisesti ruplaa.

Toiseksi tarvitsemme tietokonenäytön, sillä ei ole väliä, onko se työpöytä vai älypuhelin. Koska luet tätä tekstiä, se tarkoittaa, että sinulla on jo yksi resurssi. Ei jää muuta kuin vaivata joitain hyviä ihmisiä, jotka sattuvat olemaan lähellä ja lainata muutama tuhat ruplaa, tai pahimmillaan parisataa taalaa.

Kaikki tämä on ehdottoman välttämätöntä ymmärtääksemme selvästi, mikä SVG on ja minkä kanssa sitä on parasta käyttää.

Skaalautuva vektorigrafiikka

Aloitetaan ulkokuoresta, siirrytään sisäiseen sisältöön ja sitten, älkäämme pelätkö tätä sanaa - tunkeutukaamme tutkittavan ilmiön olemukseen.

Kuten olet ehkä kuullut, grafiikkaa on kahdenlaisia.

• Raster.
• Vektori.

Aloita ottamalla silmälasit pois ja siirtämällä silmäsi lähemmäksi välkkyvää tietokoneen näyttöä.

Mitä sinä näet?

Aivan oikein – kuva koostuu miljoonista värikkäistä pisteistä. Sitä se on rasteri. Siksi tämän tyyppistä grafiikkaa kutsutaan "rasteriksi".

Siirrytään kokeilun toiseen osaan. Usko minua, sinulla on paljon hauskempaa ja ehkä jopa seikkailuja.

Käytä muodikkaimpia vaatteitasi, soita ystävällesi tai tyttöystävällesi. Menemme yökerhoon. Minkä vuoksi? Opiskele vektorigrafiikkaa.

Kun vieraat ovat lämmenneet kunnolla baarissa ja tanssiminen tamburiinien kanssa alkaa tanssilattialla, DJ painaa pientä nappia ja pilvet läpikuultavaa glyseriinisavua täyttävät taivaan.

Kun savu sakeutuu tarpeeksi, DJ painaa toista painiketta. Laserase laukaistaan ​​ja jotain revontulien kaltaista alkaa tanssia tanssivan yleisön pään yli.

Tämä on vektorigrafiikkaa. Lasersäde on jatkuva ja piirtää kuvia tietokoneohjelmaan upotetun algoritmin - digitaalisen visuaalisen kuvan - mukaan.

Juuri näin SVG toimii - se on digitaalinen ohjelmistokuvaus graafisista kuvista, väreistä ja niiden käyttäytymisestä.

Ei turhaan valinnut esimerkiksi yökerhoa. Asia on siinä, että laser luo jatkuvia viivoja, mutta glyseriinisavulla on hajaantunut rasterirakenne. Toisin sanoen tämä keinotekoinen sumu koostuu pienistä ilmassa suspendoituneista nestepisaroista, joista heijastuu lasersäde niin, että silmämme verkkokalvoon muodostuu visuaalisia kuvia.

Tietokonenäytöillä jatkuvat vektorit muunnetaan monivärisiksi matriisipikseleiksi ja aivomme muodostavat algoritminsa mukaisesti käsityksen tasaisesta kuvasta.

Teknologiaratkaisu SVG

No, olemme selvittäneet ulkokuoren, siirrytään nyt ilmiön sisäiseen olemukseen. Voit sanoa - miksi tarvitsemme kaikkea tätä tiedettä, on parempi sanoa suoraan - miksi sitä tarvitaan, tämä SVG?

Ei kiirettä. Tosiasia on, että tekniikka määrittää kaikki ulkoiset vaikutukset. Kerrotaan nyt sinulle kauhea salaisuus. SVG on hypertekstikuvauskielen HTML:n veli, jonka avulla verkkosivut suunnitellaan kauniiksi ja dynaamiksi.

Aivan oikein, SVG-grafiikkatiedosto on XML-tekstitiedosto, joka on täytetty HTML:n kaltaisilla tunnisteilla ja XML:n avulla strukturoidulla tiedolla. On loogista olettaa, että SVG-grafiikka voidaan integroida suoraan verkkosivun HTML-koodiin, muotoilla CSS-tyylisivuilla ja jopa sisältää Javascript-ohjelmointikomentosarjat.

Anna mielikuvituksesi valloilleen (ehkä cappuccinoa, kiitos) ja yritä tarjota HTML5-tunnisteilla geneettisesti muunnetun vektorigrafiikan loputtomat mahdollisuudet.

1. Ensinnäkin vektorigrafiikka määritelmän mukaan skaalataan ilman kuvanlaadun heikkenemistä (koska siinä ei ole pikseleitä ja suurennettuna kuva ei muutu kubistisen taiteilijan maalaukseksi).
2. Toiseksi SVG on täysin yhteensopiva verkkoteknologioiden kanssa ja siitä tulee siksi orgaaninen osa verkkosivustoja.
3. Kolmanneksi lisäämällä objekteja kuvan digitaaliseen kuvaukseen ja yhdistämällä niihin Javascript-skriptejä, teemme kuvasta interaktiivisen eli reagoivan tiettyihin käyttäjän toimiin annetuilla vastauksilla.
4. Neljänneksi SVG on tekstimuoto, joten voit optimoida tiedoston hakukoneoptimointia varten ilman ulkoisia sisällönkuvauskenttiä syöttämällä avainsanoja suoraan kuvakoodiin.

Näiden teknisten eritelmien perusteella päätämme SVG:n laajuuden.

Kuinka voit käyttää SVG:tä eduksesi

Reilun markkinoinnin periaatteissa on myönnettävä, että SVG:llä on huonot puolensa. Kun kuvan yksityiskohdat lisääntyvät, tiedoston paino alkaa kasvaa lumivyöryn nopeudella.

Joten valitettavasti SVG ei sovellu täysin realistisiin korkearesoluutioisiin valokuviin ja yksityiskohtaisiin maastokarttoihin.

SVG-muoto on optimaalinen pienille, mutta skaalautuville ja interaktiivisille kuville.

• Navigointipalkit ja painikkeet animoiduilla tehosteilla.
• Logot, jotka eivät menetä kuvanlaatua suurennettaessa tai pienennettäessä.
• Kumin kaltaiset kuvat mukautuvat mihin tahansa tietokoneen näytön muotoon ja resoluutioon. SVG on välttämätön reagoiville mobiiliystävällisille sivustoille.

Hyödyllisin – SVG-grafiikka sopii parhaiten sähköiseen kaupankäyntiin.

Esimerkiksi kuva myytävästä tuotteesta julkaistaan ​​verkkokaupan verkkosivuilla. Käyttäjä voi napsauttaa yksittäisiä kuvan osia ja kaunis animaatio alkaa, joka muuttaa kuvan joksikin muuksi.

Tämän perusteella voit kehittää interaktiivisen arvion tuotteesta kaikilta puolilta ja jopa sisältä.

Tai lääketieteellisellä verkkosivustolla voit tehdä raskaustestin käyttämällä tällaista graafista ohjelmaa. Tai diagnostinen laajennus niille, jotka haluavat käydä läpi nopean analyysin ja selvittää, mihin he kuolevat nuorena.

Kun asiakas saa tietää kauhean salaisuuden kauheasta sairaudestaan, käsi itse kurottautuu ja napsauttaa hiirellä SVG-kuvan viereistä osaa punaisella painikkeella "Osta lääke kaikkiin sairauksiin". Yksi tabletti riittää. Hinta 1000 dollaria.

Mikä hyödyllinen keksintö tämä SVG on.

Menetelmät muuntamiseen SVG:ksi

Sivustollamme tarjoamme sinulle muunnoksen useilla eri tavoilla:

Onko mitään keinoa pienentää SVG:n kokoa?

Joo! Käytä erikoisohjelmia, kuten SVGO, tai verkkosivustollamme käyttämällä SVG-optimointitoimintoa.

Palvelumme perustuu avoimien komponenttien, erityisesti SVGO:n, käyttöön. Tällä SVG-optimoijalla voit pienentää SVG-kuvien kokoa poistamalla tarpeettomat tiedot, kuten:

• attribuuttien poistaminen uusilta riveiltä ja toistuvista objekteista;
• asiakirjatyypin kuvauksen poistaminen;
• XML-ohjeiden poistaminen;
• kommenttien poistaminen;
• poista metatiedot;
• ja muita tietoja.

Vektorigrafiikkaa käytetään laajasti painatuksessa. Mutta voimme käyttää sitä myös verkkosivustoille, jotka käyttävät SVG:tä ( Skaalautuva vektorigrafiikka - skaalautuva vektorigrafiikka). W3.org-määrityksen mukaan SVG määritellään seuraavasti:

Kieli kaksiulotteisen grafiikan kuvaamiseen XML:ssä. SVG sallii kolmen tyyppiset objektit: vektorigrafiikka (kuten suorista viivoista ja kaarevista tehdyt polut), kuvat ja teksti.

Huolimatta siitä, että SVG on sisällytetty W3C-suosituksiin elokuusta 2011 lähtien, tätä tekniikkaa ei käytännössä käytetä verkkoprojekteissa, vaikka sillä on useita etuja rasterikuviin verrattuna. Tässä oppituntisarjassa esittelemme kuinka työskennellä SVG-elementtien kanssa verkkosivuilla.

SVG:n edut

Päätöslauselman riippumattomuus

Rasterikuvat ovat resoluutiokohtaisia. Grafiikka saa esittämättömän ulkonäön, kun kokoa muutetaan tiettyyn mittakaavaan. Vektorigrafiikassa tämä tilanne on periaatteessa mahdoton, koska kaikki esitetään matemaattisilla lausekkeilla, jotka lasketaan automaattisesti uudelleen, kun asteikkoa muutetaan, ja laatu säilyy kaikissa olosuhteissa.

HTTP-pyyntöjen määrän vähentäminen

SVG voidaan upottaa suoraan HTML-dokumenttiin svg-tunnisteen avulla, joten selaimen ei tarvitse tehdä mitään pyyntöjä näyttääkseen grafiikkaa. Tällä lähestymistavalla on hyvä vaikutus sivuston latausominaisuuksiin.

Tyylit ja käsikirjoitukset

Svg-tunnisteen upottaminen tekee myös grafiikan tyylistämisen helpoksi CSS:n avulla. Voit muuttaa kohteen ominaisuuksia, kuten taustaväriä, läpinäkyvyyttä, reunoja ja niin edelleen. Samalla tavalla voit käsitellä grafiikkaa JavaScriptin avulla.

Helppo muokata ja animoida

SVG-objekteja voidaan animoida CSS:n tai JavaScriptin avulla. SVG-objekteja voidaan muokata myös tekstieditorilla.

Pienempi tiedostokoko

SVG:llä on pienempi tiedostokoko verrattuna rasterigrafiikkaan.

SVG-perusmuodot

Erittelyn mukaan voimme piirtää useita perusmuotoja: viiva, polyline, suorakulmio, ympyrä, ellipsi. Kaikki elementit on lisättävä tunnisteeseen . Katsotaanpa peruselementtejä yksityiskohtaisesti.

Linja

Jos haluat näyttää rivin SVG:ssä, käytä elementtiä . Hän piirtää janan, jolle on määritettävä kaksi pistettä: alku ja loppu.

Janan alun määrittävät attribuutit x1 ja y1 ja loppupisteen koordinaatit attribuuteissa x2 ja y2.

On myös kaksi muuta attribuuttia (viiva ja viivan leveys), joita käytetään määrittämään viivan väri ja leveys.

Tämä objekti on samanlainen kuin , mutta käyttämällä elementtiä Voit piirtää useita viivoja kerralla.

Elementti Sisältää point-attribuutin, jota käytetään pisteiden koordinaattien määrittämiseen.

Suorakulmio piirretään elementin avulla . Sinun on määritettävä leveys ja korkeus.

Ympyrän näyttämiseen käytämme elementtiä . Seuraavassa esimerkissä luomme ympyrän, jonka säde on 100 ja joka määritellään attribuutissa r:

Kaksi ensimmäistä attribuuttia cx ja cy määrittävät keskipisteen koordinaatit. Yllä olevassa esimerkissä asetimme arvoksi 102 molemmille koordinaateille. Oletusarvo on 0.

Ellipsin näyttämiseen käytämme elementtiä . Se toimii samalla tavalla kuin ympyrä, mutta voimme erityisesti määrittää x- ja y-säteet rx- ja ry-attribuuttien avulla:

Elementti Näyttää monitahoisia muotoja, kuten kolmion, kuusikulmion jne. Esimerkiksi:

Vektorigrafiikkaeditorin käyttö

Yksinkertaisten SVG-objektien tulostaminen HTML:ään on helppoa. Kohteen monimutkaisuuden kasvaessa tämä käytäntö voi kuitenkin johtaa suureen työmäärään.

Mutta voit käyttää mitä tahansa vektorigrafiikkaeditoria (esim. Adobe Illustrator tai Inkscape) luodaksesi kohteita. Jos sinulla on tällainen työkalu, tarvittavien objektien piirtäminen niihin on paljon helpompaa kuin grafiikan koodaaminen HTML-tunnisteeseen.

Voit kopioida vektorigrafiikkakäskyjä tiedostosta HTML-dokumenttiin. Tai voit upottaa .svg-tiedoston jollakin seuraavista elementeistä: embed , iframe ja object .

Tulos on sama.

Selaimen tuki

SVG:llä on hyvä tuki useimmissa nykyaikaisissa selaimissa, lukuun ottamatta IE-versiota 8 ja sitä vanhempia. Mutta ongelma voidaan ratkaista JavaScript-kirjaston avulla. Asioiden helpottamiseksi voit muuntaa SVG-koodin Raphael-muotoon ReadySetRaphael.com-työkalun avulla.

Ensin lataamme ja sisällytämme kirjaston HTML-dokumenttiin. Sitten lataamme .svg-tiedoston, kopioimme ja liitämme tuloksena olevan koodin funktioon lataamisen jälkeen:

Sijoitamme body-tunnisteeseen seuraavan div-elementin tunnisteella rsr .

Ja kaikki on valmista.

Sarjan seuraavassa opetusohjelmassa tarkastellaan SVG-objektien tyyliä CSS:ssä.

Tämä viesti on ensimmäinen SVG:tä (Scalable Vector Graphic) käsittelevässä artikkelisarjassa, joka kattaa sivuston vektorigrafiikan perusteet.

Vektorigrafiikkaa käytetään laajasti painatuksessa. Verkkosivustoille on olemassa SVG, joka w3.org:n virallisten määritelmien mukaan on kieli kaksiulotteisen grafiikan kuvaamiseen XML:ssä. SVG sisältää kolmentyyppisiä objekteja: muotoja, kuvia ja tekstiä. SVG on ollut käytössä vuodesta 1999, ja 16. elokuuta 2011 lähtien se on sisällytetty W3C:n suosituksiin. Verkkokehittäjät aliarvioivat SVG:tä, vaikka sillä on useita tärkeitä etuja.

SVG:n edut

• Skaalaus: Toisin kuin rasterigrafiikka, SVG ei menetä laatua skaalattaessa, joten sitä on kätevä käyttää verkkokalvon kehittämiseen.
• HTTP-pyyntöjen vähentäminen: SVG:tä käytettäessä palvelimelle tulevien puheluiden määrä vähenee ja sivuston latausnopeus kasvaa vastaavasti.
• Tyyli ja komentosarjat: CSS:n avulla voit muuttaa sivuston grafiikkaasetuksia, kuten taustaa, läpinäkyvyyttä tai reunoja.
• Animaatio ja editointi: javascriptillä voit animoida SVG:tä sekä muokata sitä teksti- tai grafiikkaeditorissa (InkScape tai Adobe Illustrator).
• Pieni koko: SVG-objektit painavat paljon vähemmän kuin rasterikuvat.

SVG-perusmuodot

Virallisten määritelmien mukaan voit piirtää yksinkertaisia ​​objekteja SVG:llä: suorakulmio, ympyrä, viiva, ellipsi, polyline tai monikulmio tagilla svg.

Yksinkertainen rivi tagilla linja vain kahdella parametrilla - aloituspisteet (x1 ja x2) ja loppupisteet (y1 ja y2):

Voit myös lisätä viivan ja viivan leveyden määritteitä tai tyylejä määrittääksesi värin ja leveyden:

Style="stroke-width:1; stroke:rgb(0,0,0);"

rikkinäinen linja

Syntaksi on samanlainen kuin edellinen, tunnistetta käytetään polyline, attribuutti pisteitä asettaa pisteet:

Suorakulmio

Suora tagi kutsuu, voit lisätä joitain määritteitä:

Ympyrä

Kutsuttu tagilla ympyrä, esimerkissä käyttämällä attribuuttia r aseta säde, cx Ja cy määritä keskuksen koordinaatit:

Ellipsi

Kutsuttu tagilla ellipsi, toimii samalla tavalla ympyrä, mutta voit määrittää kaksi sädettä - rx Ja ry:

Monikulmio

Kutsuttu tagilla monikulmio, monikulmiolla voi olla erilainen määrä sivuja:

Editoijien käyttö

Kuten esimerkeistä näet, SVG-perusmuotojen piirtäminen on hyvin yksinkertaista, mutta objektit voivat olla paljon monimutkaisempia. Näitä varten sinun on käytettävä vektorigrafiikkaeditoria, kuten Adobe Illustratoria tai Inkscapea, joissa voit tallentaa tiedostoja SVG-muodossa ja muokata niitä sitten tekstieditorissa. Voit lisätä SVG:n sivulle upotuksen, iframen ja objektin avulla:

Esimerkki on kuva iPodista OpenClipArt.org:sta.

Hyvää Voitonpäivää kaikille! Ja tänään kirjoitan ensimmäistä artikkelia sarjassa, josta saamme selville mikä on SVG ja miten sitä käytetään.

SVG (skaalautuva vektorigrafiikka) on kieli kaksiulotteisen grafiikan kuvaamiseen perustuen XML. Tämä tekniikka on vähitellen saamassa vauhtia, ja tämä johtuu tästä:

• Kun muutat svg-muotojen kokoa, muodot piirretään aina uudelleen, joten näet aina tasaisen ja kauniin kuvan ilman pikselointia
• Selaimen ei tarvitse pyytää kuvaa palvelimelta, koska hän piirtää sen itse, joten tuottavuus kasvaa
• Voit muotoilla objekteja CSS:n avulla, kuten tavallisten HTML-elementtien tai JavaScriptin avulla
• Voidaan muokata tai animoida CSS:n ja JavaScriptin avulla
• Pienempi koko

Joten luulen, että ymmärrät jo, miksi sitä tarvitaan ja miksi se on parempi kuin tavallinen kuva, ja nyt siirrytään sen käyttöön.

Aluksi on syytä huomata, että kaikkien lukujemme on oltava tagissa svg, nyt piirretään linja. Tunnistetta käytetään rivin näyttämiseen linja, jolla on seuraavat attribuutit:

• x1- Aloita x koordinaatti
• x2- Loppu x koordinaatti
• y1- Aloita y-koordinaatti
• y2- Loppuy-koordinaatti
• iskun leveys- Viivan leveys
• aivohalvaus- Viivan väri

Mutta entä jos meidän on piirrettävä heti useita rivejä? Käytä useita tunnisteita linja se ei olisi kovin mukavaa. Tätä varten on tagi polyline.

Tagilla polyline on attribuutti pisteitä, jossa ilmoitamme koordinaatit x Ja y pilkulla erotettuna, tee sitten välilyönti ja kirjoita seuraavan pisteen koordinaatit ja niin edelleen. Huomaa, että tässä on attribuutti täyttää, jossa voimme määrittää värin missä tahansa muodossa css, joka täyttää rivien välisen tilan. Jos haluat rivien välisen tilan olevan tyhjä, määritä arvo ei mitään.

Siirrytään monimutkaisempiin muotoihin ja piirretään suorakulmio.

Suorakulmion piirtämiseksi sinun on käytettävä tunnistetta rect, missä määritteissä leveys Ja korkeus osoittaa leveys Ja korkeus vastaavasti, ja loput attribuutit ovat jo sinulle tuttuja ja suorittavat täysin samat toiminnot kuin viivojen kanssa.

Piirrä ympyrä käyttämällä tunnistetta ympyrä ja attribuutit cx, cy Ja r asettaaksesi koordinaatit ympyrän keskipiste ja häntä säde.

Toinen elementti - ellipsi piirretään täsmälleen samalla tavalla kuin ympyrä, mutta siellä voimme itse asettaa säteet akselille x ja akselia pitkin y. Tunnistetta käytetään sen hahmontamiseen ellipsi

Jos sinun on peruutettava monitahoisia hahmoja, kuten viisikulmio, käytä sitten -tunnistetta monikulmio

Attribuutti pisteitä-merkin kohdalla monikulmio toimii samalla tavalla kuin attribuutti pisteitä-merkin kohdalla polyline.

Jos objekti on erittäin monimutkainen, voit käyttää mitä tahansa vektorigrafiikkaeditoria ja piirtää sen sinne ja sitten lisätä sen näin

SVG tuettu I.E. c 9 versiot, Mozilla Firefox Kanssa 1.5 , Google Chrome Kanssa 3.0 Ja ooppera Kanssa 8.0 .

Tämä päättää artikkelin. Siitä tuli iso, mutta yksinkertainen. Seuraavassa jatkamme tämän mielenkiintoisen tekniikan tutkimista, mutta siinä kaikki. Onnea!

Tämä viesti on ensimmäinen SVG-grafiikkaa (Scalable Vector Graphic) käsittelevässä artikkelisarjassa, joka kattaa sivuston vektorigrafiikan perusteet.

Vektorigrafiikkaa käytetään laajasti painatuksessa. Verkkosivustoille on olemassa SVG, joka on w3.org:n virallisten määritelmien mukaan kieli kaksiulotteisen grafiikan kuvaamiseen XML:ssä. SVG sisältää kolmentyyppisiä objekteja: muotoja, kuvia ja tekstiä. SVG on ollut käytössä vuodesta 1999, ja se on sisällytetty suosituksiin 16. elokuuta 2011 lähtien W3C. Verkkokehittäjät aliarvioivat SVG:tä, vaikka sillä on useita tärkeitä etuja.

SVG:n edut

• Skaalaus: Toisin kuin rasterigrafiikka, SVG ei menetä laatua skaalattaessa, joten sitä on kätevä käyttää verkkokalvon kehittämiseen.
• HTTP-pyyntöjen vähentäminen: SVG:tä käytettäessä palvelimelle tulevien puheluiden määrä vähenee ja sivuston latausnopeus kasvaa vastaavasti.
• Tyyli ja komentosarjat: CSS:n avulla voit muuttaa sivuston grafiikkaasetuksia, kuten taustaa, läpinäkyvyyttä tai reunoja.
• Animaatio ja editointi: javascriptillä voit animoida SVG:tä sekä muokata sitä teksti- tai grafiikkaeditorissa (InkScape tai Adobe Illustrator).
• Pieni koko: SVG-objektit painavat paljon vähemmän kuin rasterikuvat.

SVG-perusmuodot

Virallisen määrityksen mukaan voit piirtää yksinkertaisia ​​objekteja SVG:llä: suorakulmio, ympyrä, viiva, ellipsi, polyline tai monikulmio tagilla svg.

Yksinkertainen rivi tagilla linja vain kahdella parametrilla - aloituspisteet (x1 ja x2) ja loppupisteet (y1 ja y2):

Voit myös lisätä viivan ja viivan leveyden määritteitä tai tyylejä määrittääksesi värin ja leveyden:

Style="stroke-width:1; stroke:rgb(0,0,0);"

rikkinäinen linja

Syntaksi on samanlainen kuin edellinen, tunnistetta käytetään polyline, attribuutti pisteitä asettaa pisteet:

Suorakulmio

Rect-tunnisteen kutsuma, voit lisätä joitain määritteitä:

Ympyrä

Kutsuttu tagilla ympyrä, esimerkissä käyttämällä attribuuttia r aseta säde, cx Ja cy määritä keskuksen koordinaatit:

Ellipsi

Kutsuttu tagilla ellipsi, toimii samalla tavalla ympyrä, mutta voit määrittää kaksi sädettä - rx Ja ry:

Monikulmio

Kutsuttu tagilla monikulmio, monikulmiolla voi olla erilainen määrä sivuja:

Editoijien käyttö

Kuten esimerkeistä näet, SVG-perusmuotojen piirtäminen on hyvin yksinkertaista, mutta objektit voivat olla paljon monimutkaisempia. Näitä varten sinun on käytettävä vektorigrafiikkaeditoria, kuten Adobe Illustratoria tai Inkscapea, joissa voit tallentaa tiedostoja SVG-muodossa ja muokata niitä sitten tekstieditorissa. Voit lisätä SVG:n sivulle käyttämällä upotusta, iframe-kehystä ja objektia:

Esimerkki on kuva iPodista OpenClipArt.org:sta:

Selaimen tuki

SVG:tä tukevat lähes kaikki nykyaikaiset selaimet paitsi Internet Explorer 8 ja sitä vanhemmat. Mutta tämä voidaan myös korjata käyttämällä javascript-kirjastoa Raphael.js. Voit muuntaa SVG-tiedoston tähän kirjastomuotoon osoitteessa ReadySetRaphael.com.

Ensin sinun on yhdistettävä Raphael.js-kirjasto halutulle sivulle, lataa sitten SVG-tiedosto, kopioi ja liitä luotu koodi toimintoon:

Window.onload=function() ( //lisää Raphael-koodi tähän)

Lisää sivulle div attribuutilla rsr.