Scalable Vector Graphics on väga võimas ja mugav failitüüp arvutigraafika jaoks. Erinevalt teistest rasteriseeritud failitüüpidest saab SVG-sid skaleerida ilma kvaliteedi kadumiseta. See muudab need ideaalseks teatud graafika, näiteks logode jaoks. SVG-de kasutamiseks oma veebisaidil peate need oma HTML-i manustama.
1
Graafika loomine vektoril põhineva graafikatarkvara abil sobib iga vektoril põhinev graafikatarkvara, kui see suudab dokumente SVGI-vormingus salvestada, on kasulik graafika kujundamisel sellises suuruses, nagu soovite selle lehel kuvada, hiljem saate aga CSS-i abil suurust dünaamiliselt muuta.
2
Korraldage oma graafika rühmi ja kihte. Graafilises redaktoris on väga kasulik hoida oma pilti hästi organiseeritud. See muudab edasised sammud palju lihtsamaks. Rühmitage Adobe Illustratoris teed kokku, hoides all klahvi Shift ja valides mitu teed. Seejärel paremklõpsake ja valige “rühm”. Näete oma uusi rühmi kihtide aknas.
3
Salvestage oma graafika SVG-vormingus. Iga vektoril põhinev graafikaredaktor peaks võimaldama teil graafikat salvestada SVG-vormingus. Illustraatoris valige faili vahekaardil “Salvesta nimega”. Valige dialoogiboksis ripploendist SVG, seejärel klõpsake nuppu Salvesta. Võib tekkida dialoogiboks “SVG suvandid”. SVG-failivormingul on mitu versiooni, üldiselt sobib versioon 1.1. Valige OK ja jätkake.
4
Avage oma SVG tekstitöötlustarkvaras. Paremklõpsake failiuurijas oma uut SVG-faili ja valige loendist “Ava koos”. Valige saadaolevate programmide hulgast mis tahes tekstiredaktor. Kui soovitud tekstiredaktorit loendis pole, peate võib-olla valima “Rohkem rakendusi” või “Vali muu rakendus”. Märkmik on hea, kuid võite avada oma SVG IDE-s, näiteks Visual Studios.
5
Kopeerige SVG-silt.Pärast avamist kasutage kursorit, et valida ainult märgendi
6
Kleepige SVG oma HTML-lehele.Avage oma HTML-leht tekstiredaktoris ja kleepige oma veebilehele viimasest sammust kopeeritud koodiplokk. SVG-märgend võib asuda teie HTML-i märgistuse kehaosas.
7
Kontrollige tulemusi veebibrauseris Avage oma veebileht brauseris ja teie graafika kuvatakse teie lehel, kuid see võib nõuda täiendavat stiili, et teie lehel graafikat õigesti vormindada.Kui teie graafika on juba õige suurusega ja kuvatakse teie kujul Kui soovite, võite pärast seda sammu lõpetada.
8
Andke oma SVG-le klassi atribuut. Kasulik on anda oma SVG-le stiiliks kirjeldav klass. Mõnel juhul võib klassiatribuut SVG-sildil juba olemas olla. Kui see nii on, lisage lihtsalt olemasolevale atribuudile klassid. nt
11
Kasutage CSS-i muutmiseks oma SVGSVG-d, mis koosnevad erinevatest siltidest, mis käituvad nagu teised HTML-i elemendid. Neile saab anda stiilimiseks stiili- ja klassiatribuudid.Teie svg-s olevate radade ja kujundite täidis, kriips, joone laius ja palju muid stiile saab redigeerida CSS-iga.Näiteks: .IceCream{ fill: blue; }
12
Vaadake tulemusi veebibrauseris. Kogu teie uus stiil peaks olema veebibrauseris nähtav. Korrake samme 10 ja 11, kuni graafikul on kogu soovitud stiil.