Osnovni SVG grafički elementi
Ovde ćemo se upoznati sa osnovnim SVG grafičkim objektima u koje spadaju: pravougaonik (rect), krug (circle), elipsa (ellipse), linija (line i polyline) i poligon (polygon). Ovi oblici se mogu koristiti za neko osnovno crtanje, a glavna upotreba im je za kreiranje šematskih prikaza i grafikona.
Pravougaonik i zaobljeni pravougaonik
Ako želimo da nacrtamo pravougaonik, koristićemo elemenat <rect> koji zadajemo kao jednodelnu oznaku. Za pravougaonik moramo zadati gde mu se nalazi gornji-levi ugao i koje su mu dimenzije. Parametri koje zadajemo su:
- x - pozicija po horizontali (X koordinata)
- y - pozicija po vertikali (Y koordinata)
- width - širina pravougaonika
- height - visina pravougaonika
Dakle, unutar SVG grafike, pravougaonik se zadaje na sledeći način:
<rect x="X_koord" y="Y_koord" width="širina" height="visina" />
Naravno, ako želimo da nacrtamo kvadrat, širina i visina će biti jednake. Ne zaboravite da širina i visina uvek moraju biti pozitivne. Samim tim i početna tačka je uvek gornji-levi ugao pravougaonika.
Postoje i dva dodatna parametra, koje koristimo ako želimo zaobljen pravougaonik:
- rx - zaobljenje po horizontali
- ry - zaobljenje po vertikali
Ako zadamo samo jednu od ove dve vrednosti, podrazumevaće se smetrično zaobljenje, odnosno kao da smo zadali obe vrednosti podjednako. Pošto ovi parametri definišu praktično veličinu "ćoška" koji je zaobljen, ako u rx zadamo vrednost polovine širine (to mu je maksimum), a u ry vrednost polovine visine, praktično ćemo dobiti elipsu.
<rect ... rx="zaobljenje_po_širini" ry="zaobljenje_po_visini" />
Primer: Pravougaonik i zaobljeni pravougaonik
Ovde ćemo nacrtati nekoliko pravougaonika.
- Prvi (plavi) je običan pravougaonik sa koordinatama, širinom i visinom.
- Drugi (zeleni) je pravougaonik kome smo dodali i zaobljenje veličine 5 po horizontali i 2 po vertikali.
- Kod trećeg (crvenog) pravougaonika smo doveli zaobljenje do ekstrema - vidite da smo zadali rx=10 (što je polovina širine) i ry=18 (što je polovina visine), čime smo efektivno dobili toliko zaobljen pravougaonik da on izgleda kao elipsa.
- Četvrti pravougaonik (narandžasti) služi da isprobamo simetrično zaobljenje, pošto smo zadali samo rx, pa se računa i da je ry toliko.
<style>
rect {
stroke: #000;
stroke-width: 0.5;
}
</style>
<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
<rect x="10" y="10" width="50" height="20" fill="#99f" />
<rect x="40" y="20" width="40" height="15" rx="5" ry="2" fill="#9f9" />
<rect x="70" y="5" width="20" height="36" rx="10" ry="18" fill="#f99" />
<rect x="15" y="25" width="20" height="15" rx="4" fill="#fc9" />
</svg>
U primeru smo dodali i parametar fill koji služi za zadavanje boje, dok pomoću CSS-a zadajemo još i crnu liniju oko pravougaonika (koja se inače ne bi videla).
Kružnica i elipsa
Crtanje kruga je verovatno najjednostavnija operacija kada pravimo SVG grafiku. Koristimo elemenat <circle>, a sve što treba je zadati koordinate centra i poluprečnik kružnice. Dakle, parametri su:
- cx - pozicija centra po horizontali (X kooridnata)
- cy - pozicija centra po vertikali (Y kooridnata)
- r - poluprečnik kruga
<circle cx="X_koord" cy="Y_koord" r="poluprečnik" />
Elipsa je jako slična kružnici, s tim što za nju, osim koordinata centra moramo da zadamo i dva poluprečnika - jedan za horizontalu drugi za vertikalu. Neophodno je zadati oba poluprečnika, inače elipsa neće biti nacrtana. Za crtanje elipse koristimo elemenat <ellipse>.
<ellipse cx="X_koord" cy="Y_koord" rx="horiz_poluprečnik" ry="vert_poluprečnik" />
Primer: Kružnica i elipsa
U ovom primeru smo nacrtali dve kružnice i dve elipse, a pošto nema neke specijalne potrebe za dodatnim objašnjenjima, poigrali smo se linijama i bojama.
- Prva kružnica (zelena) je najprostiji primer kružnice, sa centrom u tački (25,20) i poluprečnikom 18. Zadali smo zelenu boju za popunjavanje, a na osnovu CSS pravila kružnica ima i crnu liniju.
- Drugoj (plavoj) kružnici smo zadali providnu boju za popunjavanje, kako bismo nacrtali "praznu" kružnicu. Boju linije smo u ovom slučaju morali da promenimo u parametru style, pošto bi CSS pravilo nadjačalo parametar stroke.
- Treći objekat je crvena elipsa sa isprekidanom linijom, sa centrom u tački (40,40), horizontalnim poluprečnikom 35 i vertikalnim poluprečnikom 8.
- Za drugu elipsu smo isprobali poluprovidnu boju za popunjavanje i promenili joj boju linije.
<style>
circle, ellipse {
stroke: #000;
stroke-width: 0.5;
}
</style>
<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
<circle cx="25" cy="20" r="18" fill="#9f8" />
<circle cx="65" cy="28" r="20" fill="transparent" style="stroke:blue;" />
<ellipse cx="40" cy="40" rx="35" ry="8" fill="#f99" stroke-dasharray="5,5" />
<ellipse cx="80" cy="25" rx="15" ry="20" fill="rgba(255,180,180,0.5)" style="stroke:red;" />
</svg>
Evo kako sve to izgleda...
Linija, izlomljena linija i poligon
Za crtanje obične linije koristimo elemenat <line>. Linija se crta jednostavno "od-do", zadavanjem početne i krajnje tačke. Obe tačke se zadaju koordinatama. Za liniju ne važi parametar fill za bojenje pozadine, već samo parametri iz stroke "porodice" za boju, debljinu, oblik linije i sl. Parametri su:
- x1 - X kooridnata početne tačke
- y1 - Y kooridnata početne tačke
- x2 - X kooridnata krajnje tačke
- y2 - Y kooridnata krajnje tačke
<line x1="X_koord" y1="Y_koord" x2="X_koord" 2y="Y_koord" />
Izlomljena (višestruka) linija je linija koja ima više tačaka. Ovaj grafički objekat se kreira zadavanjem oznake <polyline>. Tačke se zadaju koordinatama, s tim što ne postoje posebni parametri za svaku tačku, već se sve tačke zadaju u obliku liste u parametru points.
Obratite pažnju da se svi parovi koordinata (koji predstavljaju pojedine tačke) odvajaju razmakom. Svaka pojedinačna tačka je data u obliku X,Y (sa zarezom koji odvaja koordinate).
<polyline points="x1,y1 x2,y2 x3,y3 ..." />
Poligon je praktično ista stvar kao i višestruka linija (čak ima i isti parametar points), s tim što se kod poligona uvek docrtava linija koja povezuje poslednju sa prvom tačkom, pa je tako oblik uvek zatvoren. Ako ne zadamo iscrtavanje linije, već samo popunjavanje bojom, potpuno je svejedno da li crtamo poligon ili višestruku liniju. Za poligon koristimo elemenat <polygon>.
<polygon points="x1,y1 x2,y2 x3,y3 ..." />
Primer: Linije i poligoni
U prvom primeru ćemo nacrtati par linija. Prva linija je nacrtana od tačke (30,45) do tačke (15,5). Zadali smo boju linije sa stroke i debljinu linije sa stroke-width.
Za drugu liniju smo debljinu i boju zadali preko CSS stila, a uzorak za isprekidanu liniju smo zadali pomoću parametra stroke-dasharray.
<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
<line x1="30" y1="45" x2="15" y2="5" stroke="#000" stroke-width="0.5" />
<line x2="90" y2="28" x1="10" y1="20" style="stroke:#93b; stroke-width:3;" stroke-dasharray="5,2" />
</svg>
Evo kako te dve linije izgledaju:
U poslednjem primeru ćemo nacrtati jednu izlomljenu liniju i poligon. Izlomljena linija je predstavljena sa 4 tačke. Zadali smo i boju za popunjavanje (žutu) kako bismo videli šta se dešava u tom slučaju. Kao što vidimo, oblik ostaje otvoren, iako je popunjen bojom.
Poligon je takođe dat sa 4 tačke, s tim što se poslednja linija (između poslednje i prve tačke) povlači automatski, tako da je oblik uvek zatvoren.
<style>
polyline, polygon {
stroke: #000;
stroke-width: 0.5;
}
</style>
<svg width="400" height="200" viewbox="0 0 100 50" preserveAspectRatio="none">
<polyline points="15,5 5,38 95,45 90,30" fill="#ffc" />
<polygon points="40,10 15,45 85,35 50,30" fill="#fcf" />
</svg>
Inače, tip linije je naveden u CSS pravilu, tako da nismo morali eksplicitno da ga zadajemo.
- Scalable Vector Graphics (SVG) 1.1 (Second Edition)
- J.D. Eisenberg, A. Bellamy-Royds (2015): SVG Essentials, O'Reilly, Sebastopol