Kako se Koristi SVG u Web Dizajnu?


U nekoliko poslednjih meseci sve više se priča o SVG slikama. SVG je tu već godinama, ali tek u zadnje vreme je postao popularan.

Cela ta priča oko SVG-a nije samo trend, SVG u potpunosti rešava zahteve koje formati poput JPG ne mogu ispuniti. Ako želite da počnete sa upotrebom SVG formata, ovo je pravi članak za vas.

Opisaćemo proces kreiranja SVG-a od Illustratora do HTML-a i proći kroz proces editovanja slike korišćenjem CSS-a.

Šta je SVG i kako se koristi?

SVG je skraćenica za Scalable Vector Graphics i već iz prve reči je jasno zašto je SVG tako popularan. SVG je savršen sastojak za responsive dizajn. SVG je vektorski format slika za 2D grafiku zasnovan na XML-u.

SVG specifikacija je standard otvorenog tipa razvijen od strane W3C 1999. godine i kao što možete videti već dugo postoji kao tehnologija .

Zašto bi trebali koristiti SVG?

Radni tok i efikasnost upotrebe SVG formata se ogleda u sledećem:

  • SVG je obično dosta manji od bitmap formata poput JPG i PNG, što znači da zauzima manje web prostora i brže se preuzima.
  • SVG slike su skalabilne, izgledaju odlično bez obzira koju veličinu koristimo, što je idealno za retina ekrane.
  • SVG rešava problem sa responsive fotografijama, omogućavajući da se jedna veličina slike prikazuje podjednako dobro na svim uređajima.
  • SVG j savršen za flat dizajn trend koji je trenutno popularan.
  • Zbog toga što je SVG zasnovan na XML-u, može biti kontrolisan uz pomoć CSS-a i JavaScript-a, pružajući nebrojene opcije interaktivnosti.
  • SVG ne iziskuje dodatne HTTP zahteve; SVG je deo izvornog koda dokumenta, tako da je već na raspolaganju.

SVG je neverovatno korisna tehnologija i prava je misterija zašto do sada nije bolje iskorišćen.

Iz Illustratora u Web

Postoji više aplikacija koje se mogu koristiti za kreiranje SVG slika. Na ovom primeru je prikazan Adobe Illustrator.

svg u ilustratoru

U pitanju je veoma jednostavna grafika i lako se može videti šta se dešava u kodu.

Sledeći korak je njeno čuvanje u SVG formatu. Idemo na File > Save As.

Nakon toga se pojavljuje prozorčić sa dve opcije čuvanja.

kreiranje svg formata iz ilustratora

Opcija 1: Sačuvati kao sliku

Ovom opcijom, kada kliknemo na OK sačuvaćemo sliku kao .svg i jednostavno je dodati HTML kao i obični bitmap:

<img src="images/image.svg" alt="SVG"/>

Ovo je apsolutno uredu, slika će se skalirati bez problema, međutim zbog toga što na ovaj način dobijamo gotov fajl, nemamo opciju izmene u izvornom kodu stranice.

Opcija 2: SVG kod

Drugom opcijom dobijamo direktan pristup kodu slike, tako što ćemo kliknuti na SVG Code… dugme. Nakon toga sve što treba je da taj kod dodamo u HTML kod stranice.

Kod koji smo dobili je sledeći:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<rect x="314" y="89" width="250" height="158"/>
<circle class="stroke" cx="553" cy="241" r="68"/>
<circle cx="314" cy="157" r="68"/>
<polyline points="206.794,352.189 241.083,427.637 631.769,395.559 670.822,309.072 "/>
<text transform="matrix(0.9957 -0.0926 0.0926 0.9957 260.4678 399.3389)">SVG I WEB DIZAJN</text>
</svg>

Ovo je preferirani pristup zbog toga što nam dozvoljava da manipulišemo sa slikom uz pomoć CSS-a.

Kao što možete videti, kod je u jednostavnom XML formatu sa kojim su većinom upoznati svi koji rade na web-u.

U kodu iznad može se videti veliki broj XML elemenata, detalji o bojama i pozicijama i sa ovim vrednostima se lako može manipulisati.

Na sledećem linku se nalazi primer ovoga koda sa odgovarajućim CSS klasama da bi se dobio konačni efekat (slika sa tekstom koji ima efekat prelaza).

Zaključak

Očigledno je da SVG format nudi mnoštvo opcija. Ova tehnologija nije komplikovana za učenje, a sa druge strane nudi beskrajne mogućnosti. Jedna SVG slika vredi kao desetine slika u bitmap formatu.

Izgleda da je definitivno došlo vreme da dizajneri prihvate SVG format.

Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest