Forum | tutorial pengembangan web terbaru
 

SVG tutorial


SVG adalah singkatan dari Scalable Vector Graphics.

SVG mendefinisikan grafis berbasis vektor dalam format XML.


Contoh di Setiap Bab

Dengan kami "Cobalah Sendiri" Editor, Anda dapat mengedit SVG, dan klik pada tombol untuk melihat hasilnya.

SVG Contoh

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
Cobalah sendiri "

Apa yang harus Anda sudah tahu

Sebelum Anda melanjutkan, Anda harus memiliki beberapa pemahaman dasar sebagai berikut:

  • HTML
  • XML dasar

Jika Anda ingin mempelajari mata pelajaran ini pertama, cari tutorial di kami halaman Depan .


Apa SVG?

  • SVG adalah singkatan dari Scalable Vector Graphics
  • SVG digunakan untuk mendefinisikan grafis berbasis vektor untuk Web
  • SVG mendefinisikan grafis dalam format XML
  • SVG grafis TIDAK kehilangan kualitas apa pun jika mereka diperbesar atau diubah ukurannya
  • Setiap elemen dan setiap atribut dalam file SVG dapat animasi
  • SVG adalah rekomendasi W3C
  • SVG terintegrasi dengan standar W3C lainnya seperti DOM dan XSL

SVG adalah Rekomendasi W3C

SVG 1.0 menjadi Rekomendasi W3C pada 4 September 2001.

SVG 1.1 menjadi Rekomendasi W3C pada tanggal 14 Januari 2003.

SVG 1.1 (Second Edition) menjadi Rekomendasi W3C pada tanggal 16 Agustus tahun 2011.


SVG Keuntungan

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

  • gambar SVG dapat dibuat dan diedit dengan editor teks
  • gambar SVG dapat dicari, diindeks, scripted, dan dikompresi
  • gambar SVG yang scalable
  • gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi apapun
  • Gambar SVG yang zoomable (and the image can be zoomed without degradation)
  • SVG adalah standar terbuka
  • file SVG adalah murni XML

Pesaing utama untuk SVG adalah Flash.

SVG Keuntungan terbesar memiliki lebih dari flash adalah sesuai dengan standar lainnya (eg XSL and the DOM) . Flash bergantung pada teknologi eksklusif yang tidak open source.


Membuat Gambar SVG

Gambar SVG dapat dibuat dengan editor teks, tetapi sering lebih mudah untuk membuat gambar SVG dengan program gambar, seperti Inkscape .