Fungsi SVG pada HTML

SVG merupakan akronim dari scalable vector graphics yang mendefinisikan grafik berbasis vector dalam format XML. SVG grafik tidak kehilangan kualitas apapun jika ukurannya diperbesar (zoom) ataupun dilakukan pelenturan (resized) dan setiap elemen dan setiap atribut pada SVG file dapat dianimasikan.

Sebelum mempelajari materi tentang Fungsi SVG pada HTML, terlebih dahulu pelajari materi tentang: Membuat Hyperlink pada HTML, Tag Usang Deprecated pada HTML, dan Daftar URL Encoding pada HTML.

SVG (Scalable Vector Graphics) merupakan format grafis yang memungkinkan pembuatan gambar berbasis vektor dengan XML (eXtensible Markup Language). SVG memiliki keunggulan dalam skala yang baik tanpa kehilangan kualitas, ideal untuk pengembangan web. Di dalam HTML, SVG digunakan untuk membuat grafik vektor yang dapat diubah ukurannya dan disesuaikan dengan kebutuhan halaman web.

Scalable Vector Graphics (SVG) merupakan format grafis berbasis vektor yang terintegrasi dalam HTML, memberikan serangkaian keunggulan yang penting dalam pengembangan web. Berbeda dengan format gambar lainnya seperti JPEG atau PNG yang berbasis raster, SVG menggunakan koordinat matematika untuk menggambarkan gambar. Inilah beberapa keunggulan utama SVG dalam HTML:

• Resolusi Bebas: SVG mempertahankan kejernihan gambar tanpa memperhatikan skala layar. Hal ini berarti gambar akan tetap tajam dan jelas, tidak peduli seberapa besar atau kecilnya ukurannya, berbeda dengan format gambar raster yang bisa terlihat buram jika diperbesar.
• Skalabilitas Tanpa Kehilangan Kualitas: Salah satu keunggulan utama SVG adalah kemampuannya untuk diubah ukurannya tanpa kehilangan kualitas. Ini sangat penting dalam desain responsif, memungkinkan gambar untuk menyesuaikan diri dengan berbagai ukuran layar dan perangkat dengan tetap mempertahankan ketajaman dan ketelitiannya.
• Ringan dan Efisien: Berkat format XML, SVG memiliki ukuran file yang relatif kecil, memungkinkan pemuatan halaman web yang lebih cepat. Ini berarti dapat meningkatkan kinerja situs dan mengurangi waktu pemuatan halaman bagi pengguna.
• SEO-Friendly: Elemen SVG dapat diindeks oleh mesin pencari, memberikan keuntungan dalam hal optimisasi mesin pencari (SEO). Ini berarti konten visual yang dibuat dengan SVG dapat membantu meningkatkan visibilitas halaman web pada hasil pencarian.
• Interaktif dan Animasi: SVG memungkinkan untuk menambahkan interaktivitas dan animasi dengan mudah menggunakan JavaScript atau CSS. Dengan kemampuan ini, pengembang web dapat membuat elemen grafis yang responsif dan menarik bagi pengguna.
• Kompatibilitas Cross-Browser: SVG mendukung oleh sebagian besar peramban web utama seperti Chrome, Firefox, Safari, dan Edge. Ini memastikan konsistensi tampilan dan fungsionalitas SVG di berbagai platform.
• Dapat Dibuat dan Dimanipulasi dengan Mudah: SVG adalah format teks berbasis XML, yang membuatnya mudah dibaca, dimengerti, dan diedit. Hal ini memungkinkan pengembang untuk membuat atau memanipulasi grafik dengan mudah menggunakan kode.

Dengan kombinasi keunggulan-keunggulan di atas, SVG menjadi pilihan yang sangat populer dalam pembuatan grafis di halaman web. Kemampuannya untuk memberikan gambar berkualitas tinggi, ringan, dan dapat diubah ukurannya tanpa batas menjadikannya solusi yang optimal untuk mendukung desain responsif dan pengalaman pengguna yang lebih baik dalam pengembangan web modern.

Perbedaan antara SVG HTML dan HTML Canvas:

• SVG adalah sebuah bahasa pemrograman untuk mendeskripsikan 2D dalam XML, sedangkan Canvas menggambar grafik dalam bentuk 2D dengan menggunakan JavaScript.
• Jika atribut dari objek SVG berubah, maka browser secara otomatis melakukan rendering ulang bentuk grafik, sedangkan Canvas melakukan rendering pixel oleh pixel.in canvas.
• Resolusi SVG berdiri sendiri (independent), sedangkan CANVAS tidak memiliki dukungan terhadap penanganan tersebut.

Baca Juga:

• Penggunaan Canvas pada HTML
• Elemen Kode Komputer HTML dan Fungsinya
• Entitas Reserved HTML dan Fungsinya
• Fitur Unggulan pada HTML5

Contoh: Menggambar Sebuah Lingkaran SVG pada HTML.

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

width="200" 

height="200">

 

<circle 

cx="80" 

cy="80" 

r="50"

stroke="black" 

stroke-width="2" 

fill="grey" />

 

</svg>

 

</body>

 

</html>

Output:

Contoh: Menggambar Sebuah Persegi Panjang SVG pada HTML.

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

width="400" 

height="100">

 

<rect 

width="400" 

height="100"

style=

"fill:rgb(0,0,255);

stroke-width:10;

stroke:rgb(0,0,0)" 

/>

 

</svg>

 

</body>

 

</html>

Output:

Contoh: Menggambar Sebuah SVG Persegi dengan Sudut Melingkar pada HTML.

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

width="400" 

height="380">

 

<rect 

x="80" 

y="20" 

rx="20" 

ry="20" 

width="150" 

height="150"

style=

"fill:orange;

stroke:black;

stroke-width:2;

opacity:0.5" 

/>

 

</svg>

 

</body>

 

</html>

Output:

Contoh: Menggambar Sebuah Bintang SVG pada HTML.

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

width="300" 

height="200">

 

<polygon 

points=

"100,10 40,198 190,78 10,78 160,198"

 

style=

"fill:grey;

stroke:orange;

stroke-width:5;

fill-rule:evenodd;" 

/>

 

</svg>

 

</body>

 

</html>

Output:

Contoh: Menggambar Sebuah Logo HTML Menggunakan SVG.

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

height="300" 

width="700">

 

<defs>

<lineargradient 

id="grad1" 

x1="0%" 

y1="0%" 

x2="100%" 

y2="0%">

 

<stop 

offset="0%"

style=

"stop-color:white;

stop-opacity:1"/>

 

<stop 

offset="100%"

style=

"stop-color:green;

stop-opacity:1"/>

</linearGradient>

</defs>

 

<ellipse 

cx="200" 

cy="100" 

rx="120" 

ry="80" 

fill="url(#grad1)"/>

 

<text 

fill="#ffffff" 

font-size="22" 

font-family="ARIAL"

x="120" 

y="110">

ElfanMauludi

</text>

</svg>

 

</body>

 

</html>

SVG, sebagai format grafis berbasis vektor dalam HTML, membawa sejumlah keunggulan yang signifikan. Dari skalabilitas tanpa kehilangan kualitas hingga kemampuan interaktif dan efisiensi dalam ukuran file, SVG memberikan alat yang kuat bagi pengembang web untuk menciptakan grafik yang menarik dan responsif. Dengan memahami keunggulan-keunggulan ini, pengguna dapat memanfaatkan potensi penuh SVG untuk meningkatkan pengalaman visual dalam pembuatan halaman web.

Namun, Meskipun Scalable Vector Graphics (SVG) menawarkan sejumlah keunggulan yang signifikan dalam pembuatan grafis web di HTML, ada beberapa kekurangan dan batasan yang perlu dipertimbangkan:

• Kompleksitas dalam Gambar Raster: Meskipun SVG ideal untuk gambar vektor, untuk gambar yang bersifat raster atau memiliki banyak detail kompleks, penggunaan SVG bisa menjadi kurang efisien. Pemuatan gambar dengan kompleksitas tinggi dalam format SVG mungkin memerlukan ukuran file yang lebih besar dan dapat mengurangi kinerja halaman web.
• Keterbatasan Efek Visual: Meskipun SVG mendukung animasi dan efek visual, seringkali efek-efek kompleks yang dapat dicapai dengan format gambar lainnya seperti JPEG atau PNG tidak dapat direplikasi dengan mudah dalam SVG. Beberapa efek visual kompleks bisa menjadi sulit untuk direpresentasikan atau memerlukan penanganan khusus yang membutuhkan penggunaan sumber daya lebih banyak.
• Keterbatasan pada Dukungan Browser Lama: Meskipun SVG didukung oleh mayoritas peramban modern, beberapa versi peramban lama mungkin tidak mendukung semua fitur SVG atau bisa memiliki implementasi yang kurang sempurna. Hal ini dapat menyebabkan kesenjangan fungsionalitas antara peramban yang lebih tua dan yang lebih baru.
• Performa dan Kompleksitas: Dalam beberapa kasus, pembuatan atau manipulasi grafik SVG yang kompleks dapat membutuhkan sumber daya komputasi yang lebih tinggi. Animasi yang berlebihan atau manipulasi elemen SVG yang sangat kompleks bisa memengaruhi kinerja situs web, terutama pada perangkat dengan daya komputasi yang terbatas.
• Keterbatasan Desain: SVG mungkin tidak cocok untuk semua jenis desain grafis. Dalam beberapa kasus, terutama untuk gambar-gambar yang tidak memiliki karakteristik vektor yang jelas, menggunakan format gambar raster seperti JPEG atau PNG dapat lebih tepat dan efisien.
• Kesulitan dalam Edit Visual Langsung: Meskipun SVG menggunakan kode XML, mengedit visual secara langsung dalam SVG bisa menjadi sulit tanpa bantuan editor grafis yang tepat. Beberapa perubahan yang sederhana bisa membutuhkan pengetahuan yang cukup tentang struktur XML dan atribut-atribut SVG.

Walaupun SVG memiliki sejumlah keunggulan dalam pembuatan grafis web, ada beberapa kekurangan yang perlu dipertimbangkan terutama terkait dengan kompleksitas gambar, dukungan peramban, performa, dan batasan desain. Pengguna perlu mempertimbangkan dengan hati-hati kapan dan bagaimana SVG digunakan, terutama ketika berurusan dengan grafis yang sangat kompleks atau pada situasi dimana format gambar raster mungkin lebih tepat. Dengan pemahaman yang baik tentang kelebihan dan kekurangan SVG, pengguna dapat memilih dengan bijak alat terbaik untuk kebutuhan desain grafis dalam proyek web.

Referensi Tambahan:

• Tag Article pada HTML5 dan Fungsinya
• Tag Aside pada HTML5 dan Fungsinya
• Teks Bidirectional pada HTML5 dan Fungsinya
• Tag Details pada HTML dan Fungsinya
• Kotak Dialog pada HTML dan Fungsinya
• Tag Figcaption pada HTML dan Fungsinya
• Tag Figure pada HTML dan Fungsinya

Artikel ini didedikasikan kepada: Ardima Miftaqul Aini, Asti Pangestu, Ayu Putri Kurniasari, Bagas Adi Pamungkas, dan Delyana Sukahar.

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

Berbagi :