Bentuk Dasar SVG rect circle path

SVG menggunakan sistem koordinat dengan (0,0) sebagai sudut kiri atas. Nilai X bertambah ke arah kanan; nilai Y bertambah ke arah bawah. Area pandang ditentukan oleh atribut lebar dan tinggi; ruang koordinat ditentukan oleh atribut viewBox.

Gambarlah persegi panjang dengan <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. rx dan ry membulatkan sudut. Isian dan garis tepi dikendalikan oleh atribut isian dan garis tepi atau CSS. Jika x dan y tidak dicantumkan, nilai bawaannya adalah 0,0.

Gambarlah lingkaran dengan <circle cx="100" cy="100" r="50">. cx dan cy adalah koordinat pusat; r adalah jari-jari. Lingkaran SVG tidak memiliki padanan untuk parameter sudut busur pada kanvas—lingkaran tersebut selalu utuh.

Gambarlah elips dengan <ellipse cx="100" cy="100" rx="80" ry="40">. rx adalah jari-jari horizontal; ry adalah jari-jari vertikal. Elips dengan rx dan ry yang sama setara dengan lingkaran.

<line x1="0" y1="0" x2="100" y2="100"> menggambar satu ruas garis. <polyline points="0,0 100,50 200,0"> menggambar beberapa ruas garis yang saling terhubung melalui serangkaian pasangan koordinat. Keduanya tidak otomatis ditutup.

<polygon points="100,10 190,190 10,190"> mirip dengan garis bersambung, tetapi bentuknya otomatis ditutup—sebuah garis menghubungkan titik terakhir kembali ke titik pertama. Gunakan poligon untuk bentuk tertutup seperti segitiga, bintang, dan poligon beraturan lainnya.

Jalur adalah bentuk SVG yang paling serbaguna—jalur dapat mewakili kombinasi garis, busur, dan kurva apa pun. Atribut d berisi perintah jalur: M (moveTo), L (lineTo), A (busur), C (bezier kubik), Q (bezier kuadratik), Z (closePath).

Perintah huruf besar menggunakan koordinat absolut; huruf kecil menggunakan koordinat relatif. M 100 50 berpindah ke (100,50). L 200 150 menggambar garis ke (200,150). Z menutup jalur. A rx ry rotation large-arc sweep x y menggambar busur.

Bentuk SVG menerima CSS: fill, stroke, stroke-width, opacity, dan stroke-dasharray. Gunakan kelas CSS pada elemen SVG agar penataan mudah dipelihara. Transisi CSS SVG berfungsi pada isian, garis tepi, dan opasitas untuk menghasilkan perubahan keadaan yang mulus.

Elemen <g> mengelompokkan elemen-elemen SVG. Terapkan transformasi, isian, atau garis tepi pada kelompok untuk memengaruhi semua turunannya. Pengelompokan memungkinkan penggabungan bentuk kompleks yang bergerak atau berubah bersama—seperti tampilan jam beserta seluruh komponennya.

Definisikan bentuk yang dapat digunakan ulang di dalam <defs>: simbol, gradien, dan jalur klip. Rujuk bentuk-bentuk tersebut dengan <use href="#id">. Cara ini menghindari penggandaan data jalur yang kompleks dan memungkinkan transformasi serta penataan pada tingkat instans melalui elemen penggunaan.

Apa perbedaan antara garis bersambung dan poligon dalam SVG?

SVG menyediakan elemen bentuk deklaratif (persegi panjang, lingkaran, elips, garis, garis bersambung, poligon) serta elemen jalur yang serbaguna untuk bentuk kompleks menggunakan perintah M, L, A, C, Q, Z. Penataan dengan CSS, pengelompokan dengan g, dan penggunaan ulang melalui defs/use memungkinkan grafik vektor yang mudah dipelihara dan diskalakan, yang disematkan langsung di HTML.