SVG-ovi: stvorite HTML5 grafiku koja djeluje u bilo kojem pregledniku

Objava: Vaša podrška pomaže održavanju web mjesta! Naplaćujemo naknadu za preporuku za neke usluge koje preporučamo na ovoj stranici.


Pri radu sa slikama na webu važno je koristiti ispravnu vrstu datoteke za vašu namjenu. Iako su formati poput JPG, PNG i GIF najpoznatiji web korisnicima, oni možda nisu uvijek prikladan izbor.

Ovaj će vas članak upoznati s osnovama druge vrste formata slike: SVG ili Scalable Vector Vector Graphics.

SVG: Skalabilna vektorska grafika

Vektori vs Rasterski formati slike

U svijetu slikovnih datoteka postoje dvije osnovne vrste formata: rasterski i vektorski. Rasterski formati temelje se na pikselima. Ovi formati uključuju takve datoteke kao JPG, PNG i GIF.

Ponekad se rasterske slike nazivaju bitmap slike, zbog prirode temeljene na pikselima. Pikseli su, naravno, sitni kvadratni blokovi većine digitalnih slika koje vidite na webu.

Možete odrediti je li slika rasterska (ili bitmap) slika jednostavnim gledanjem izbliza i (obično) u povećanom zumu. Ako vidite milijune sićušnih kvadrata pri dovoljno visokoj razlučivosti (posebno na mjestima gdje se jedna boja mijenja u drugu), gledate piksele, a time je to i rasterska slika.

S druge strane, vektorska grafika temelji se na linijama i krivuljama, pohranjenim u tekstualnom XML-u. Oni se u velikoj mjeri temelje na matematičkoj teoriji, pa su za njihovo stvaranje potrebno otvaranje i uređivanje posebnih računalnih programa.

Kako su vektorske slike ilustracije, nisu prikladne za fotografije. Međutim, slika koju je na temelju fotografije stvorio umjetnik može se izgraditi u SVG. Logotipi su vjerojatno primarna upotreba SVG-a na webu, zajedno s ostalim ilustracijama specifičnim za brand.

Fontovi i slova mogu se također stvoriti u vektorskim formatima, tako da su rubovi znakova svježi i čisti. Ako ste ikad pokušali dodati tekst na vrh rasterske slike u Photoshopu ili nekoj drugoj aplikaciji za uređivanje slika – na primjer, za stvaranje zaglavlja web mjesta -, a zatim ste je pokušali još malo promijeniti, možda ste primijetili da tekst može ponekad izgledaju isprekidano po rubovima.

To je zbog razlika između vektorskih i rasterskih formata; SVG format je način da se ide ovdje.

Prednosti SVG-a

SVG je, kao što biste i očekivali od naziva, grafika koja se temelji na vektorima. Ne ovise o rezoluciji. Usporedite to s rasterskom grafikom, koja ovisi o razlučivosti monitora ili zaslona na kojem se prikazuju.

Tako kad uvećate rastersku grafiku – na primjer, JPG ili PNG datoteku – vidjet ćete da slika sve više zamućuje i iskrivljava.

U SVG formatu nećete. Možete povećati i zumirati bez izobličenja same slike.

To je omogućeno zbog prirode SVG formata. Budući da se temelji na tekstu, a ne na pikselu, možete promijeniti veličinu slike bez gubitka integriteta ili jasnoće detalja.

Sama ova značajka SVG čini nevjerojatno korisnim datotekama, posebno za slike ovisne o robnoj marki, poput složenih logotipa i druge grafike web mjesta. SVG-ovi se mogu slobodno promijeniti za buduće projekte, što SVG čini vrlo fleksibilan format za rad na web stranici.

Još jedna prednost korištenja SVG datoteka je ta što su učinkovitije za pohranu i prijenos. SVG je stvarno precizan matematički opis, a ne mnoštvo pojedinačnih piksela. Rezultirajuće SVG datoteke manje su od iste slike ako bi se prikazale u rasterskom formatu.

SVG podržava animaciju za svaki element i aspekt slike. Budući da su na tekstu, oni su također pretraživi i indeksirani, kao i stisljivi.

Nedostaci SVG-a

Postoji jedan osnovni nedostatak korištenja slikovnih datoteka u SVG formatu, a to je kompatibilnost. Potreban vam je softver koji može podnijeti rad sa SVG-ovima.

Neki od tih programa, kao što je Adobe Illustrator, nisu odmah dostupni svima koji će možda trebati da rade s tim slikama, za razliku od gomile uređivača (od kojih su mnogi besplatni) dostupnih za rad s rasterskim slikama.

No, Inkscape je besplatni editor s otvorenim kodom koji može obraditi SVG datoteke.

Ostala proširenja formata vektora

Uz SVG (skalabilna vektorska grafika), osnovna proširenja vektorske datoteke uključuju:

  • .drw (vektorska datoteka)
  • .eps (inkapsulirani PostScript)
  • .pct (Macintosh grafički format bitmape)
  • .pif (GDF format vektorske slike)
  • .ps (Adobe PostScript)
  • .svf (jednostavan vektorski format)

SVG elementi u HTML5

Koristeći HTML elemente, možete stvoriti neke osnovne oblike pomoću SVG-a u pregledniku. Svaki od ovih elemenata treba se ugnijezditi unutar oznake.

Crta

Element se može koristiti za stvaranje jedne ravne linije, koja se sastoji od dvije točke – početka i kraja. Svaka će točka, naravno, imati dvije koordinate, “x” i “y”.

Kôd će izgledati ovako:

Možete upariti i druge atribute s < crta > element: hod definira boju, a širina hoda kontrolira debljinu crte.

pravokutnika

Napravite pravokutnik pomoću elementa i odredite dimenzije atributima širine i visine. Možete dodati i boju s ispunom i za obris pravokutnika s taktom, kao što je prikazano u nastavku izvoda:

Krug

Kao što biste očekivali, element stvara krug. Da biste stvorili krug s polumjerom od 40 (postavljen atributom r), usmjeren na 40 piksela dolje i 40 preko gornjeg lijevog kuta, zeleni ispup i crni obris, upotrijebite kôd u nastavku:

Ako ne navedete atribute cx i cy, preglednik će interpretirati zadanu vrijednost “0”.

Ostali elementi s kojima se možete igrati, uključuju, i .

Podrška preglednika

SVG je dobro podržan u svim većim dostupnim preglednicima, osim IE8 i starijih verzija.

Što je sa SWF-om?

Iskusni dizajneri i programeri dobro poznaju SWF – format Flash animacija i grafike – i dok je SVG već dugo prisutan, tek je posljednjih nekoliko godina podrška za njega postala uobičajena.

Podrška za smanjivanje Flash-a u korist HTML5, CSS, JavaScript i SVG, presudno je da internetski profesionalci razumiju razlike između SVG i SWF-a i nauče koristiti moderne tehnologije.

Što je SWF?

SWF je akronim koji označava Small Web Format. To je format datoteke Adobe Flash koji se može upotrijebiti za grafiku, animacije i ugrađene widgete s appletima. Flash dodatak mora biti instaliran u pregledniku kako bi se SWF sadržaj mogao prikazivati.

SWF postoji već duže vrijeme, podržava ga veliki broj kvalificiranih programera, a na raspolaganju su i mnoge unaprijed izgrađene SWF animacije i tutorijali..

Sličnosti i razlike između SVG i SWF

SWF i SVG su oblici vektorske grafičke datoteke i oboje se mogu skriptirati za stvaranje animacija i interaktivnosti. Na ovaj su način slični. Međutim, postoji mnogo načina na koje se SWF i SVG razlikuju.

SVG je otvoreni standard

SVG standard razvio je World Wide Web Consortium (W3C) i, kao rezultat, potpuno je otvoren i slobodan za upotrebu i nadogradnju. SWF je, s druge strane, vlasnički Flash format u vlasništvu Adobe-a. Adobe je 2008. uklonio mnoga ograničenja koja reguliraju upotrebu SWF-ova, ali SWF ostaje vlasnički oblik.

S SVG-om je lakše raditi

SVG kôd XML je običan XML tekst. SVG-ovi se mogu kreirati pomoću bilo kojeg jednostavnog uređivača teksta, a stvaranje jednostavnih SVG-ova jednostavno je i brzo ih može naučiti svatko tko je upoznat s web jezicima poput HTML, CSS i JavaScript. SWF-ove morate kreirati i uređivati ​​složenim programima kao što su Adobe After Effects ili alternativnim izvorima otvorenog koda, kao što je Motion-Twin ActionScript 2 Compiler.

Osim toga, skriptiranje SVG-ova za animaciju i interaktivnost može se raditi s CSS-om i JavaScript-om – jezicima s kojima svakodnevno radi web dizajner i programer. S druge strane, SWF-ovi su skriptirani pomoću Adobe-ovog ActionScript-a koji je sličan JavaScript-u, ali nije identičan, a većina programera se bavi time znatno rjeđe..

Dodavanje SVG-a na web stranicu također je jednostavno kao i stavljanje koda u HTML dokument u skladu s drugim HTML elementima. Alternativno, SVG-ovi se mogu ugraditi u HTML dokument. SWF-ovi moraju biti ugrađeni u HTML dokument.

SVG je bolji za SEO

Budući da su SVG-ovi napisani u običnom tekstu, tražilice ih mogu čitati i indeksirati. SWF-ovi su, s druge strane, binarne datoteke koje je pretraživačima teško protumačiti. Kao rezultat, ako za isporuku sadržaja koristite SVG ili SWF, bolje je koristiti SVG ako je promet vaše tražilice važan za vašu web stranicu.

SVG podrška raste

Iako su SWF datoteke podrške dostupne u većini web-preglednika za stolna računala, isto ne vrijedi i za mobilne preglednike. Podrška za Flash sadržaje, uključujući SWF datoteke, uglavnom je ukinuta iz preglednika mobilnih uređaja. Podršku za SVG, s druge strane, nudi svaki moderni preglednik, a podrška za nove značajke neprestano se dodaje.

I SVG i SWF podržavaju više vrsta medija

Zvučni i video sadržaji mogu se ugraditi izravno u SWF datoteku. SVG ne uključuje podršku za zvučni i video sadržaj. Međutim, druge značajke HTML5 podržavaju audio i video sadržaj, a te se značajke mogu ugrađivati ​​izravno u SVG. Kao rezultat toga, audio i video mogu biti ugrađeni u SVG, ali reprodukcijom upravljaju drugi uređaji, a ne sam SVG standard.

Sažetak SWF-a

Dok je grafika na temelju Flash-a vladala mrežom u prošlosti, budućnost SVG-a pripada animiranim CSS-om i JavaScript-om. Sljedeći resursi pomoći će web dizajnerima i webmasterima da ažuriraju svoje vještine i počnu koristiti SVG u svojim projektima.

SVG resursi

Postoji mnogo besplatnih članaka, tutorijala i vodiča koji će vam pomoći da započnete sa SVG-om. Evo nekoliko najboljih.

Naučite osnove

Ako ste tek započeli sa SVG-om, pogledajte ovaj vodič iz Creative Bloq-a za stvaranje jednostavnih oblika i korištenje ispuna i gradijenata. Druga opcija koja pokriva puno istih osnovnih tehnika je ovaj vodič za početak rada sa SVG-om iz tvrtke Envato Tuts+.

Za kreiranje SVG-ova koristite grafički softver

Ako ćete kreirati išta složenije od jednostavnih oblika, poželjet ćete raditi s programom vektorske grafike, poput Adobe Illustrator koji može izvoziti datoteke u SVG formatu. Ovaj kratki vodič CSS-trikova pokazat će vam kako koristiti Illustrator za stvaranje animiranog oglasa koji koristi samo HTML i CSS. Drugi sjajni resurs za učenje korištenja ilustratora za stvaranje SVG-ova dolazi iz Web Designer Depot-a.

Ako nemate pristup Adobe Illustratoru, nemate sreće. Inkscape je program vektorske grafike profesionalne kvalitete koji je besplatan i otvorenog koda. Na raspolaganju su i brojni sjajni vodiči s Inkscape-a koji će vam pomoći započeti s programom i pokazati vam kako izvesti svoje kreacije u SVG formatu.

Naučite napredne SVG tehnike

Ako želite zaista savladati SVG, postoje dva resursa koja trebate potrošiti na vrijeme pregledavajući:

  • SVG Vodič iz Mozilla Developer Network-a.
  • SVG primer za današnje preglednike, besplatnu e-knjigu iz W3C-a.

Oba su izvora opsežna i pokrivaju punu širinu trenutnog razmišljanja i prakse u pogledu SVG programa. Ti resursi nisu za početnike, ali ako vam je ugodno s HTML-om i CSS-om i želite postati stručnjaci u radu sa SVG-om, onda ste spremni iskoristiti ih.

Stvorite SVG animacije

SVG se može koristiti za stvaranje doista impresivnih animacija. Jednom kada vam je ugodno raditi sa SVG-om, ako želite naučiti kako stvoriti impresivne SVG animacije, pogledajte ove resurse:

  • Vodič Davida Walsha za stvaranje SVG animacija pomoću CSS-a i JavaScript-a.
  • Jenkov opširni tutorial koji pokriva sve aspekte rada sa SVG-om, uključujući CSS animacije i JavaScript skripte.
  • Hongkiatov popis osam vodećih JavaScript knjižnica za stvaranje SVG animacija.

Daljnji resursi

  • SVG Tutorial za Mozilla Developers Network: udžbenik u tijeku koji razmatra svaki aspekt SVG formata za upotrebu u Mozilla preglednicima.
  • Jednostavan uvod u SVG animaciju: sjajan udžbenik koji je napisao David Walsh.
  • ImageMagick Uvod i resursi: zbirka grafičkih alata, koja uključuju neke za PostScript.

Zaključak

Upotreba SVG-a u vašim grafičkim kreacijama i web dizajnu možda nije nešto na čemu ste navikli usmjeriti vrata, ali je nesumnjivo vrijedno nastojati se upoznati s njima. Nadamo se da će vam gore navedeno pomoći u učenju.

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