Pengertian SVG dalam HTML
SVG dalam HTML, SVG (Scalable Vector Graphics) adalah format gambar berbasis vektor yang digunakan untuk menampilkan berbagai grafik di web. Berbeda dengan format gambar bitmap seperti PNG atau JPG, SVG mempertahankan kualitas ketajaman gambar pada saat diperbesar atau diperkecil. SVG menggunakan XML (Extensible Markup Language) untuk mendeskripsikan gambar, sehingga dapat dimodifikasi dan dimanipulasi dengan menggunakan CSS dan JavaScript.
Kelebihan SVG dalam HTML
Scalable: SVG dapat diperbesar atau diperkecil tanpa kehilangan kualitas.
Manipulasi dengan CSS dan JavaScript: Dapat di-styling dan diinteraksikan dengan mudah.
Lightweight: Ukurannya relatif kecil, terutama untuk grafik yang kompleks.
Support Web Accessibility: Dapat diakses dengan pembaca layar.
Jenis-Jenis SVG dalam HTML
SVG sebagai File Terpisah: SVG disimpan dalam file terpisah (.svg) dan di-link ke dalam HTML.
Inline SVG: SVG langsung ditempatkan di dalam kode HTML.
SVG sebagai Background Image: SVG digunakan sebagai background image dalam CSS.
SVG dalam Tag <img>: SVG di-embed sebagai sumber pada tag <img>.
Contoh Kode SVG dalam HTML
SVG Sebagai File Terpisah
html
<!– Menggunakan SVG sebagai file terpisah –>
<img src=”image.svg” alt=”Deskripsi gambar”>
Inline SVG
html
<!– Inline SVG dalam HTML –>
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</svg>
SVG sebagai Background Image dalam CSS
css
/* Menggunakan SVG sebagai background image */
div {
background-image: url(‘image.svg’);
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
SVG dalam Tag <img>
html
<!– Embed SVG menggunakan tag <img> –>
<img src=”image.svg” alt=”Deskripsi gambar”>
Manipulasi SVG dengan CSS
html
<!– Inline SVG dengan styling CSS –>
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ class=”circle-svg” />
</svg>
<style>
.circle-svg {
stroke: blue;
stroke-width: 4;
fill: red;
}
</style>
Manipulasi SVG dengan JavaScript
html
<!– Inline SVG dengan interaksi JavaScript –>
<svg width=”100″ height=”100″>
<circle id=”myCircle” cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”red” />
</svg>
<script>
document.getElementById(“myCircle”).addEventListener(“click”, function() {
alert(“Lingkaran diklik!”);
});
</script>
Contoh penggunaan SVG
Ikon dan Logo
SVG sering digunakan untuk ikon dan logo karena tetap tajam pada berbagai ukuran dan resolusi layar. Misalnya, sebuah logo perusahaan di header website:
html
<svg height=”100″ width=”100″>
<path d=”M10 10 H 90 V 90 H 10 L 10 10″ fill=”blue”/>
<!– path lain untuk membentuk logo –>
</svg>
Grafik dan Diagram
SVG dapat digunakan untuk membuat grafik dan diagram yang kompleks. Ini sangat berguna untuk laporan data atau visualisasi informasi:
html
<svg height=”210″ width=”400″>
<path d=”M150 0 L75 200 L225 200 Z” fill=”lime” stroke=”purple” stroke-width=”1″ fill-opacity=”0.5″/>
<!– elemen lain untuk menambahkan data grafik –>
</svg>
Animasi dan Interaktivitas
Dengan menggunakan CSS dan JavaScript, SVG dapat dianimasikan atau dibuat interaktif. Ini berguna untuk membuat UI elemen yang menarik atau infografis interaktif:
html
<svg height=”150″ width=”500″>
<circle id=”myCircle” cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red” />
<animate xlink:href=”#myCircle” attributeType=”XML” attributeName=”cx” from=”50″ to=”450″ dur=”2s” repeatCount=”indefinite”/>
</svg>
Peta dan Layouts
SVG juga digunakan untuk membuat peta interaktif atau layout yang kompleks. Pengguna dapat berinteraksi dengan elemen SVG seperti mengklik area tertentu pada peta:
html
<svg height=”500″ width=”1000″>
<path id=”region1″ d=”M20,230 Q40,205 50,230 T90,230″ fill=”none” stroke=”blue” stroke-width=”5″/>
<text x=”20″ y=”20″ fill=”red”>Region 1</text>
<!– elemen lain untuk membentuk peta
Kesimpulan
SVG adalah format gambar yang sangat fleksibel dan berguna untuk desain web. Dengan kemampuan skalabilitasnya dan kemudahan dalam modifikasi menggunakan CSS dan JavaScript, SVG menjadi pilihan yang tepat untuk grafik web yang interaktif dan berkualitas tinggi. Penggunaan SVG dalam berbagai cara, baik sebagai file terpisah, inline, background image, atau dalam tag <img>, memberikan fleksibilitas kepada pengembang web dalam mengimplementasikan grafik pada halaman web mereka
