Grafik vektor adalah metode mengomunikasikan serangkaian bentuk, koordinat, dan jalur ke konteks renderingnya. Keduanya adalah seperangkat petunjuk tentang cara menggambar gambar. Jika skala gambar tersebut dinaikkan atau diturunkan, kumpulan titik dan garis yang direpresentasikan oleh gambar akan digambar ulang untuk diskalakan. Kurva halus antara dua titik akan digambar ulang dengan sama mulusnya pada berbagai ukuran—mirip dengan cara batas yang ditentukan CSS pada elemen HTML digambar ulang saat elemen tersebut diskalakan di area pandang.
Scalable Vector Graphics (SVG) adalah bahasa markup berbasis XML yang dikembangkan oleh W3C. Ini adalah format gambar vektor yang dirancang untuk web modern.
Setiap perangkat lunak desain yang didedikasikan untuk mengedit karya seni vektor akan memungkinkan Anda untuk mengekspor gambar sebagai SVG. Namun, sebagai bahasa markup standar yang dapat dibaca manusia, SVG juga dapat dibuat dan diedit dengan software pengeditan teks apa pun, terlepas dari software yang digunakan untuk membuatnya, meskipun dengan cepat menjadi tidak realistis untuk gambar dengan kompleksitas sungguhan. SVG dapat ditata gayanya dengan CSS, atau berisi JavaScript yang membangun perilaku dan interaksi ke dalam gambar itu sendiri.
Bahkan di luar daya tarik yang nyata bagi desainer dan developer, SVG juga merupakan format yang sangat efektif dalam hal pengalaman pengguna akhir. Informasi deskriptif yang terkandung dalam sumber SVG sangat rapat dibandingkan dengan informasi berbasis petak piksel dalam format gambar raster yang lebih preskriptif, dalam kasus bentuk yang sederhana—untuk membuatnya lebih sederhana, perbedaan antara memberi tahu browser "gambar garis merah 1 px antara 1x1 dan 1x5" dan "1x1 adalah piksel merah. 1x2 adalah piksel merah. 1x3 adalah piksel merah. 1x4 adalah piksel merah. 1x5 adalah piksel merah". Sisi lain adalah sifat deskriptif SVG memerlukan lebih banyak interpretasi—lebih banyak "pemikiran"—dari browser. Karena alasan ini, SVG yang kompleks dapat lebih berat untuk dirender. Oleh karena itu, gambar yang sangat kompleks dapat berarti serangkaian petunjuk yang panjang, dan ukuran transfer yang besar.
Mungkin perlu sedikit uji coba sebelum Anda dapat langsung mengenali kandidat sumber gambar karena lebih baik disajikan oleh SVG daripada format raster konvensional. Namun, ada beberapa panduan: elemen antarmuka seperti ikon hampir selalu dilayani dengan baik oleh SVG. Poster dengan garis yang tajam, warna solid, dan bentuk yang didefinisikan dengan jelas kemungkinan akan menjadi kandidat kuat untuk SVG.
SVG adalah topik yang sangat besar: seluruh bahasa markup dibuat untuk berdampingan bersama HTML, dengan opsi dan kemampuan penataan gaya yang unik. Untuk pengantar SVG yang lebih detail, lihat tutorial MDN SVG.