SVG: Vytvorte grafiku HTML5, ktorá funguje v ľubovoľnom prehliadači

zverejnenie: Vaša podpora pomáha udržiavať web v prevádzke! Za niektoré zo služieb, ktoré odporúčame na tejto stránke, získavame poplatok za sprostredkovanie.


Pri práci s obrázkami na webe je dôležité používať správny typ súboru na určený účel. Hoci formáty ako JPG, PNG a GIF sú pre používateľov webu najznámejšie, nemusia byť vždy vhodnou voľbou.

Tento článok vás oboznámi so základmi iného formátu obrázka: formátu SVG alebo Scalable Vector Graphics.

SVG: Škálovateľná vektorová grafika

Formáty vektorov vs rastrové obrázky

Vo svete obrazových súborov existujú dva základné typy formátu: rastrový a vektorový. Rastrové formáty sú založené na pixeloch. Tieto formáty zahŕňajú také typy súborov ako JPG, PNG a GIF.

Rastrové obrázky sa niekedy označujú ako bitmapové obrázky, a to kvôli ich povahe založenej na pixeloch. Pixely sú samozrejme malými štvorcovými stavebnými kameňmi väčšiny digitálnych obrázkov, ktoré vidíte na webe.

To, či je obraz rastrovým (alebo bitmapovým) obrázkom, môžete zistiť jednoducho tak, že sa naň pozriete zblízka a (zvyčajne) vo zväčšenom priblížení. Ak vidíte milióny malých štvorcov vo vysokom rozlíšení (najmä na miestach, kde sa jedna farba mení na inú), pozeráte sa na pixely, a preto je to rastrový obrázok.

Vektorová grafika je naopak založená na riadkoch a krivkách uložených v textovom XML. Sú silne založené na matematickej teórii, a preto si vyžadujú špeciálne počítačové programy na vytváranie, otváranie a úpravy.

Pretože vektorové obrázky sú ilustráciami, nie sú vhodné na fotografie. Obrázok, ktorý vytvoril umelec na základe fotografie, sa však dá vytvoriť v jazyku SVG. Logá sú pravdepodobne primárnym použitím SVG na webe spolu s ďalšími ilustráciami špecifickými pre značku.

Písma a písma sa vytvárajú aj vo vektorových formátoch, takže okraje znakov sú čisté a čisté. Ak ste sa niekedy pokúsili pridať text na vrchný obrázok rastru vo Photoshope alebo nejakej inej aplikácii na úpravu obrázkov – napríklad na vytvorenie hlavičky webovej stránky – potom ste sa pokúsili zmeniť jeho veľkosť dokonca trochu, možno ste si všimli, že text môže niekedy sa na okrajoch javí nerovnomerne.

Je to kvôli rozdielom medzi vektorovými a rastrovými formátmi; SVG formát je spôsob, ako ísť sem.

Výhody SVG

SVG je, ako by ste od názvu očakávali, vektorová grafika. Sú nezávislé na rozlíšení. Porovnajte to s rastrovou grafikou, ktorá závisí od rozlíšenia monitora alebo obrazovky, na ktorej sa zobrazujú.

Keď teda priblížite rastrovú grafiku – napríklad súbor JPG alebo PNG – uvidíte, že sa obrázok stále rozostruje a skresľuje..

Vo formáte SVG nebudete. Zväčšiť a priblížiť môžete bez skreslenia samotného obrázka.

Je to možné vďaka charakteru formátu SVG. Pretože je založený na texte a nie na pixeloch, môžete zmeniť veľkosť obrázka bez straty integrity alebo jasnosti detailov.

Táto vlastnosť sama o sebe robí neuveriteľne užitočné súbory SVG, najmä pri obrázkoch závislých od značky, ako sú napríklad komplexné logá a ďalšie grafické prvky webových stránok. Veľkosť SVG sa môže voľne meniť pre budúce projekty, vďaka čomu sa SVG stáva veľmi flexibilným formátom fungovania webových stránok.

Ďalšou výhodou použitia súborov SVG je, že sú efektívnejšie pri ukladaní a prenose. SVG je skutočne presný matematický opis namiesto rozsiahlej zbierky jednotlivých pixelov. Výsledné súbory SVG sú menšie ako ten istý obrázok, ktorý by bol vykreslený v rastrovom formáte.

SVG podporuje animáciu pre každý prvok a aspekt obrázka. Pretože sú založené na texte, sú tiež prehľadateľné a indexovateľné a tiež komprimovateľné.

Nevýhody SVG

Jednou z hlavných nevýhod použitia obrázkových súborov vo formáte SVG je kompatibilita. Potrebujete softvér, ktorý zvládne prácu s SVG.

Niektoré z týchto programov, ako napríklad Adobe Illustrator, nie sú okamžite prístupné všetkým, ktorí by mohli potrebovať pracovať s týmito obrázkami, na rozdiel od množstva editorov (mnohí z nich zadarmo), ktorí sú k dispozícii na prácu s rastrovými obrázkami..

Inkscape je však bezplatný editor s otvoreným zdrojovým kódom, ktorý dokáže spracovať súbory SVG.

Ďalšie rozšírenia vektorového formátu

Okrem SVG (škálovateľná vektorová grafika), základné prípony vektorových súborov zahŕňajú:

  • .drw (vektorový súbor)
  • .eps (Encapsulated PostScript)
  • .pct (formát bitmapovej grafiky pre počítače Macintosh)
  • .pif (formát GDF vektorového obrázka)
  • .ps (Adobe PostScript)
  • .svf (jednoduchý vektorový formát)

Prvky SVG v HTML5

Pomocou prvkov HTML môžete v prehliadači vytvoriť niekoľko základných tvarov pomocou SVG. Každý z týchto prvkov musí byť vnorený do značky.

riadok

Prvok sa dá použiť na vytvorenie jednej priamky pozostávajúcej z dvoch bodov – začiatok a koniec. Každý bod bude mať samozrejme dve súradnice, „x“ a „y“.

Kód bude vyzerať takto:

Môžete tiež spárovať ďalšie atribúty s < riadok > element: mŕtvica definuje farbu a šírka ťahu riadi hrúbku čiary.

rect

Pomocou prvku vytvorte obdĺžnik a určte rozmery s atribútmi šírka a výška. Môžete tiež poskytnúť farbu s výplňou a pre obrys obdĺžnika s ťahom, ako je znázornené v nižšie uvedenom výpise kódu:

kružnice

Ako ste očakávali, prvok vytvorí kruh. Ak chcete vytvoriť kruh s polomerom 40 (nastavený pomocou atribútu r), vystredený na 40 pixelov nadol a 40 oproti ľavému hornému rohu, zelenú výplň a čierny obrys, použite nasledujúci kód:

Ak neurčíte atribúty cx a cy, prehliadač interpretuje predvolenú hodnotu „0“.

Medzi ďalšie prvky, s ktorými môžete hrať, patria,, a .

Podpora prehliadača

SVG je dobre podporovaný vo všetkých hlavných dostupných prehľadávačoch, s výnimkou IE8 a starších verzií.

A čo SWF?

Skúsení dizajnéri a vývojári dobre poznajú SWF – formát animácií a grafiky vo formáte Flash – a hoci SVG je už dosť dlho, podpora tohto prúdu sa stala bežnou súčasťou hlavného prúdu..

S podporou zmenšovania obsahu Flash v prospech HTML5, CSS, JavaScript a SVG je rozhodujúce, aby weboví odborníci pochopili rozdiely medzi SVG a SWF a naučili sa používať moderné technológie..

Čo je to SWF?

SWF je skratka pre skratku Small Web Format. Je to formát súborov Adobe Flash, ktorý je možné použiť pre grafiku, animácie a vložené aplety. Doplnok Flash musí byť nainštalovaný v prehliadači, aby sa mohol vykresliť obsah SWF.

SWF existuje už dlhú dobu, je podporovaný veľkým množstvom kvalifikovaných vývojárov a je k dispozícii veľa vopred pripravených animácií a návodov SWF..

Podobnosti a rozdiely medzi SVG a SWF

SWF a SVG sú formáty vektorových grafických súborov a obe je možné skriptovať, aby vytvorili animácie a interaktivitu. Týmto spôsobom sú podobné. Existuje však veľa spôsobov, ako sa SWF a SVG líšia.

SVG je otvorený štandard

Norma SVG bola vyvinutá konzorciom World Wide Web Consortium (W3C), a preto je úplne otvorená a je ju možné používať a na nej stavať. Na druhej strane SWF je proprietárny formát Flash vlastnený spoločnosťou Adobe. V roku 2008 spoločnosť Adobe odstránila mnoho obmedzení, ktoré upravujú používanie SWF, ale SWF zostáva v proprietárnom formáte.

SVG je ľahšie pracovať

SVG kód je ľudsky čitateľný XML text. SVG môžu byť vytvorené pomocou ľubovoľného textového editora a vytváranie jednoduchých SVG je ľahké a ľahko sa môže naučiť každý, kto pozná webové jazyky, ako HTML, CSS a JavaScript. SWF sa musia vytvárať a upravovať pomocou zložitých programov, ako je Adobe After Effects alebo alternatív s otvoreným zdrojom, ako je kompilátor Motion-Twin ActionScript 2.

Skriptovanie SVG na animáciu a interaktivitu sa dá robiť aj pomocou CSS a JavaScript – jazykov, s ktorými každý webový dizajnér a vývojár denne pracuje. Na druhej strane sú súbory SWF skripty s skriptom ActionScript spoločnosti Adobe, ktorý je podobný skriptu JavaScript, ale nie identický, a väčšina vývojárov s ním zaobchádza oveľa menej často..

Pridanie súboru SVG na webovú stránku je rovnako jednoduché ako vloženie kódu do dokumentu HTML v súlade s ostatnými prvkami HTML. Alternatívne môžu byť SVG vložené do HTML dokumentu. SWF musia byť vložené do dokumentu HTML.

SVG je pre SEO lepší

Keďže SVG sú napísané ako obyčajný text, môžu ich vyhľadávacie nástroje čítať a indexovať. Na druhej strane SWF sú binárne súbory, ktoré vyhľadávacie nástroje ťažko interpretujú. Výsledkom je, že ak na doručovanie obsahu používate SVG alebo SWF, je pre vás lepšie použiť SVG, ak je pre váš web dôležitá prevádzka vyhľadávacích nástrojov..

Podpora SVG rastie

Hoci sú súbory SWF podpory dostupné vo väčšine webových prehliadačov pre stolné počítače, to isté neplatí pre mobilné prehliadače. Podpora obsahu vo formáte Flash vrátane súborov SWF sa z mobilných prehliadačov postupne vyradila. Na druhej strane podporu SVG ponúka každý moderný prehliadač a podpora nových funkcií sa neustále pridáva.

SVG aj SWF podporujú viacero typov médií

Zvukový a obrazový obsah možno vložiť priamo do súboru SWF. SVG nezahŕňa podporu zvukového a obrazového obsahu. Ostatné funkcie jazyka HTML5 však podporujú zvukový a obrazový obsah a tieto funkcie možno vložiť priamo do súboru SVG. Výsledkom je, že zvuk a video môžu byť zabudované do SVG, ale prehrávanie zvládajú iní hráči, nie samotný SVG štandard..

Zhrnutie SWF

Kým v minulosti web ovládal grafika vo formáte Flash, budúcnosť patrí skupine SVG animovanej pomocou CSS a JavaScript. Nasledujúce zdroje pomôžu webovým dizajnérom a webmasterom udržiavať svoje zručnosti aktuálne a začať používať SVG vo svojich projektoch.

Zdroje SVG

Existuje veľa bezplatných článkov, návodov a príručiek, ktoré vám pomôžu začať s programom SVG. Tu sú niektoré z najlepších.

Naučte sa základy

Ak práve začínate s programom SVG, prečítajte si tento výukový program od spoločnosti Creative Bloq, kde nájdete jednoduché tvary a výplne a prechody. Druhou možnosťou, ktorá pokrýva veľa rovnakých základných techník, je táto príručka, ako začať so SVG od spoločnosti Envato Tuts+.

Na vytváranie SVG použite grafický softvér

Ak sa chystáte vytvoriť niečo zložitejšie ako jednoduché tvary, budete chcieť pracovať s programom vektorovej grafiky, ako je napríklad Adobe Illustrator, ktorý dokáže exportovať súbory vo formáte SVG. Tento rýchly sprievodca zo stránok CSS-Tricks vám ukáže, ako pomocou aplikácie Illustrator vytvoriť animovanú reklamu, ktorá používa iba HTML a CSS. Ďalší skvelý zdroj informácií o tom, ako používať ilustrátor na vytváranie SVG, pochádza zo skladu Web Designer Depot.

Ak nemáte prístup k aplikácii Adobe Illustrator, nemáte šťastie. Inkscape je profesionálny vektorový grafický program, ktorý je bezplatný a má otvorený zdrojový kód. Existuje tiež veľa vynikajúcich návodov z Inkscape, ktoré vám pomôžu začať s programom a ukážu vám, ako exportovať svoje výtvory vo formáte SVG..

Naučte sa pokročilé techniky SVG

Ak chcete skutočne ovládať SVG, musíte skontrolovať dva zdroje:

  • Výukový program SVG od vývojárskej siete Mozilla.
  • Primer SVG pre dnešné prehliadače, bezplatná e-kniha z W3C.

Obidva tieto zdroje sú rozsiahle a pokrývajú celú šírku súčasného myslenia a praxe v súvislosti s programovaním SVG. Tieto zdroje nie sú určené pre začiatočníkov, ale ak ste oboznámení s HTML a CSS a chcete ovládať prácu s SVG, ste pripravení ich prijať.

Vytvárajte animácie SVG

Pomocou SVG môžete vytvárať skutočne pôsobivé animácie. Ak sa chcete pohodlne spolupracovať s programom SVG, ak sa chcete naučiť vytvárať pôsobivé animácie SVG, pozrite si tieto zdroje:

  • Výukový program od Davida Walsha pre vytváranie animácií SVG pomocou CSS a JavaScript.
  • Rozsiahly tutoriál od Jenkova, ktorý pokrýva všetky aspekty práce s SVG, vrátane animácií CSS a skriptov JavaScript.
  • Zoznam ôsmich popredných knižníc jazyka JavaScript na vytváranie animácií SVG v Hongkongu.

Ďalšie zdroje

  • Výukový program SVG pre program Mozilla Developers Network: priebežný kurz, ktorý diskutuje o všetkých aspektoch formátu SVG na použitie v prehliadačoch Mozilla..
  • The Simple Intro to SVG Animation: skvelý návod, ktorý napísal David Walsh.
  • ImageMagick Úvod a zdroje: zbierka grafických nástrojov, ktoré obsahujú niektoré pre PostScript.

záver

Využitie SVG vo vašich grafických výtvoroch a webdizajne nemusí byť niečo, na čo ste zvyknutí priamo pri bráne, ale je nepochybne užitočné sa s nimi zoznámiť. Dúfajme, že vyššie uvedené pomôže usmerniť vaše učenie.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me