HTML SVG

 

• APA ITU HTML SVG

HTML SVG (Scalable Vector Graphics) adalah format gambar yang digunakan di web untuk membuat gambar berbasis vektor, seperti ikon, logo, atau ilustrasi. Berbeda dengan gambar biasa (seperti JPG atau PNG) yang berbasis piksel, SVG menggunakan kode berbasis XML untuk menggambar objek, sehingga gambar tetap tajam dan jelas meskipun diperbesar atau diperkecil. SVG bisa langsung disisipkan di dalam HTML, dan kamu bisa mengubah warnanya, ukurannya, atau animasi dengan mudah menggunakan CSS atau JavaScript. Singkatnya, SVG sangat fleksibel dan bisa digunakan untuk gambar yang ringan dan responsif di web.

Contohnya seperti gambar yaitu logo TOMAT yang saya buat sendiri hehe👽👽

• Penjelasan kode SVG:

Mulai dengan elemen akar <svg>, tentukan lebar dan tinggi, serta ruang nama yang tepat

Elemen <rect> digunakan untuk menggambar persegi panjang

Lebar dan tinggi persegi panjang diatur ke 100% dari lebar/tinggi elemen <svg>

Atur warna isi persegi panjang menjadi hijau

Elemen <circle> digunakan untuk menggambar lingkaran

Atribut cx dan cy mendefinisikan koordinat x dan y dari pusat lingkaran

Atribut r mendefinisikan jari-jari lingkaran

Kita mengatur warna isian lingkaran menjadi kuning

Elemen <text> digunakan untuk menggambar teks

Atribut x dan y mendefinisikan koordinat x dan y dari pusat teks

Atribut ukuran huruf menentukan ukuran huruf teks

Atribut text-anchor mendefinisikan di mana kita ingin titik tengah (teks) berada

Atribut isi menentukan warna teks

Tulis “SVG” sebagai teks yang akan ditampilkan

Tutup gambar SVG dengan </svg>.