Jika kalian sudah mempelajari tag SVG kalian perlu mempelajari beberapa objek yang bisa ditambahkan dalam tag SVG. Beberapa di antaranya adalah path, polygon dan polyline. Tag-tag yang akan saya bahas kali ini digunakan untuk menghubungkan beberapa garis. Polygon dan polyline bisa digunakan untuk menghubungkan garis lurus. Jika kalian ingin menambahkan lengkungan, kalian bisa menggunakan tag <path>. Semua tag tersebut perlu diapit tag <svg>.
Polyline
Jika kalian ingin menggambar beberapa garis yang saling terhubung, kalian bisa menggunakan tag <SVG> dan tag <polyline>. Tag polyline bisa kalian gunakan di dalam tag SVG. Polyline menggunakan atribut "points" untuk menentukan titik-titik yang digunakan untuk membuat garis.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<svg height="480" width="640">
<polyline points="80,0 15,200 16,11" stroke="rgb(128, 128, 256)" style="fill:none;stroke-width:2" />
</svg>
</BODY>
</HTML>
Contoh di atas menggunakan polyline. Kalau diperhatikan, akan terlihat bahwa titik awal dan titik akhir tidak terhubung. Walaupun digunakan untuk membuat garis, polyline bisa diberi warna dengan atribut atau properti fill.
Path bisa menggunakan huruf-huruf berikut ini sebagai tanda bentuk path yang digunakan.
Untuk A(arc) dalam path, polanya lebih panjang, tapi sebenarnya cukup mudah dipahami, walaupun mungkin akan sulit diingat. Polanya adalah "A radius-x radius-y rotasi large-arc-flag sweep-flag posisi-x posisi-y". Arc akan memutar dari titik awal ke arah sesuai nilai rotasi, large-arc-flag, dan sweep-flag.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<svg height="480" width="640">
<polyline points="80,0 15,200 16,11" stroke="rgb(128, 128, 256)" style="stroke-width:2" fill="yellow"/>
</svg>
</BODY>
</HTML>Polygon
Pada polygon, titik awal dan titik akhir akan selalu dihubungkan. Polygon akan secara otomatis menyambungkan titik awal dan titik akhir sehinggga akan membentuk bangun tertutup. Sama seperti polyline, polygon menggunakan properti points untuk menentukan titik-titiknya. Polygon juga bisa diberi fill dan stroke.<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<svg height="480" width="640">
<polygon points="80,0 15,200 16,11" stroke="rgb(128, 128, 256)" style="stroke-width:2" fill="yellow"/>
</svg>
</BODY>
</HTML>Untuk polygon, ada aturan tambahan seandainya ada garis yang saling berpotongan sehingga menghasilkan ruang kosong. Aturan tersebut dituliskan dalam properti (css) fill-rule. Nilainya bisa berupa nonzero atau evenodd.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:gold;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
<polygon points="300,10 240,198 390,78 210,78 360,198" style="fill:gold;stroke:yellow;stroke-width:5;fill-rule:evenodd;" />
</svg>
</BODY>
</HTML>Perbedaan dari evenodd dan nonzero dalam properti fill-rule telihat cukup jelas. Yang kiri menggunakan nonzero, dan yang kanan menggunakan evenodd.
Path
Tag yang terumit dalam SVG adalah tag Path. Path menggunakan sekumpulan titik yang terhubung seperti polyline dan polygon. Tapi, tidak hanya itu. Path bisa menampilkan pola yang lebih detail dan rumit dengan lengkungan dan garis. Jika dalam polygon dan polyline titik-titiknya ditentukan dengan atribut points, atribut yang digunakan dalam path adalah "d". Selain itu, fill-rule juga bisa digunakan dalam path.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<svg height="210" width="500">
<path d="M100 10 L40 198 L 190,78 L 10,78 L160,198 Z" style="fill:gold;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
<path d="M300 10 L240 198 L390 78 L210 78 L360 198 Z" style="fill:gold;stroke:yellow;stroke-width:5;fill-rule:evenodd;" />
</svg>
</BODY>
</HTML>M = moveto (Pindah ke)
L = lineto (buat garis ke)
H = horizontal lineto
V = vertical lineto
C = curveto
S = curveto (halus)
Q = quadratic Bézier curve
T = quadratic Bézier curveto (halus)
A = Lengkungan ellips
Z = Akhir dari path
Hati-hati! perbedaan besar dan kecilnya huruf akan berpengaruh pada hasilnya. Huruf besar digunakan untuk menjukkan posisi absolut, sedangkan huruf kecil digunakan untuk menunjukkan posisi relatif. C, S, Q, dan T membutuhkan 3 titik untuk menunjukkan bentuk lengkungan yang akan dibuat.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
<svg height="210" width="500">
<path d="M 10 150 C50 200 150 200 200 150 L200 50 T150 20 50 20 10 50 Z" style="fill:teal;stroke:yellow;stroke-width:4px" />
</svg>
</BODY>
</HTML><HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
<svg height="400" width="500">
<g fill="none" stroke-width="5">
<path d="M250,100 A120,80 0 0,0 250,200" stroke="red" />
<path d="M250,100 A120,80 0 1,1 250,200" stroke="teal" />
<path d="M250,100 A120,80 0 1,0 250,200" stroke="gold" />
<path d="M250,100 A120,80 0 0,1 250,200" stroke="green" />
</g>
</svg>
</BODY>
</HTML>
Pada contoh-contoh sebelumnya, kita memberikan warna dengan atribut atau style satu per satu pada masing-masing tag dalam SVG. Selain dengan cara tersebut, untuk memberi pengaturan pada beberapa objek sekaligus dalam SVG, kita bisa menggunakan tag <g> yang mengapit objek-objek yang akan kita warnai atau berikan style seperti pada contoh di atas.