Dalam HTML, selain menggunakan gambar atau bitmap, kita bisa menampilkan garis, persegi dan bentuk-bentuk tertentu dengan tag <SVG>. SVG adalah kepanjangan dari Scalable Graphic Vector.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<svg height="480" width="640">
<line x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<rect x="105" width="90" height="200" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
<rect x="205" y="20" rx="20" ry="20" width="140" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="50" cy="210" r="40" stroke="black" stroke-width="3" fill="red" />
<ellipse cx="200" cy="260" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">SVG</text>
</svg>
</BODY>
</HTML>
Posisi dan Ukuran
SVG terdiri dari sekumpulan objek yang ditentukan posisi dan warnanya dengan masing-masing atributnya. Semua objek ditulis sebagai tag. Objek-objek tersebut diapit dengan tag <svg> dan tag penutupnya </svg>.
Penempatan dari tiap objek menggunakan koordinat yang relatif dari titik kiri atas tempat elemen SVG. Titik kiri teratas dari SVG adalah titik {0, 0}. Koordinat x bertambah dari kiri ke kanan sama dengan koordinat kartesius yang pernah kalian di sekolah. Ini berbeda dengan koordinat y yang bertambah dari atas ke bawah.
Elemen SVG adalah kontainer dari objek-objek di dalamnya. Semua objek akan berpindah dengan jarak yang sama dari posisi "kontainernya" jika lokasi elemen SVG diubah. Jika panjang atau tinggi kontainer lebih kecil dari koordinat yang dibutuhkan isinya, maka isinya akan terpotong sehingga tidak terlihat semuanya. Kalian akan bisa mengubah atribut width dan height untuk menentukan luas kontainer SVG.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<h3>SVG</h3>
<svg height="480" width="240">
<line x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<rect x="105" width="90" height="200" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
<rect x="205" y="20" rx="20" ry="20" width="140" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="50" cy="210" r="40" stroke="black" stroke-width="3" fill="red" />
<ellipse cx="200" cy="260" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">SVG</text>
</svg>
</BODY>
</HTML>
Contoh di atas sudah menyertakan objek selain polygon, polyline, dan path. Nama tag untuk objek-objek SVG yang sudah ada pada contoh di atas dan juga objek lainnya bisa kalian lihat di bawah ini.
- <line> : garis
- <rect> : bujur sangkar atau persegi panjang.
- <circle> : lingkaran
- <ellipse> : lonjong
- <text> : tulisan
- <polyline> : Rangkaian garis lurus (terbuka)
- <polygon> : Segi-N (tertutup)
- <path> : Rangkaian garis lurus dan melengkung.
Untuk mewarnai objek SVG, kalian perlu mempelajari penggunaan CSS dan atribut style. Properti khusus untuk pewarnaan dan lebar garis yaitu stroke, fill, dan stroke-width. Warnanya bisa menggunakan nama konstanta warna atau warna rgb dengan nilai hexadesimal.
Atribut
SVG bisa menggunakan atribut atau CSS untuk menentukan letak tiap objek yang diapit tag <SVG>. Atribut yang bisa digunakan selain untuk objek dalam tag svg, yaitu :
- cx : koordinat x dari pusat lingkaran
- cy : koordinat y dari pusat lingkaran
- x : Posisi x
- y : Posisi y
- rx : lengkungan bujur sangkar;
- ry : lengkungan tepi bujur sangkar;
- stroke : Warna garis
- fill : Warna isian
- width : lebar objek
- height : Tinggi objek