SVG: sukurkite HTML5 grafiką, kuri veikia bet kurioje naršyklėje

Atskleidimas: Jūsų palaikymas padeda išlaikyti svetainę! Mes uždirbame siuntimo mokestį už kai kurias paslaugas, kurias rekomenduojame šiame puslapyje.


Kai dirbate su vaizdais internete, svarbu naudoti tinkamo tipo failą numatytam tikslui. Nors tokie formatai kaip JPG, PNG ir GIF yra labiausiai žinomi interneto vartotojams, jie ne visada gali būti tinkamas pasirinkimas.

Šis straipsnis supažindins jus su kitos rūšies vaizdo formato pagrindais: SVG arba Scalable Vector Graphics formatu.

SVG: keičiamo dydžio vektorinė grafika

„Vektoriaus ir rastrinio vaizdo formatai“

Vaizdų failų pasaulyje yra du pagrindiniai formatų tipai: rastrinis ir vektorinis. Rastriniai formatai yra pagrįsti pikseliais. Šie formatai apima tokius failų tipus kaip JPG, PNG ir GIF.

Kartais rastriniai vaizdai yra vadinami bitmap vaizdais dėl jų pikselių pobūdžio. Pikseliai, be abejo, yra mažyčiai kvadratiniai elementai daugumos skaitmeninių vaizdų, kuriuos matote internete.

Galite pasakyti, ar vaizdas yra rastrinis (ar bitkartinis) vaizdas, tiesiog pažiūrėję į jį iš arti ir (paprastai) padidintu masteliu. Jei matote milijonus mažų kvadratų, turinčių pakankamai didelę skiriamąją gebą (ypač tose vietose, kur viena spalva keičiasi į kitą), žiūrite į pikselius, taigi, tai yra rastringesnis vaizdas.

Kita vertus, vektorinė grafika yra paremta linijomis ir kreivėmis, saugomomis tekstinėje XML. Jie labai remiasi matematikos teorija, todėl jiems sukurti, atidaryti ir redaguoti reikalingos specialios kompiuterinės programos.

Kadangi vektoriniai vaizdai yra iliustracijos, jie netinka fotografijoms. Tačiau paveikslas, kurį dailininkas sukūrė pagal nuotrauką, gali būti pastatytas SVG. Logotipai, ko gero, yra pagrindinis SVG naudojimas internete, kartu su kitomis prekės ženklo iliustracijomis.

Šriftai ir šriftai taip pat kuriami vektoriniu formatu, kad ženklų kraštai būtų aiškūs ir aiškūs. Jei kada bandėte pridėti tekstą ant rastrinio paveikslėlio „Photoshop“ ar kitoje vaizdo redagavimo programoje, pavyzdžiui, sukurti svetainės antraštę, tada bandėte dar šiek tiek pakeisti jo dydį, galbūt pastebėjote, kad tekstas gali kartais atrodo apniukę kraštuose.

Taip yra dėl vektorinių ir rastrinių formatų skirtumų; būdas yra SVG formatas.

SVG pranašumai

Kaip tikėjotės iš pavadinimo, SVG yra vektorinė grafika. Jie nepriklauso nuo rezoliucijos. Palyginkite tai su rastrine grafika, kuri priklauso nuo monitoriaus ar ekrano, kuriame jie rodomi, skyros.

Taigi, priartindami rastrinę grafiką – pavyzdžiui, JPG ar PNG failą – matysite, kad vaizdas vis labiau neryškus ir iškraipomas.

SVG formatu to nepadarysite. Galite padidinti ir padidinti mastelį, neiškraipydami paties vaizdo.

Tai padaryti įmanoma dėl SVG formato pobūdžio. Kadangi tai yra tekstas, o ne pikselis, galite pakeisti vaizdo dydį, neprarasdami vientisumo ar aiškumo.

Vien dėl šios funkcijos SVG yra nepaprastai naudingi failai, ypač priklausomai nuo prekės ženklo atvaizdų, tokių kaip sudėtingi logotipai ir kita svetainės grafika. SVG gali būti laisvai keičiamas atsižvelgiant į būsimus projektus, todėl SVG yra labai lankstus darbo su svetaine formatas.

Kitas SVG failų naudojimo pranašumas yra tas, kad juos efektyviau saugoti ir perduoti. SVG yra tikrai tikslūs matematiniai aprašymai, o ne didžiulė atskirų vaizdo elementų kolekcija. Gauti SVG failai yra mažesni nei tas pats vaizdas, kuris būtų pateiktas rastriniu formatu.

SVG palaiko kiekvieno vaizdo elemento ir aspekto animaciją. Kadangi jie yra pagrįsti tekstu, jie taip pat yra ieškomi, indeksuojami ir suspaudžiami.

SVG trūkumai

Yra vienas pagrindinis SVG formato vaizdo failų naudojimo trūkumas – tai suderinamumas. Jums reikia programinės įrangos, kuri galėtų dirbti su SVG.

Kai kurios iš tų programų, pvz., „Adobe Illustrator“, nėra prieinamos iškart visiems, kuriems gali tekti dirbti su tais vaizdais, skirtingai nei gausybė redaktorių (daugelis iš jų nemokami), skirti darbui su rastriniais vaizdais..

Tačiau „Inkscape“ yra nemokama atvirojo kodo redaktorė, galinti tvarkyti SVG failus.

Kiti vektorinio formato plėtiniai

Be SVG (keičiamo dydžio vektorinė grafika), pagrindiniai vektorinių failų plėtiniai apima:

  • .„drw“ (vektorinis failas)
  • .eps (Encapsulated PostScript)
  • .pct („Macintosh“ bitmap grafikos formatas)
  • .pif (vektorinio vaizdo GDF formatas)
  • .ps („Adobe PostScript“)
  • .svf (paprastas vektorinis formatas)

SVG elementai HTML5

Naudodamiesi HTML elementais, naudodami SVG naršyklėje galite sukurti keletą pagrindinių formų. Kiekvienas iš šių elementų turi būti įdėtas į žymą.

Linija

Elementas gali būti naudojamas sukurti vieną tiesę, susidedančią iš dviejų taškų – pradžios ir pabaigos. Kiekvienas taškas, be abejo, turės dvi koordinates, „x“ ir „y“.

Kodas atrodys taip:

Taip pat galite suporuoti kitus atributus su < linija > elementas: brūkšnys apibrėžia spalvą, o brūkšnio plotis kontroliuoja linijos storį.

Rekt

Sukurkite stačiakampį naudodami elementą ir nurodydami matmenis su atributais plotis ir aukštis. Taip pat galite pateikti spalvą su užpildu ir stačiakampio kontūrai su brūkšniu, kaip parodyta žemiau pateiktoje kodo ištraukoje:

Apskritimas

Kaip ir tikėjotės, elementas sukuria ratą. Norėdami sukurti apskritimą, kurio spindulys yra 40 (nustatytas su atributu r), viduryje 40 taškų žemyn ir 40 virš viršutinio kairiojo kampo, žalias užpildymas ir juodas kontūras, naudokite žemiau esantį kodą:

Jei nenurodysite atributų „cx“ ir „cy“, naršyklė aiškins numatytąją „0“ vertę.

Kiti elementai, kuriais galite žaisti, yra,, ir .

Naršyklės palaikymas

SVG yra gerai palaikomas visose pagrindinėse prieinamose naršyklėse, išskyrus IE8 ir ankstesnes versijas.

Ką apie SWF?

Patyrę dizaineriai ir kūrėjai gerai žino SWF – „Flash“ animacijos ir grafikos formatą – ir nors SVG veikia jau gana ilgą laiką, tik per pastaruosius kelerius metus jo palaikymas tapo visuotinis.

Palaikant „Flash“ mažėjimą HTML5, CSS, „JavaScript“ ir SVG naudai, labai svarbu, kad interneto profesionalai suprastų SVG ir SWF skirtumus ir išmoktų naudotis šiuolaikinėmis technologijomis.

Kas yra SWF??

SWF yra santrumpa, reiškianti mažą interneto formatą. Tai „Adobe Flash“ failo formatas, kurį galima naudoti grafikai, animacijai ir įdėtiems programėlių valdikliams kurti. „Flash“ papildinys turi būti įdiegtas naršyklėje, kad SWF turinys būtų pateiktas.

SWF veikia jau ilgą laiką, jį palaiko didelis kvalifikuotų kūrėjų būrys, be to, yra daug iš anksto paruoštų SWF animacijų ir vadovėlių..

SVG ir SWF panašumai ir skirtumai

SWF ir SVG yra vektoriniai grafinių failų formatai, ir juos abu galima scenarijuoti, kad būtų sukurta animacija ir interaktyvumas. Tokiu būdu jie yra panašūs. Tačiau SWF ir SVG skiriasi keliais būdais.

SVG yra atviras standartas

SVG standartą sukūrė pasaulinis žiniatinklio konsorciumas (W3C), todėl jis yra visiškai atviras ir laisvai naudojamas bei grindžiamas. Kita vertus, SWF yra patentuotas „Flash“ formatas, priklausantis „Adobe“. 2008 m. „Adobe“ panaikino daugelį apribojimų, reglamentuojančių SWF naudojimą, tačiau SWF išlieka patentuotas formatas.

Su SVG lengviau dirbti

SVG kodas yra žmonėms suprantamas paprasto teksto XML. SVG galima sukurti naudojant bet kurį paprasto teksto rengyklę, nesudėtinga sukurti paprastas SVG ir jas greitai išmokti kiekvienas, susipažinęs su žiniatinklio kalbomis, tokiomis kaip HTML, CSS ir „JavaScript“. SWF turi būti kuriami ir redaguojami naudojant sudėtingas programas, tokias kaip „Adobe After Effects“ arba atvirojo kodo alternatyvas, tokias kaip „Motion-Twin ActionScript 2 Compiler“..

Be to, SVG scenarijus animacijai ir interaktyvumui galima atlikti naudojant CSS ir „JavaScript“ – kalbas, su kuriomis kiekvienas interneto dizaineris ir kūrėjas dirba kasdien. SWF, kita vertus, yra scenarijus su „Adobe“ „ActionScript“, kuris yra panašus į „JavaScript“, bet nėra identiškas, o dauguma kūrėjų su juo susiduria daug rečiau..

Įtraukti SVG į svetainę taip pat paprasta, kaip įmesdami kodą į HTML dokumentą pagal kitus HTML elementus. Arba SVG gali būti dedamos į HTML dokumentą. SWF turi būti įterpti į HTML dokumentą.

SVG geriau tinka SEO

Kadangi SVG yra parašyti paprastu tekstu, juos gali skaityti ir indeksuoti paieškos sistemos. Kita vertus, SWF yra dvejetainiai failai, kuriuos paieškos sistemoms sunku suprasti. Todėl, jei norėdami pateikti turinį naudojate SVG arba SWF, jums geriau padėti naudoti SVG, jei jūsų svetainėje svarbus paieškos variklių srautas.

SVG palaikymas auga

Nors palaikymo SWF failai galimi daugelyje stalinių kompiuterių interneto naršyklių, tas pats pasakytina ne apie mobiliųjų įrenginių naršykles. „Flash“ turinio, įskaitant SWF failus, palaikymas buvo palaipsniui panaikintas iš mobiliųjų naršyklių. Kita vertus, palaikymą SVG siūlo kiekviena moderni naršyklė, o naujų funkcijų palaikymas yra papildomas nuolat.

Tiek SVG, tiek SWF palaiko įvairius laikmenų tipus

Garso ir vaizdo įrašų turinį galima įterpti tiesiai į SWF failą. SVG neapima garso ir vaizdo turinio palaikymo. Tačiau kitos HTML5 funkcijos palaiko garso ir vaizdo turinį, o šias funkcijas galima įterpti tiesiai į SVG. Todėl garso ir vaizdo įrašą galima įterpti į SVG, tačiau atkūrimą tvarko kiti grotuvai, o ne pats SVG standartas..

SWF santrauka

Nors anksčiau „Flash“ pagrindu sukurta grafika valdė internetą, ateitis priklauso SVG, animuotoms CSS ir „JavaScript“. Šie šaltiniai padės interneto dizaineriams ir svetainių valdytojams atnaujinti savo įgūdžius ir pradėti naudoti SVG savo projektuose.

SVG ištekliai

Yra daug nemokamų straipsnių, vadovėlių ir vadovų, kurie padės jums pradėti naudotis SVG. Čia yra keletas geriausių.

Sužinokite pagrindus

Jei tik pradedate dirbti su SVG, peržiūrėkite šį „Creative Bloq“ vadovą, kaip sukurti paprastas formas ir naudoti užpildus bei nuolydžius. Antrasis variantas, apimantis daug tų pačių pagrindinių metodų, yra šis vadovas, kaip pradėti naudotis SVG iš „Envato Tuts“+.

Norėdami sukurti SVG, naudokite grafikos programinę įrangą

Jei sukursite ką nors sudėtingesnio nei paprastos formos, norėsite dirbti su vektorinės grafikos programa, pavyzdžiui, „Adobe Illustrator“, kuri gali eksportuoti failus SVG formatu. Šis trumpas CSS-gudrybių vadovas parodys, kaip naudoti iliustratorių animaciniam skelbimui, kuriame naudojamas tik HTML ir CSS, sukurti. Kitas puikus šaltinis norint išmokti naudoti iliustratorius SVG sukurti yra „Web Designer Depot“.

Jei neturite prieigos prie „Adobe Illustrator“, jums nesiseka. „Inkscape“ yra profesionalios kokybės vektorinės grafikos programa, nemokama ir atvirojo kodo. „Inkscape“ taip pat galima rasti daugybę puikių vadovėlių, kurie padės jums pradėti naudotis programa ir parodys, kaip eksportuoti savo kūrinius SVG formatu..

Sužinokite apie pažangias SVG technikas

Jei norite iš tikrųjų įsisavinti SVG, yra du šaltiniai, kuriuos reikia skirti šiek tiek laiko peržiūrai:

  • „SVG“ mokymo programa iš „Mozilla“ kūrėjų tinklo.
  • „SVG Primer“ šiandienos naršyklėms, nemokama el. knyga iš W3C.

Abu šie šaltiniai yra dideli ir apima visą dabartinį mąstymą ir praktiką, susijusią su SVG programavimu. Šie šaltiniai nėra skirti pradedantiesiems, tačiau, jei jums patinka HTML ir CSS, ir norite išmokti dirbti su SVG, tada esate pasirengęs jų perimti.

Sukurkite SVG animacijas

SVG gali būti naudojamas kuriant tikrai įspūdingas animacijas. Kai jums patogu dirbti su SVG, jei norite išmokti kurti įspūdingas SVG animacijas, patikrinkite šiuos išteklius:

  • Vadovas iš Davido Walsho, kaip sukurti SVG animaciją naudojant CSS ir „JavaScript“.
  • Išsami Jenkovo ​​instrukcija, apimanti visus darbo su SVG aspektus, įskaitant CSS animacijas ir „JavaScript“ scenarijus.
  • „Hongkiat“ yra aštuonių pirmaujančių „JavaScript“ bibliotekų sąrašas SVG animacijai kurti.

Kiti šaltiniai

  • „Mozilla“ kūrėjų tinklo SVG mokymo programa: nebaigta mokymo programa, kurioje aptariami visi SVG formato aspektai, skirti naudoti „Mozilla“ naršyklėse..
  • Paprastas įvadas į SVG animaciją: puikus pamoka, kurią parašė Davidas Walshas.
  • „ImageMagick“ įvadas ir šaltiniai: grafikos priemonių rinkinys, kuriame yra keletas „PostScript“.

Išvada

Gali būti, kad naudodamiesi SVG savo grafiniuose kūriniuose ir internetiniame dizaine nesate įpratę prieiti prie vartų, tačiau tai, be abejo, yra vertas stengimasis su jais susipažinti. Tikimės, kad tai, kas pasakyta, padės nukreipti jūsų mokymąsi.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map