HTML5Tingkat: Menengah6 min
Grafis Web: SVG Vektor vs Canvas 2D Bitmap
Kuasai pembuatan grafik web: SVG berbasis markup XML yang tajam di segala resolusi dan Canvas berbasis pixel untuk rendering game atau grafik dinamis.
Perbandingan SVG vs Canvas
Pratinjau TerbukaKeduanya digunakan untuk grafis modern namun dengan arsitektur berbeda:
Poin Penting:
SVG: Berbasis vektor (XML DOM), tidak pecah saat diperbesar, elemen dapat diberi event listener dan styling CSS.
Canvas (
Sintaks Inline SVG Sederhana
Menggambar lingkaran dan kotak langsung di markup:
<svg width="200" height="100">
<rect width="80" height="80" x="10" y="10" fill="#38bdf8" rx="8" />
<circle cx="150" cy="50" r="40" fill="#f43f5e" />
</svg>
Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi