Skip to main content

SVG | HTML

Halo! IT Corner hari ini saya mempelajari tentang SVG dalam HTML. Apa itu SVG? Nah, SVG itu sebuah grafik yang scalable, artinya jika diperbesar atau diubah ukurannya tidak akan hilang kualitas gambarnya.


SVG dibuat dengan menggunakan elemen <svg>. Elemen ini digunakan sebagai wadah untuk grafik-grafiknya. Setelah itu, diberi ukuran, misalnya 500px × 500px. Untuk grafiknya sendiri ada beberapa jenis sebagai berikut.


Grafik yang pertama adalah lingkaran yang dibuat dengan elemen <circle>. Untuk atributnya ada cx, cy, r, fill, stroke, dan stroke-width. Atribut cx dan cy adalah posisi koordinatnya. Atribut r adalah radiusnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.


Grafik kedua adalah persegi panjang yang dibuat dengan elemen <rect>. Untuk atributnya ada x, y, width, height, fill, stroke, dan stroke-width. Atribut x dan y adalah posisi koordinatnya. Atribut width adalah panjangnya, dan height adalah lebarnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.


Grafik yang ketiga adalah polygon yang dibuat dengan elemen <polygon>. Untuk atributnya hanya ada points. Namun bisa diberi style, seperti fill, fill-rule, stroke, dan stroke-width. Atribut points adalah posisi titik-titik dalam suatu koordinat. Style fill adalah warna polygonnya, dan fill-rule adalah algoritma untuk menentukan warna. Style stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.


Grafik keempat adalah ellipse yang dibuat dengan elemen <ellipse>. Untuk atributnya ada cx, cy, rx, ry, fill, stroke, dan stroke-width. Atribut cx dan cy adalah posisi koordinatnya. Atribut rx dan ry adalah radiusnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.


Grafik kelima adalah teks yang dibuat dengan elemen <text>. Untuk atributnya ada x, y, fill, font-family, dan font-size. Atribut x dan y adalah posisi koordinatnya. Atribut fill adalah warna teksnya. Atribut font-family adalah jenis fontnya, dan font-size adalah ukuran fontnya.


Itu saja untuk materi SVG, selamat jumpa di blog materi berikutnya!


Project Source Code
Labels:

Comments

Post a Comment

Popular posts from this blog

Validasi Input | JavaScript

Halo! IT Corner Rabu saya belajar tentang cara melakukan validasi input di JavaScript. Kalian sudah tahu kan cara mengambil input, baik dari element input ataupun menggunakan prompt dalam JavaScript. Nah, input yang diterima itu kadang-kadang tidak sesuai dengan program yang telah dibuat. Contohnya input yang meminta password 8 karakter, tetapi yang diterima adalah password 6 karakter. Caranya supaya input tersebut tidak diterima supaya nanti programnya tidak error yaitu menggunakan validasi. Cara validasi yang dapat digunakan untuk yang ini dapat menggunakan metode length. Misalkan, jika ingin membuat kondisi di mana passwordnya minimal 8 karakter, jadi dapat menggunakan metode tadi dalam perintah if. Contohnya di bawah ini. let input = document.getElementById("t1").value;   if (input.length < 8) {     return; } Di situ akan mengambil nilai dari elemen input, kemudian akan dicek apakah panjang input kurang dari lapan. Jika iya, akan keluar dari function, dan jika tida...
Post a Comment
Read more

Login & Registration Form | Project

Halo! Hari ini saya membuat project tentang form login dan registrasi. Sebenarnya ini sama saja dengan yang blog materi HTML Form itu, tapi yang ini lebih lengkap dengan tambahan form login. Versi yang baru ini lebih bagus dari versi yang lama dengan UI-nya yang lebih elegen serta fitur redirect untuk login di bagian kanan atas. Versi ini mengurangi tujuh jenis input menjadi tiga, yaitu hanya email, username, dan password. Untuk password-nya sendiri, akan dicek apakah password-nya minimal 8 karakter. Untuk bagian login-nya, terdapat redirect untuk registrasi di kanan atas juga serta di bawah tombol "Masuk". Di sini juga terdapat link jika pengguna lupa password-nya. Untuk inputnya sendiri hanya ada dua, yaitu yang atas untuk email atau username, dan yang bawah untuk password. Tidak lupa juga, UI kedua form ini saya mengambil inspirasi dari beberapa website seperti Roblox, Pixiv, Twitter (X), dan Github. Itu saja untuk blog ini tentang project login dan registration form. Samp...
Post a Comment
Read more

Classes | JavaScript

Halo! IT Corner Rabu ini materinya adalah classes dalam JavaScript. Class itu adalah sebuah template atau blueprint untuk membuat objek. Class ini mendefinisikan struktur, data, dan sifat objek. Class menggunakan keyword 'class' untuk membuatnya. Di dalam class tersebut, terdapat keyword 'constructor' yang meninitialisasikan properti atau variabel class tersebut. Selain itu, juga ada method atau function di dalam class itu. Seterusnya, ada keyword 'new' untuk membuat instansi baru dari sebuah class. Salah satu contohnya adalah penulisan blogger saya. Kalau kalian perhatian cara penulisannya, pasti pembukaan dan penutupan hampir selalu sama. Nah, kita pakai ilustrasi ini dan menjadikannya sebuah class. Berikut contohnya: class Blogger {   constructor(isi) {     this.pembukaan = "Halo";     this.isi = isi;     this.penutup = "Selamat jumpa";   }   tulis() {     console.log(this.pembukaan);     console.log(this.isi);   ...
Post a Comment
Read more