Beberapa bentuk boleh dibuat menggunakan lukisan SVG. Lukisan SVG dapat menggunakan dan menggabungkan tujuh bentuk: Path, Rectangle, Circle, Ellipse, Line, Polyline, and Polygon.
Jalan
The path
elemen adalah yang paling biasa dilihat, dan biasanya dihasilkan oleh program yang direka untuk kod eksport SVG.
Contoh di path
atas akan menghasilkan symbole “plus” (+) ketika digunakan di dalam gambar SVG. path
Elemen SVG tidak dibina secara manual, tetapi dihasilkan melalui program reka bentuk yang dapat memanipulasi grafik vektor, seperti Illustrator atau Inkscape.
Segi empat tepat
Elemen segi empat tepat rect
melukis sebuah segi empat tepat pada layar, dan ia menerima enam atribut.
x
dan y
tetapkan kedudukan sudut kiri atas segi empat tepat, width
dan height
tetapkan ukuran segi empat tepat. rx
dan ry
tetapkan jejari sudut segiempat sama dengan sifat jejari-jejari CSS.
Bulatan
Unsur bulatan circle
menerima tiga sifat.
cx
dan cy
tetapkan kedudukan pusat bulatan, dan tetapkan r
jejari (ukuran) bulatan.
Elips
Elemen elips, ellipse
mirip dengan circle
elemen kecuali radius terbahagi kepada dua atribut.
Sekali lagi, cx
dan cy
tetapkan kedudukan pusat elips, dan sekarang rx
dan ry
tetapkan jejari mendatar dan menegak elips, masing-masing. Yang lebih besar rx
akan memberikan elips "lemak", dan yang lebih besar ry
akan memberikan elips yang lebih kurus. Sekiranya rx
dan ry
sama, ia akan membentuk bulatan.
Garisan
The line
elemen adalah mudah, dan menerima empat sifat-sifat.
Yang x1
dan y1
sifat-sifat memberikan mata pertama barisan, dan x2
dan y2
sifat-sifat menetapkan titik kedua barisan.
Garis poli
A polyline
adalah satu siri garis lurus yang dihubungkan, diberikan dalam satu atribut.
The points
penerima serah hak atribut senarai mata, setiap titik dipisahkan oleh koma.
Poligon
The polygon
unsur juga satu siri garis lurus berhubung, tetapi dalam kes ini, baris terakhir secara automatik akan menyambung semula ke titik permulaan.
Contoh ini akan menarik bentuk yang sama seperti di polyline
atas, tetapi akan menarik garis tambahan untuk "menutup" rangkaian garis.
Maklumat lanjut
Dokumentasi MDN: MDN