SVG boje i linije

Skoro svi SVG grafički objekti (osnovni oblici, linije, tekst, krivulje...) imaju boju za popunjavanje i liniju kojom su uokvireni. Naravno, ne važe baš svi parametri za sve grafičke elemente (npr. obična linija nema boju za popunjavanje).

Boja i karakteritike okvirne linije mogu se zadati na dva načina - parametrima unutar SVG elemenata i putem CSS formatiranja. U oba slučaja, koriste se isti parametri/atributi:

fill	Boja popunjavanja
fill-opacity	Kontrola providnosti boje popunjavanja
stroke	Boja linije
stroke-opacity	Kontrola providnosti boje linije
stroke-width	Debljina linije
stroke-dasharray	Šablon isprekidane linije
stroke-dashoffset	Pozicija od koje počinje šablon
stroke-linecap	Kako su uobličeni krajevi linije
stroke-linejoin	Oblik uglova koji zaklapaju dve linije
stroke-miterlimit	Moguća dužina "čoška" kod oštrog ugla između linija

Boja za popunjavanje

Parametri za boju kojom se popunjava površina su:

fill - boja površine
fill-opacity - poluprovidnost površine

Boja za popunjavanje se može zadati svakom elementu koji ima površinu koja se može popuniti bojom. Zadaje se kao CSS boja preko parametra fill, koji se navodi unutar SVG oznake.

Ako želimo da se objekat ne popunjava bojom, jednostavno ćemo zadati "providnu" boju - transparent.

<objekat fill="CSS_boja" />

Iako kolorna vrednost može biti zadata i kao rgba() čime određujemo i boju i poluprovidnost, postoji i poseban parametar fill-opacity kojim definišemo samo nivo providnosti popunjavanja. Ovom parametru zadajemo numeričku vrednost između 0 (potpuno providno) i 1 (potpuno vidljivo).

<objekat fill-opacity="0..1" />

Okvirna linija

Za okvirnu liniju možemo podesiti više karakteristika. Po defaultu, boja linije je nepostojeća (none), a debljina joj je 1. Linija se može prilično precizno podesiti, čemu nam služe sledeći parametri:

stroke - boja linije, kao CSS kolorna vrednost
stroke-opacity - poluprovidnost linije, kao numerik od 0 do 1
stroke-width - debljina linije, kao numerik

Boju linije zadajemo na isti način kao i boju za popunjavanje, samo preko parametra stroke.

<objekat stroke="CSS_boja" />

Isto kao i za popunjavanje bojom, možemo koristiti parametar stroke-opacity kojim zadajemo nivo providnosti popunjavanja. Vrednost parametra je numerik između 0 (potpuno providno) i 1 (potpuno vidljivo).

<objekat stroke-opacity="0..1" />

Debljinu linije zadajemo kao običan numerik preko parametra stroke-width. Ne zaboravite - prikazana debljina linije nije apsolutna, već zavisi od odnosa viewboxa i viewporta. Drugim rečima, zadata debljina 0.1 može predstavljati jako tanku liniju ako prikazujemo npr. kružnicu poluprečnika 500, ili veoma debelu liniju na kružnici poluprečnika 0.25.

<objekat stroke-width="debljina" />

Promena boje, debljine i providnosti linije

Isprekidane linije

stroke-dasharray - šablon za isprekidanu liniju, kao lista numerika
stroke-dashoffset - pomeranje početka šablona, kao numerik

Svaka linija je po defaultu puna, ali uvek možemo zadati isprekidani šablon, pomoću parametra stroke-dasharray. Ovim šablonom možemo definisati dužine crtica i praznina. Šablon se zadaje kao lista numeričkih vrednosti odvojenih zarezima (ili razmacima), i očekuje se da zadamo bar dve vrednosti (ako ga uopšte zadajemo). Prva vrednost označava dužinu crtice, druga dužinu praznine. Onda možemo zadati još jedan par vrednosti koje označavaju dužinu druge crtice i druge praznine, i tako dalje. Kada se "potroši" to što smo zadali, šablon kreće da se ponavlja.

<objekat stroke-dasharray="crtica 1, praznina 1, crtica 2, praznina 2, ..." />

Može se desiti da imamo specifičnu potrebu da zadati šablon ne počne od početka linije, nego sa "zadrškom". Tako možemo definisati veličinu otklona šablona, pomoću parametra stroke-dashoffset. Ovaj "pomeraj" se zadaje kao jedan numerik. Pazite - pozitivna vrednost će "vući" šablon pre početka linije, dok će negativna "gurati" šablon u liniju.

<objekat stroke-dashoffset="pomeraj" />

Šablon isprekidane linije i šablon isprekidane linije sa zadatim otklonom

Krajevi i uglovi linija

stroke-linecap - oblik krajeva linije, kao jedna od vrednosti: butt, square, round, inherit
stroke-linejoin - oblik uglova koji zaklapaju dve linije, kao jedna od vrednosti: miter, round, bevel, inherit
stroke-miterlimit - moguća dužina oštrog ugla pri zadatom obliku miter, kao numerik

Kod tanke linije nije nam zaista bitno kako izgledaju njeni krajevi, ali ako je linija "deblja", i te kako nas interesuje da li je "četvrtasta" ili "zaobljena". Ovo kontrolišemo parametrom stroke-linecap. Inače oblik krajeva linije se odnosi i na crtice, kada je linija isprekidana. Tako možemo da kontrolišemo da li će "tačkasta" linija biti predstavljena kvadratićima ili kružićima.

<objekat stroke-linecap="oblik_linije" />

Moguće vrednosti za ovaj parametar su:

butt - sečena linija (četvrtasto)
square - četvrtasti krajevi linija
round - zaobljeni krajevi linija
inherit - oblik linije se preuzima od nadređenog elementa

Primeri za oblik kraja linije (butt, square, round) i primer kako izgleda isprekidana linija sa opcijom round

Osim toga, moguće je podesiti i tip spoja (tj. kako se iscrtava ugao sa spoljne strane) kod izlomljene linije ili poligona, koristeći parametar stroke-linejoin.

<objekat stroke-linejoin="tip_spoja" />

Moguće vrednosti za ovaj parametar su:

miter - spoj linija je oštar
round - spoj linija je zaobljen
bevel - spoj linija je sasečen
inherit - oblik spoja se preuzima od nadređenog elementa

Primeri za iscrtavanje uglova (miter, round i bevel)

Opcija miter koja bi trebala da predstavi oštar ugao, će u nekim situacijama da proizvede zatupljen "ćošak" (kao da je zadato bevel). Da li će ugao biti zaista nacrtan kao oštar ili će biti sasečen, zavisi od odnosa debljine linije i dužine do vrha oštrog ugla. Ovo se podešava parametrom stroke-miterlimit koji praktično definiše koliko dugačak može biti nacrtani "ćošak" - što je vrednost veća, to će nacrtani oštar ugao moći da bude duži. U suprotnom će biti sasečen.

<objekat stroke-miterlimit="numerik" />

U primeru koji sledi smo predstavili sve parametre koje smo opisali. Pokušali smo da razjasnimo sve što bi moglo da vam izaziva nedoumice. Koristili smo kružnice i linije koje spadaju u osnovne grafičke elemente SVG-a.

Primer: SVG boje i linije

U prvom primeru prikazujemo kako sve možemo da zadamo boju SVG elementa. Primetićete da su vrednosti za boje potpuno iste kao one koje zadajemo u CSS-u.


<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
  <circle cx="15" cy="15" r="12"   fill="red"  />
  <circle cx="25" cy="25" r="15"   fill="#c5f"  />
  <circle cx="40" cy="28" r="18"   fill="rgba(130,250,100, 0.5)"  />
  <circle cx="60" cy="32" r="15"   fill="rgb(130,250,100)" fill-opacity="0.5"  />
  <circle cx="80" cy="20" r="12"   fill="#aaf" stroke="black" stroke-width="2" />
</svg>

Prvi krug smo obojili korišćenjem naziva za boju "red". Kod drugog smo koristili heksadekadni kod (#c5f). Za treću kružnicu smo iskoristili funkciju rgba(), kojom smo istovremeno zadali i boju i providnost.

To isto smo postigli sa četvrtom kružnicom, gde smo iskoristili funkciju rgb() za boju, a providnost smo zadali parametrom fill-opacity.

Verovatno ste primetili da po defaultu objekti nemaju okvirnu liniju. Zato smo za poslednju kružnicu zadali i liniju parametrima stroke i stroke-width.

Parametri linije

U sledećem primeru ćemo se malo poigrati sa parametrima za podešavanje izgleda linije. Opet ćemo koristiti kružnice, kao najjednostavnije SVG objekte.

Da bi primer bio što čistiji, preko CSS-a smo zadali da boja kruga bude siva i poluprovidna. Tako nećemo opterećivati naše kružnice bojom za popunjavanje.


<style>
circle {
  fill: #666;
  fill-opacity: 0.4;
}
</style>

<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
  <circle cx="15" cy="15" r="8"   stroke="red" stroke-width="0.6" />
  <circle cx="25" cy="25" r="10"   stroke="purple" stroke-width="2" stroke-opacity="0.3" />
  <circle cx="60" cy="27" r="12"   stroke="#228" stroke-width="1.5" 
    stroke-dasharray="3,1" />
  <circle cx="75" cy="30" r="15"   stroke="#55c" stroke-width="2.5" 
    stroke-dasharray="0 5" stroke-linecap="round" />
</svg>

Prvoj kružnici smo zadali crvenu boju i debljinu linije 0.6, pomoću parametara stroke i stroke-width. Drugoj kružnici smo isto tako zadali ljubičastu boju i debljinu linije 2, dok smo definisali i poluprovidnost linije na 0.3 pomoću parametra stroke-opacity.

Trećoj kružnici smo zadali boju linije preko heksadekadnog koda i debljinu linije 1.5, a zadali smo i šablon za isprekidanu liniju 3,1 pomoću parametra stroke-dasharray. Slično smo uradili i sa poslednjom kružnicom, s tim što smo zaoblili krajeve linija na round parametrom stroke-linecap.

Ovde ćemo videti kako izgleda zadavanje šablona za isprekidanu liniju.


<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
  <line x1="20" y1="10" x2="80" y2="40"   stroke="#000" stroke-width="0.5" />
  <line x1="5" y1="20" x2="95" y2="30"   stroke="#000" stroke-width="0.5" />
  
  <line x1="20" y1="10" x2="80" y2="40"   stroke="#64a" stroke-width="4" 
    stroke-dasharray="5,2" stroke-opacity="0.5" />
  <line x1="5" y1="20" x2="95" y2="30"   stroke="#a46" stroke-width="4" 
    stroke-dasharray="10 1 2 1" stroke-dashoffset="10" />
</svg>

Prvo smo nacrtali dve tanke crne kontrolne linije, da bismo preko njih dodali dve deblje linije na kojima eksperimentišemo sa "isprekidanim" šablonima.

Kod prve linije smo zadali šablon "crta dužine 5, praznina dužine 2" parametrom stroke-dasharray i postavili poluprovidnost na 50%.
Kod druge linije smo zadali malo komplikovaniji šablon "crta 10, praznina 1, crta 2, praznina 1", sa definisanim pomerajem stroke-dashoffset.

Da još malo pogledamo kako funkcioniše zadavanje krajeva linije pomoću parametra stroke-linecap i kakve su posledice kada zadamo isprekidanu liniju. Prve tri linije imaju zadat isti dasharray šablon, ali primetićete da se na rezultatu prilično razlikuju.


<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
  
  <line x1="10" y1="5" x2="90" y2="25"   stroke="#a8d" stroke-width="4" 
    stroke-linecap="butt" stroke-dasharray="5 6" />

  <line x1="10" y1="20" x2="90" y2="15"   stroke="#d8a" stroke-width="4" 
    stroke-linecap="square" stroke-dasharray="5 6" />

  <line x1="10" y1="35" x2="90" y2="40"   stroke="#8da" stroke-width="4" 
    stroke-linecap="round" stroke-dasharray="5 6" />

  <line x1="10" y1="45" x2="90" y2="30"   stroke="#f88" stroke-width="4" 
    stroke-linecap="round" stroke-dasharray="0 6" />
    
  <!-- KONTROLNE LINIJE -->
  <line x1="10" y1="5" x2="90" y2="25"   class="kontrolna" />
  <line x1="10" y1="20" x2="90" y2="15"  class="kontrolna" />
  <line x1="10" y1="35" x2="90" y2="40"  class="kontrolna" />
  <line x1="10" y1="45" x2="90" y2="30"  class="kontrolna" />
</svg>

Prva linija ima zadatu default vrednost butt, i tada šablon izgleda baš kako je zadato. Na kontrolnoj liniji (crnoj) vidimo da linija zaista počinje i završava se na zadatim koordinatama.

Međutim, za sledeće dve linije su zadati oblici square i round, što znači da će krajevi linije (i crtica iz kojih se isprekidana linija sastoji) biti uobličeni u "četvrtast" i "zaobljen" oblik. Kao što vidite, ovo uobličavanje zahteva prostor na početku i kraju linije, tako da su crtice u stvari duže na svakom kraju za po polovinu debljine linije.

Ovo nas dovodi do poslednje linije - ako želimo tačkastu liniju, zadaćemo šablon isprekidane linije sa dužinom crtice 0 i linecap round ili square. U suprotnom, sa opcijom butt, zadajemo dužinu crtice jednaku njenoj debljini.

Konačno, ovde imamo primer kako možemo definisati oblik uglova koje zaklapa izlomljena linija ili poligon. Ovde nas interesuje funkcionisanje parametara stroke-linejoin i stroke-miterlimit.


<style>
polyline, rect { fill: none; }
</style>

<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
  <polyline points="6,40 25,5 25,40 70,5"   stroke="#9c6" stroke-width="5" 
    stroke-linejoin="miter" />

  <polyline points="10,40 50,5 32,42 95,10"   stroke="#8bf" stroke-width="5" 
    stroke-linejoin="miter" stroke-miterlimit="10" />

  <rect x="60" y="10" width="25" height="25"   stroke="#f42" stroke-width="5" 
    stroke-linejoin="round" />

  <rect x="70" y="20" width="25" height="25"   stroke="#a26" stroke-width="5" 
    stroke-linejoin="bevel" />

  <!-- KONTROLNE LINIJE -->
  <polyline points="6,40 25,5 25,40 70,5"   stroke="#000" stroke-width="0.2" />
  <polyline points="10,40 50,5 32,42 95,10"   stroke="#000" stroke-width="0.2" />
</svg>

Evo i rezultata:

Zelena linija ima zadat oblik uglova miter, što zanči da se uglovi prikazuju kao oštri. Međutim, "kupica" prvog ugla bi bila suviše dugačka, pa je tako taj "ćošak" sasečen, kao da je zadato bevel.
Sa druge strane, plava linija ima povećan miterlimit, i uglovi su nacrtani kako smo očekivali.
Za crveni kvadrat zadat je zaobljen oblik uglova round.
Ljubičasti kvadrat ima "sasečen" oblik uglova bevel.

Promena boja i linija putem CSS-a

Svaki grafički objekat može biti obojen i oivičen pomoću CSS-a. Taj način bi nam možda bio i praktičniji, pošto možemo definisati čitave stilove i primenjivati ih putem klasa na različite objekte. CSS atributi i njihove vrednosti su potpuno isti kao parametri koje smo upravo naučili:

fill - boja popunjavanja, vrednost je CSS kod za boju
stroke - boja linije, vrednost je CSS kod za boju
stroke-width - debljina linije, vrednost je numerik ili metrika
...

Zahvaljujući CSS-u naš SVG može biti mnogo čitljiviji, kraći i lakši za "održavanje". Dakle, ono što smo pisali kao:

<objekat param1="vrednost" param2="vrednost" param3="vrednost" ... />

Možemo pisati i kao:

<style>
  .klasa {
    param1: vrednost;
    param2: vrednost;
    param3: vrednost;
    ...
  }
</style>

...

<objekat class="klasa" />

Naravno, ako je frka, možemo uvesti CSS formatiranje i u obliku inline stila:

<objekat style="param1:vrednost; param2:vrednost; param3:vrednost; ..." />

Primer: CSS formatiranje SVG-a

U ovom primeru možemo videti kako zadajemo parametre za boju i liniju putem CSS selektora i to najpre putem selektora elementa (circle i rect), a potom i korišćenjem selektora klase. Između ostalog, isprobali smo i zadavanje boje putem inline CSS-a.


<style>
  circle, rect {
    fill: #45c;
    fill-opacity: 0.6;
    stroke: #429;
    stroke-width: 2;
  }
  .isprekidano {
    stroke: black;
    stroke-dasharray: 0 3;
    stroke-linecap: round;
  }
</style>

<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
  <circle cx="15" cy="15" r="12"   fill="red" />
  <rect x="10" y="12" width="40" height="20" />
  <circle cx="60" cy="32" r="15" class="isprekidano" />
  <circle cx="80" cy="20" r="12"   style="fill:#fca;" />
</svg>

Pogledajte rezultat:

Prvom krugu smo zadali crvenu boju putem fill partametra, ali on nije obojen crveno, već plavo pošto smo u CSS-u za sve krugove i pravougaonike (lista selektora circle, rect) zadali boju #45c, a svaki CSS nadjačava SVG parametre.
Posle kruga, nacrtali smo pravougaonik na kome se primenjuje isti CSS na osnovu selektora elementa.
Trećem objektu (krugu) smo zadali isprekidanu liniju korišćenjem klase isprekidano, preko parametra class. Ovako pripremljen CSS možemo zadati bilo kom elementu.
Na kraj, imamo još jedan krug na kome smo isprobali bojenje korišćenjem inline CSS-a, korišćenjem parametra style.

Scalable Vector Graphics (SVG) 1.1 (Second Edition)
J.D. Eisenberg, A. Bellamy-Royds (2015): SVG Essentials, O'Reilly, Sebastopol

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.

Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.