SVG adalah singkatan dari Scalabe Vector Graphics.
SVG mendefinisikan grafis berbasis vektor dalam format XML.

Langsung saja kita masuk ke pembuatan SVG:

Ini SVG pertama:

Sorry, your browser does not support inline SVG.

Dan ini kodenya: 

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

Apa anda sudah tau tentang SVG?.
Sebelum anda melanjutkan, Anda harus memiliki beberapa pemahan dasar tentang:

  • HTML
  • Dasar XML
Jika anda ingin mempelajari tentang membuat SVG.anda harus membaca tutorial ini sampai selesai.

Sebelum anda lanjut ke materi selanjutnya apa anda tau SVG?

APA ITU SVG?
SVG adalah singkatan dari Scalable Vector Graphics, SVG digunakan untuk mendefinikan sebuah garis berbasis vector dan web.SVG mendefinisikan grafis dalam format XML.Dan juga Grafis SVG tidak kehilangan kualitas jika mereka di perbesar atau diubah ukurannya.Setiap elemen dan setiap atribut dalam file SVG dapat di buat animasi.SVG adalah rekomendasi dari W3C.dengan standar W3C lain seperti DOM dan XSL.

Keuntungan SVG

Keuntungan menggunakan SVG lebih baik format dari gambar lainnya (Seperti JPEG dan GIF) adalah:

  • Gambar SVG dapat dibuat dan diedit dengan editor teks apapun
  • Gambar SVG dapat dicari, diindeks, scripted, dan dikompresi
  • Gambar SVG yang terukur
  • Gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi apapun
  • Gambar SVG yang zoomable (dan gambar dapat diperbesar tanpa degradasi)
  • SVG adalah standar terbuka
  • File SVG adalah XML murni

Pesaing utama untuk SVG adalah Flash.

SVG mempunyai keuntungan lebih besar dari Flash adalah sesuai dengan standar lainnya (misalnya XSL dan DOM). Flash bergantung pada teknologi eksklusif yang tidak open source.

SVG BENTUK

 SVG memiliki beberapa elemen bentuk yang telah ditetapkan yang dapat digunakan oleh pengembang:

  • Rectangle (rect)
  • Lingkaran (lingkaran)
  • Ellipse (elips)
  • Baris (baris)
  • Polyline (polyline)
  • Polygon (poligon)
  • Path (path)

Dan selanjutnya kita masuk ke Pembuatan SVG Rectangle (rect)

SVG Rectangle -(rect)

Lansung Ke contoh:
The elemen digunakan untuk membuat persegi panjang dan variasi dari bentuk persegi panjang:

Sorry, your browser does not support inline SVG.

Dan ini kodenya: 

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
  Sorry, your browser does not support inline SVG.  
</svg>