tutorial pengembangan web terbaru

HTML5 SVG


Apa SVG?

  • SVG adalah singkatan dari Scalable Vector Graphics
  • SVG digunakan untuk mendefinisikan grafis untuk Web
  • SVG adalah rekomendasi W3C

Scalable Vector Graphics (SVG) adalah vektor format gambar berbasis XML untuk grafis dua dimensi dengan dukungan untuk interaktivitas dan animasi. Spesifikasi SVG adalah standar terbuka yang dikembangkan oleh World Wide Web Consortium (W3C) sejak tahun 1999.

gambar SVG dan perilaku mereka didefinisikan dalam file teks XML. Ini berarti bahwa mereka dapat dicari, diindeks, scripted, dan dikompresi. Sebagai file XML, gambar SVG dapat dibuat dan diedit dengan editor teks, serta dengan perangkat lunak menggambar.

Semua utama web modern browser-termasuk Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, dan Microsoft Ujung-memiliki SVG render dukungan.


HTML <svg> Elemen

HTML <svg> unsur (introduced in HTML5) merupakan wadah untuk grafis SVG.

SVG memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.


Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh <svg> elemen.

Elemen
<svg> 4.0 9.0 3.0 3.2 10.1

SVG Lingkaran

Contoh

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Cobalah sendiri "

SVG Rectangle

rgb (0,0,0) ">

Contoh


<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Cobalah sendiri "

SVG Rounded Rectangle

Maaf, browser Anda tidak mendukung SVG inline.

Contoh


<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Cobalah sendiri "

SVG bintang

Maaf, browser Anda tidak mendukung SVG inline.

Contoh


<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Cobalah sendiri "

SVG Logo

SVG Maaf, browser Anda tidak mendukung SVG inline.

Contoh


<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

Cobalah sendiri "

Perbedaan Antara SVG dan Canvas

SVG adalah bahasa untuk menggambarkan grafis 2D dalam XML.

Canvas menarik grafis 2D, on the fly (with a JavaScript) .

SVG adalah berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan JavaScript event handler untuk elemen.

Dalam SVG, setiap bentuk ditarik dikenang sebagai objek. Jika atribut dari sebuah objek SVG berubah, browser dapat secara otomatis kembali membuat bentuk.

Kanvas diberikan pixel dengan pixel. Di kanvas, sekali grafis ditarik, itu dilupakan oleh browser. Jika posisinya harus diubah, seluruh adegan perlu digambar ulang, termasuk benda yang mungkin telah ditutupi oleh grafis.


Perbandingan Canvas dan SVG

Tabel di bawah menunjukkan beberapa perbedaan penting antara kanvas dan SVG:

Canvas SVG
  • resolusi tergantung
  • Tidak ada dukungan untuk event handler
  • Miskin kemampuan rendering teks
  • Anda dapat menyimpan gambar yang dihasilkan sebagai .png atau .jpg
  • Cocok untuk permainan grafis yang intensif
  • resolusi independen
  • Dukungan untuk event handler
  • Paling cocok untuk aplikasi dengan daerah render besar (Google Maps)
  • Lambat render jika kompleks (anything that uses the DOM a lot will be slow)
  • Tidak cocok untuk aplikasi permainan

Untuk mempelajari lebih lanjut tentang SVG, silakan baca SVG Tutorial .