HTML5 SVG

Belajar dan memahami cara menggunakan elemen SVG untuk membuat grafik vektor di HTML5, serta berbagai elemen dan fungsinya dalam web development.

SVG (Scalable Vector Graphics) adalah format gambar berbasis XML yang digunakan untuk menggambarkan grafik dua dimensi dengan kualitas tinggi. SVG memungkinkan gambar untuk diperbesar atau diperkecil tanpa kehilangan kualitas. SVG sangat berguna untuk membuat grafik vektor, diagram, ikon, dan animasi di halaman web.

Pengertian SVG

SVG adalah standar yang digunakan untuk menggambarkan gambar vektor dua dimensi di halaman web. Berbeda dengan format gambar raster seperti JPG atau PNG, SVG tidak bergantung pada piksel, sehingga gambar SVG dapat diperbesar tanpa kehilangan ketajaman atau kualitas. SVG menggunakan XML untuk mendefinisikan elemen-elemen grafis seperti garis, lingkaran, persegi panjang, dan teks.

Struktur Dasar SVG

Berikut adalah contoh struktur dasar dari elemen SVG:


<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Penjelasan:

  • <svg> : Elemen utama untuk mendefinisikan ruang gambar SVG, dengan atribut width dan height untuk menentukan ukuran area gambar.
  • <circle> : Digunakan untuk menggambar lingkaran, dengan atribut cx dan cy untuk menentukan posisi tengah lingkaran, r untuk menentukan radius, serta stroke, stroke-width, dan fill untuk menentukan warna tepi, lebar tepi, dan warna pengisian.

Elemen SVG yang Sering Digunakan

1. <circle> (Lingkaran)

Elemen <circle> digunakan untuk menggambar lingkaran di dalam gambar SVG. Atribut utama yang digunakan adalah cx, cy (koordinat pusat lingkaran), dan r (radius lingkaran).


<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>

2. <rect> (Persegi Panjang)

Elemen <rect> digunakan untuk menggambar persegi panjang atau kotak. Atribut pentingnya adalah x, y (posisi sudut kiri atas), width, dan height untuk menentukan lebar dan tinggi kotak.


<svg width="200" height="200">
    <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="3" fill="green" />
</svg>

3. <line> (Garis)

Elemen <line> digunakan untuk menggambar garis lurus. Anda dapat mengatur posisi titik awal dan akhir garis dengan atribut x1, y1, x2, dan y2.


<svg width="200" height="200">
    <line x1="0" y1="0" x2="200" y2="200" stroke="purple" stroke-width="2" />
</svg>

4. <text> (Teks)

Elemen <text> digunakan untuk menampilkan teks di dalam gambar SVG. Anda dapat menyesuaikan posisi teks dengan atribut x dan y.


<svg width="200" height="100">
    <text x="10" y="40" font-family="Arial" font-size="35" fill="black">SVG Text!</text>
</svg>

Animasi dengan SVG

Salah satu keunggulan SVG adalah kemampuannya untuk berinteraksi dan dianimasikan. Dengan menggunakan elemen <animate>, Anda bisa menganimasikan perubahan atribut elemen SVG, seperti perubahan warna, posisi, dan ukuran.


<svg width="200" height="200">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
        <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>

Keuntungan Menggunakan SVG

  • Skalabilitas: SVG adalah gambar vektor, yang berarti dapat diperbesar atau diperkecil tanpa kehilangan kualitas.
  • Interaktivitas: SVG mendukung interaksi dan animasi, memungkinkan Anda membuat grafik dinamis.
  • Ringan: File SVG biasanya lebih kecil dibandingkan dengan file gambar raster, sehingga lebih efisien untuk digunakan di web.
  • Dukungan yang Luas: SVG didukung oleh hampir semua browser modern, membuatnya kompatibel dengan berbagai platform.

Kesimpulan

SVG adalah alat yang sangat berguna untuk membuat grafik vektor di web. Dengan menggunakan SVG, Anda dapat menggambar bentuk-bentuk sederhana seperti lingkaran, persegi panjang, dan garis, serta teks yang dapat diperkecil atau diperbesar tanpa kehilangan kualitas. Selain itu, SVG mendukung animasi dan interaktivitas yang membuatnya sangat fleksibel untuk digunakan di berbagai aplikasi web.