Illustrator i SVG format

SVG (Scalable Vector Graphic) je format namenjen vektorskoj grafici koji je zasnovan na XML-u. Njegova primarna namena je uvođenje vektorske grafike na web. Prednosti vektora nad bitmapama su dobro poznate: perfektan kvalitet grafike, mogućnost povećavanja/smanjivanja grafike bez gubitka kvaliteta, neuporedivo manji fajlovi…

Zbog svega ovoga, W3C je još 1998. formirao SVG radnu grupu koja je počela da radi na ovom standardu. 2001. godine je predstavljena prva verzija SVG-a. 2003-će je predstavljena verzija 1.1, kao i verzije SVG Tiny i SVG Basic koje su namenjene tadašnjim mobilnim telefonima i koji su sada zastareli. Nova verzija, SVG 2 se očekuje tokom sledeće godine.

Iz raznih razloga, ali najviše zbog kratkovidosti proizvođača browsera, SVG je u od nastanka nepravedno zanemarivan. U eri kada je opseg displeja na kojima gledamo sajtove veći nego ikad i kada je XML postao neodvojivi deo web-a, SVG kao da je ponovo rođen. Sada, svi moderni broweri i za desktop i za mobilne platforme, podržavaju SVG u potpunosti ili bar njegov osnovni skup komandi. A podrška svakoga dana postaje sve bolja i šira.

S obzirom da je firma Adobe aktivno učestvovala u stvaranju SVG formata, on je dobio podršku u Illustratoru od samog početka. Sem osnovnih opcija, Illustrator poseduje i određeni broj SVG filtera (efekata). Međutim, to je sve bilo optimizovano za Adobe SVG Viewer koji je Adobe prestao da razvija 2009. Sada za prikaz SVG-a više nije potreban poseban plugin i ove komande ponovo postaju aktuelne.

Dobra praksa

Par saveta kako da napravite dobru SVG grafiku:

  • SVG podržava transparenciju, ali ne i transparenciju grupe objekata. Zato podešavajte transparenciju za svaki objekat pojedinačno.
  • Izbegavajte Photoshop efekte koji kao rezultat daju rasterizovane vektore
  • Upotrebljavajte simbole. To će ubrzati iscrtavanje.
  • Kod grafike za mobilne telefone, izbegavajte efekte i četkice koje prave veliki broj tačaka.
  • Koristite SVG filtere jer se oni mogu interpretirati XML-om
  • Ako hoćete da bolje organizujete kod, koristite slojeve (layere). Objekti koji se nalaze u istom sloju, biće interpretirani kao grupa u SVG-u.

Kako da eksportujete SVG

SVG možete napraviti koristeći komandu Save As. Kada odredite folder i ime fajla, pojaviće se prozor SVG Options. Na slici ispod možete da vidite preporučena podešavanja. Obratite pažnju na sledeće opcije:

  1. Profile: SVG 1.1 (ostali profili su zastareli)
  2. Fonts:
    Type: SVG,
    Subsetting: None (ako koristite sistemske fontove) ili
    Only glyphs used (za fontove koji nisu sistemski)
  3. Options:
    Image location: Link (imaćete klasičan <href> tag ka eksternom fajlu. Ova opcija ima čudan bag, čuva apsolutnu adresu do fajla na vašem hard disku. Otvorite fajl i izmenite adresu do foldera na serveru. Embed opcija će napraviti gomilu neoptimizovanog koda.
    Preserve Illustrator Editing Capabilities: Ovu opciju OBAVEZNO isključite. Veličina fajla će biti tolika da je neupotrebljiv za web, a čuva gomilu podataka nebitnih za prikaz u browseru. Ako vam treba fleksibilnost da možete i naknadno da menjate nešto u fajlu, uvek imajte i radni fajl (.ai). On je najlakši i najbolji za menjanje.
  4. Advanced Properties:
    CSS Properties: Presentation Atrributes ili Style Elements (ako mislite kasnije da menjate CSS)
    Decimal Places: 1 (veća preciznost je neprimetna, a fajl može da naraste primetno)
    Output fewer <tspan> elements (napraviće uredniji kod)
  5. SVG Code… vam daje uvid u kod koji će Illustrator generisati. Koriste ovu opciju da prekontrolišete ili promenite nešto u kodu.

Kako da snimite SVG iz Illustratora i dobijete najmanji fajl bilo da ima ili nema fontova i slika

About Branko Jovanovic

Adobe Certified Expert i Adobe Certified Instructor za: Photoshop, Illustrator, InDesign, Fireworks, Dreamweaver, Contribute i Flash. Zaljubljenik u multimediju uopšte.

Category(s): Illustrator, Mobilni uređaji, obrazovanje, web dizajn
Tags: ,

Ostavite odgovor

Vaša adresa e-pošte neće biti objavljena. Neophodna polja su označena *

Popunite prazno polje * Time limit is exhausted. Please reload CAPTCHA.