Ievads mērogojamā vektorgrafikā (SVG). Kas ir SVG: pārklājumu izmantošanas plusi un mīnusi un kā tos zīmēt

Bet ja nu uzreiz vajag zīmēt vairākas rindas? Izmantojiet vairākus tagus līniju tas nebūtu ļoti jauki. Tam ir atzīme polilīnija.

Pie birkas polilīnija ir atribūts punktus, kur mēs norādām koordinātas x Un y atdalot ar komatu, pēc tam izveidojiet atstarpi un ierakstiet nākamā punkta koordinātas un tā tālāk. Ņemiet vērā, ka šeit ir atribūts aizpildīt, kurā varam norādīt krāsu jebkurā no formātiem css, kas aizpildīs atstarpi starp rindām. Ja vēlaties, lai atstarpe starp rindām būtu tukša, norādiet vērtību neviens.

Pāriesim pie sarežģītākām formām un zīmēsim taisnstūris.

Lai uzzīmētu taisnstūri, jāizmanto tags taisn, kur atribūtos platums Un augstums norādīt platums Un augstums attiecīgi, un pārējie atribūti jums jau ir pazīstami un veic absolūti tādas pašas funkcijas kā ar līnijām.

Lai uzzīmētu apli, izmantojiet tagu aplis un atribūti cx, cy Un r lai iestatītu koordinātas apļa centrs un viņu rādiuss.

Vēl viens elements - elipse ir uzzīmēts tieši tāpat kā aplis, bet tur mēs paši varam iestatīt rādiusus pa asi x un pa asi y. Tags tiek izmantots, lai to atveidotu elipse

Ja jums ir nepieciešams atsaukt daudzskaldņu figūras, piemēram, piecstūris, pēc tam izmantojiet tagu daudzstūris

Atribūts punktus pie birkas daudzstūris darbojas tāpat kā atribūts punktus pie birkas polilīnija.

Ja objekts ir ļoti sarežģīts, varat izmantot jebkuru vektorgrafikas redaktoru un uzzīmēt to tur, un pēc tam vienkārši ievietot to šādi

SVG atbalstīts I.E. c 9 versijas, Mozilla Firefox Ar 1.5 , Google Chrome Ar 3.0 Un opera Ar 8.0 .

Tas noslēdz rakstu. Tas izrādījās liels, bet vienkāršs. Nākamajā mēs turpināsim pētīt šo interesanto tehnoloģiju, bet tas arī viss. Veiksmi!

Sveiki visiem, mūsu dārgie bezmaksas konvertēšanas cienītāji. Šodien mūsu darbvirsmā ir interesants projekts ar koda nosaukumu Scalable Vector Graphics vai saīsināti SVG. Kāpēc svešvalodā? Lai neviens neuzminētu.

Lai veiktu pētījumu, mums būs nepieciešami materiālie resursi, tajā skaitā kaut kāda brīvi konvertējama valūta, iespējams, rubļi.

Otrkārt, mums ir nepieciešams datora monitors, nav svarīgi, vai tas ir galddators vai viedtālrunis. Tā kā jūs lasāt šo tekstu, tas nozīmē, ka jums jau ir viens resurss. Atliek vien apgrūtināt dažus labus cilvēkus, kas pagadās tuvumā, un aizņemties dažus tūkstošus rubļu vai sliktākajā gadījumā pāris simtus.

Tas viss ir absolūti nepieciešams, lai mēs skaidri saprastu, kas ir SVG un ar ko to vislabāk izmantot.

Mērogojama vektorgrafika

Sāksim no ārējās čaulas, pāriesim pie iekšējā satura un tad, nebaidīsimies no šī vārda – iedziļināsimies pētāmā fenomena pašā būtībā.

Kā jūs, iespējams, dzirdējāt, ir divu veidu grafikas.

• Rastrs.
• Vektors.

Sāciet ar brilles noņemšanu un pievelciet acis tuvāk mirgojošajam datora monitoram.

Ko tu redzi?

Tieši tā – attēlu veido miljoniem daudzkrāsainu punktu. Tā tas ir rastra. Tāpēc šāda veida grafiku sauc par "rastru".

Pārejam uz eksperimenta otro daļu. Ticiet man, jums būs daudz jautrāk un, iespējams, pat atradīsit kādus piedzīvojumus.

Valkājiet savu modernāko apģērbu, piezvaniet savam draugam vai draudzenei. Mēs ejam uz naktsklubu. Par ko? Mācīties vektorgrafiku.

Kad viesi bārā ir kārtīgi iesildījušies un uz deju grīdas sākas dejas ar tamburīniem, dīdžejs nospiež mazu podziņu un debesis piepilda caurspīdīgu glicerīna dūmu mākoņi.

Kad dūmi pietiekami sabiezē, dīdžejs nospiež citu pogu. Tiek palaists lāzera lielgabals, un pār dejojošā pūļa galvām sāk dejot kaut kas līdzīgs ziemeļblāzmai.

Šī ir vektorgrafika. Lāzera stars ir nepārtraukts un zīmē attēlus pēc datorprogrammā iestrādātā algoritma - digitālā vizuālā attēla.

Tieši tā darbojas SVG – tas ir grafisku attēlu, krāsu un to uzvedības digitāls programmatūras apraksts.

Ne velti par piemēru izvēlējāmies naktsklubu. Lieta tāda, ka lāzers rada nepārtrauktas līnijas, bet glicerīna dūmiem ir izkliedēta rastra tekstūra. Tas ir, šī mākslīgā migla sastāv no sīkiem gaisā suspendētiem šķidruma pilieniem, no kuriem atstarojas lāzera stars, lai mūsu acu tīklenē veidojas vizuāli attēli.

Datoru ekrānos nepārtraukti vektori tiek pārvērsti daudzkrāsu matricas pikseļos, un mūsu smadzenes saskaņā ar tā algoritmu veido vienmērīga attēla uztveri.

Tehnoloģiju risinājums SVG

Nu, mēs esam sakārtojuši ārējo apvalku, tagad pāriesim pie parādības iekšējās būtības. Jūs varat teikt - kāpēc mums ir vajadzīga visa šī zinātne, labāk pateikt tieši - kāpēc tas ir vajadzīgs, šis SVG?

Nesteidzies. Fakts ir tāds, ka tā ir tehnoloģija, kas nosaka visus ārējos efektus. Tagad pateiksim jums šausmīgu noslēpumu. SVG ir hiperteksta iezīmēšanas valodas HTML brālis, ko izmanto skaistu un dinamisku vietņu izveidošanai.

Tieši tā, SVG grafikas fails ir XML teksta fails, kas piepildīts ar HTML līdzīgiem tagiem un XML strukturētiem datiem. Ir loģiski pieņemt, ka SVG grafiku var integrēt tieši tīmekļa lapas HTML kodā, formatēt, izmantojot CSS stila lapas, un pat iekļaut Javascript programmēšanas skriptus.

Vienkārši ļaujiet vaļu savai iztēlei (varbūt kapučīno, lūdzu) un mēģiniet nodrošināt bezgalīgas vektorgrafikas iespējas, kas ģenētiski modificētas ar HTML5 tagiem.

1. Pirmkārt, vektorgrafika pēc definīcijas tiek mērogota, nezaudējot attēla kvalitāti (jo nav pikseļu un, palielinoties, attēls nepārvērsīsies par kubista mākslinieka gleznu).
2. Otrkārt, SVG ir pilnībā savietojams ar tīmekļa tehnoloģijām un tāpēc kļūst par vietņu organisku sastāvdaļu.
3. Treškārt, attēla digitālajam aprakstam pievienojot objektus un pievienojot tiem Javascript skriptus, mēs padarām attēlu interaktīvu, tas ir, reaģējošu uz noteiktām lietotāja darbībām ar dotām atbildēm.
4. Ceturtkārt, SVG ir teksta formāts, tāpēc jūs varat optimizēt failu SEO bez ārējiem metatagiem, tieši ievadot atslēgvārdus attēla kodā.

Pamatojoties uz šīm tehniskajām specifikācijām, mēs secināsim SVG darbības jomu.

Kā jūs varat izmantot SVG savā labā

Godīga mārketinga principos jāatzīst, ka SVG tomēr ir savi trūkumi. Palielinoties attēla detaļām, faila svars sāk pieaugt lavīnas ātrumā.

Tāpēc diemžēl SVG ir pilnīgi nepiemērots reālistiskām augstas izšķirtspējas fotogrāfijām un detalizētām reljefa kartēm.

SVG formāts ir optimāls maziem, bet mērogojamiem un interaktīviem attēliem.

• Navigācijas joslas un pogas ar animētiem efektiem.
• Logotipi, kas nezaudē attēla kvalitāti, palielinot vai samazinot.
• Attēli, kas ir kā gumija, pielāgojas jebkuram datora ekrāna formātam un izšķirtspējai. SVG ir neaizstājams adaptīvām mobilajām ierīcēm piemērotām vietnēm.

Visnoderīgākais – SVG grafika ir vislabāk piemērota e-komercijai.

Piemēram, pārdodamās preces attēls tiek ievietots interneta veikala vietnē. Lietotājs var noklikšķināt uz atsevišķām attēla daļām un sākas skaista animācija, pārvēršot attēlu par kaut ko citu.

Pamatojoties uz to, jūs varat izveidot interaktīvu produkta pārskatu no visām pusēm un pat no iekšpuses.

Vai arī medicīnas vietnē, izmantojot šādu grafisku programmu, varat veikt grūtniecības testu. Vai arī diagnostikas spraudnis tiem, kuri vēlas veikt ātru analīzi un uzzināt, ko viņi nomirs.

Pēc tam, kad klients uzzina briesmīgo noslēpumu par savu briesmīgo slimību, pati roka sniedzas, lai noklikšķinātu uz blakus esošās SVG attēla sadaļas ar sarkano pogu “Pirkt zāles pret visām slimībām”. Pietiek ar vienu tableti. Cena $1000.

Cik noderīgs izgudrojums ir šis SVG.

Metodes konvertēšanai uz SVG

Mūsu vietnē mēs piedāvājam jums konvertēšanu, izmantojot dažādas metodes:

Vai ir kāds veids, kā samazināt SVG izmēru?

Jā! Izmantojot īpašas programmas, piemēram, SVGO, vai mūsu vietnē, izmantojot SVG optimizācijas funkciju.

Mūsu pakalpojums ir balstīts uz atvērtu komponentu izmantošanu, jo īpaši SVGO. Izmantojot šo SVG optimizētāju, varat samazināt SVG attēlu izmēru, noņemot nevajadzīgu informāciju, piemēram:

• atribūtu notīrīšana no jaunām rindām un atkārtotiem objektiem;
• dokumenta tipa apraksta dzēšana;
• XML instrukciju noņemšana;
• komentāru dzēšana;
• noņemt metadatus;
• un citas informācijas daļas.

Šī ziņa ir pirmā rakstu sērijā par SVG (Scalable Vector Graphic) grafiku, kas aptver vektorgrafikas pamatus vietnē.

Vektorgrafiku plaši izmanto drukāšanā. Vietnēm ir SVG, kas saskaņā ar oficiālo specifikāciju vietnē w3.org ir valoda divdimensiju grafikas aprakstīšanai XML formātā. SVG ietver trīs veidu objektus: formas, attēlus un tekstu. SVG ir pieejams kopš 1999. gada, un tas ir iekļauts ieteikumos kopš 2011. gada 16. augusta W3C. Tīmekļa izstrādātāji ļoti nenovērtē SVG, lai gan tam ir vairākas svarīgas priekšrocības.

SVG priekšrocības

• Mērogošana: atšķirībā no rastra grafikas, SVG nezaudē kvalitāti, veicot mērogošanu, tāpēc to ir ērti izmantot tīklenes attīstībai.
• HTTP pieprasījumu samazināšana: izmantojot SVG, tiek samazināts zvanu skaits uz serveri un attiecīgi palielinās vietnes ielādes ātrums.
• Stils un skripti: izmantojot CSS, varat mainīt vietnes grafikas iestatījumus, piemēram, fonu, caurspīdīgumu vai apmales.
• Animācija un rediģēšana: izmantojot javascript, varat animēt SVG, kā arī rediģēt to teksta vai grafikas redaktorā (InkScape vai Adobe Illustrator).
• Mazs izmērs: SVG objekti sver daudz mazāk nekā rastra attēli.

Pamata SVG formas

Saskaņā ar oficiālo specifikāciju, izmantojot tagu, jūs varat zīmēt vienkāršus objektus, izmantojot SVG: taisnstūri, apli, līniju, elipsi, polilīniju vai daudzstūri. svg.

Vienkārša līnija, izmantojot tagu līniju tikai ar diviem parametriem - sākuma punktiem (x1 un x2) un beigu punktiem (y1 un y2):

Lai iestatītu krāsu un platumu, varat pievienot arī gājiena un gājiena platuma atribūtus vai stilus.

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

lauzta līnija

Sintakse ir līdzīga iepriekšējai, tiek izmantots tags polilīnija, atribūts punktus nosaka punktus:

Taisnstūris

Varat pievienot dažus atribūtus, ko sauc par taisno tagu.

Aplis

Zvana pēc birkas aplis, piemērā izmantojot atribūtu r iestatīt rādiusu, cx Un cy norādiet centra koordinātas:

Elipse

Zvana pēc birkas elipse, darbojas līdzīgi aplis, bet jūs varat norādīt divus rādiusus - rx Un ry:

Daudzstūris

Zvana pēc birkas daudzstūris, daudzstūrim var būt atšķirīgs malu skaits:

Izmantojot redaktorus

Kā redzat no piemēriem, pamata SVG formu zīmēšana ir ļoti vienkārša, taču objekti var būt daudz sarežģītāki. Šim nolūkam ir jāizmanto vektorgrafikas redaktori, piemēram, Adobe Illustrator vai Inkscape, kur varat saglabāt failus SVG formātā un pēc tam rediģēt tos teksta redaktorā. Varat ievietot SVG lapā, izmantojot iegulšanu, iframe un objektu:

Piemērs ir iPod attēls no OpenClipArt.org:

Pārlūka atbalsts

SVG atbalsta gandrīz visas mūsdienu pārlūkprogrammas, izņemot Internet Explorer 8 un jaunākas versijas. Taču to var arī novērst, izmantojot javascript bibliotēku Raphael.js. Varat konvertēt SVG failu šajā bibliotēkas formātā vietnē ReadySetRaphael.com.

Vispirms jums ir jāsavieno Raphael.js bibliotēka ar vēlamo lapu, pēc tam lejupielādējiet SVG failu, kopējiet un ielīmējiet ģenerēto kodu funkcijā:

Window.onload=function() ( //ievietot Rafaela kodu šeit)

Ievietot lapā div ar atribūtu rsr.

SVG sagatavošana lietošanai tīmeklī ir ļoti vienkāršs process, kas nav sarežģītāks par JPEG vai PNG eksportēšanu. Izmantojiet jebkuru jums pazīstamo grafikas redaktoru (Illustrator, Sketch, Inkscape [bezmaksas] utt. [vai pat Photoshop, ja izmantojat formas slāņus]) attēla izmērā, ko plānojat izmantot. Es parasti strādāju programmā Illustrator, tāpēc es paskaidrošu dažus veidus, kā šajā programmā sagatavot failus, taču tie parasti attiecas uz jebkuru programmu. Iespējams, vēlēsities pārvērst tekstu līknēs, jo fonts, visticamāk, tiks renderēts nepareizi, ja vien neplānojat veidot to stilu ar lapā izmantoto tīmekļa fontu (kas ir iespējams!). Tāpat nav ieteicams pārveidot visus objektus atsevišķās formās, it īpaši, ja lapā ir jārīkojas ar triepieniem, jo ​​īpaši tāpēc, ka objektu konvertēšana bieži nesamazina faila lielumu. Visi grupām vai slāņiem piešķirtie nosaukumi tiks pievienoti SVG kā elementa ID. Tas ir diezgan ērti veidošanai, taču tas nedaudz palielinās kopējo faila lielumu.

Pirms eksportēšanas jums jāpārbauda, ​​vai visi attēli ir veselu skaitļu pikseļu režģī (tas ir, piemēram, nav 23,3 pikseļi × 86,8 pikseļi). Pretējā gadījumā, visticamāk, attēlam nebūs pietiekami daudz skaidrības un daļa attēla tiks nogriezta. Programmā Illustrator to var izdarīt šādi: Object > Artboards > Fit to Artwork Bounds. Pēc tam noklikšķiniet uz Saglabāt kā un atlasiet SVG un atstājiet noklusējuma iestatījumus. Šeit mēs varam veikt nelielu optimizāciju, taču tas tiešām nav tā vērts, jo vēlāk izmantosim dažādas uzlabošanas metodes, tāpēc pagaidām netērēsim laiku šiem uzlabojumiem.

Failu lieluma samazināšanas triki.

(Skatīt optimizāciju)

Lai sasniegtu mazāko SVG izmēru, būtu loģiski noņemt no tā visu nevajadzīgo. Slavenākā un noderīgākā programma (vismaz es tā domāju) SVG apstrādei ir SVGO. Tas noņem visu nevajadzīgo kodu. Bet! Esiet piesardzīgs, lietojot šo programmu, ja plānojat manipulēt ar SVG ar CSS/JS, jo tas var pārāk daudz notīrīt kodu, apgrūtinot turpmākās izmaiņas. SVGO ir ērts arī ar to, ka to var iekļaut automātiskā projekta veidošanas procesā, bet var arī izmantot GUI Ja tu vēlies.

Sīkāk sapratuši visa nevajadzīgā pareizu noņemšanu, grafiskajā redaktorā varam darīt ko citu. Vispirms jums jāpārliecinās, ka izmantojat pēc iespējas mazāk ceļu/formu, kā arī punktus uz šiem ceļiem. Jūs varat apvienot un vienkāršot visu, ko var vienkāršot, un noņemt visus nevajadzīgos punktus. Illustrator ir VectorScribe spraudnis ar Smart Remove Brush Tool rīku, kas palīdzēs noņemt punktus, vienlaikus saglabājot nemainīgu kopējo formu.

Iepriekšēja optimizācija

Smart Remove Brush Tool noņemtie punkti

Tālāk mēs palielināsim attēlu. Programmā Illustrator ir ērti ieslēgt View > Pixel Preview ar pikseļu režģi un pārbaudīt, kā ir novietotas kontūras. Kontūru ievietošana režģī prasīs nedaudz laika, taču pūles atmaksāsies un rezultēsies tīrāk (vislabāk tam pievērst uzmanību jau iepriekš).

Punkti no režģa

Izlīdziniet režģi

Ja ir divi vai vairāki objekti, kas jāsaskaņo, tad ir vērts noņemt visus nevajadzīgos pārklāšanās. Dažreiz, pat ja kontūras ir rūpīgi izlīdzinātas, var būt redzama plāna balta līnija. Lai to novērstu, varat nedaudz pārklāt objektus, kur tie pārklājas. Svarīgi: SVG formātā z-indeksam ir noteikta secība, kas ir atkarīga no zemāk esošā objekta, tāpēc ir vērts augšējo objektu kodā ievietot faila apakšā.

Un visbeidzot, kas parasti tiek aizmirsts, ir iespējot SVG gzip saspiešanu savā vietnē .htaccess failā.

AddType attēls/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... utt

Kā piemēru tam, cik efektīva ir šī tehnika, es ņemšu oriģinālo Breaking Borders logotipu un optimizēšu to šādi: palielināt izmēru līdz tādam, kādam tam vajadzētu būt; Es sakārtošu kontūras; Es izdzēsīšu pēc iespējas vairāk punktu; pārvietot punktus par veseliem pikseļiem; Es pārvietošu visus pārklāšanās apgabalus un nosūtīšu to uz SVGO.

Oriģināls: 1.413b

Pēc optimizācijas: 409b

Rezultātā faila izmērs kļuva par ~71% mazāks (un par 83% mazāks, kad tas tika saspiests)

Šī ziņa ir pirmā rakstu sērijā par SVG (Scalable Vector Graphic), kas aptver vektorgrafikas pamatus vietnē.

Vektorgrafiku plaši izmanto drukāšanā. Vietnēm ir SVG, kas saskaņā ar oficiālo specifikāciju vietnē w3.org ir valoda divdimensiju grafikas aprakstīšanai XML formātā. SVG ietver trīs veidu objektus: formas, attēlus un tekstu. SVG pastāv kopš 1999. gada, un kopš 2011. gada 16. augusta tas ir iekļauts W3C rekomendācijās. Tīmekļa izstrādātāji ļoti nenovērtē SVG, lai gan tam ir vairākas svarīgas priekšrocības.

SVG priekšrocības

• Mērogošana: atšķirībā no rastra grafikas, SVG nezaudē kvalitāti, veicot mērogošanu, tāpēc to ir ērti izmantot tīklenes attīstībai.
• HTTP pieprasījumu samazināšana: izmantojot SVG, tiek samazināts zvanu skaits uz serveri un attiecīgi palielinās vietnes ielādes ātrums.
• Stils un skripti: izmantojot CSS, varat mainīt vietnes grafikas iestatījumus, piemēram, fonu, caurspīdīgumu vai apmales.
• Animācija un rediģēšana: izmantojot javascript, varat animēt SVG, kā arī rediģēt to teksta vai grafikas redaktorā (InkScape vai Adobe Illustrator).
• Mazs izmērs: SVG objekti sver daudz mazāk nekā rastra attēli.

Pamata SVG formas

Vienkārša līnija, izmantojot tagu līniju tikai ar diviem parametriem - sākuma punktiem (x1 un x2) un beigu punktiem (y1 un y2):

Lai iestatītu krāsu un platumu, varat pievienot arī gājiena un gājiena platuma atribūtus vai stilus.

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

lauzta līnija

Taisnstūris

Aplis

Elipse

Daudzstūris

Izmantojot redaktorus

Piemērs ir iPod attēls no OpenClipArt.org.