Belajar HTML5: Belajar Dasar SVG, Penggunaan SVG untuk men-generate Grafis pada dokumen HTML

0 Comments


SVG - Scalable Vector Graphic oleh HTML5
HTML5 sekarang ini memang bukan teknologi baru, meski implementasi bersar-besaran dan dukungan berbagai perangkat baru mulai terasa 2 - 3 tahun belakangan ini. Seperti yang mungkin sudah anda tahu, atau kita ketahui bersama bahwa HTML5 memberikan dukungan fitur yang sebelumnya tidak pernah terbayangkan pada versi HTML lain. Salah satu yang akan kita bahas adalah tentang SVG.

Apa itu SVG?

SVG merupakan singkatan dari Scalable Vector Graphics atau secara sederhana bisa diartikan sebagai bentuk Grafis Vektor yang dapat diatur baik ukuran maupun nilainya (Scalable). Bagi anda yang pernah belajar program grafis seperti Corel Draw atau Adobe Illustrator, tentu sudah paham tentang Vector Graphic. Salah satu jenis file grafis yang tidak akan pecah meski diperbesar berkali-kali.

Oke, kembali lagi ke SVG milik HTML5. SVG dalam HTML5 merupakan sebuah bahasa tersendiri untuk membuat gambar grafis 2 dimensi yang dirender dalam bentuk aplikasi grafis berbasis bahasa XML. Penggunaan paling umum SVG dalam dunia web saat ini adalah untuk menampilkan grafik, diagram atau chart dan sebagainya. Standar SVG diatur oleh W3C sepenuhnya sebagai konsorsium W3.

Menampilkan SVG di dokumen HTML

Jika anda mempunyai sebuah file grafis berformat SVG, untuk membukanya anda bisa langsung "open with" menggunakan aplikasi web browser semacam Internet Explorer, Mozilla Firefox dll. Selain itu, di HTML5 anda bisa meng-embed SVG secara langsung dengan menggunakan sintax <svg></svg>.

Membuat Bentuk Geometri Dasar Dengan SVG

Lingkaran dengan SVG

Coba anda ketik script berikut dan simpan sebagai sebuah file .html
<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
         
      <title>SVG</title>
      
      
   </head>
   <body>
   
      <h2 align="center">
Lingkaran dengan SVG</h2>
<svg height="200" id="svgelem" xmlns="http://www.w3.org/2000/svg">
         <circle cx="50" cy="50" fill="red" id="redcircle" r="50">
      </circle></svg>
  
   </body>
</html>
Maka akan menghasilkan :
SVG Lingkaran
Lingkaran dengan SVG HTML5




Baca juga : Membuat fungsi terbilang di JAVA

Menggambar Kotak dengan SVG

Sekarang coba menggambar kotak persegi panjang dengan mengetikkan kode berikut:
<html>
   <head>
   
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
         
      <title>SVG</title>
      
      
   </head>
   <body>
 
      <h2 align="center">
HTML5 SVG Persegi Panjang</h2>
<svg height="200" id="svgelem" xmlns="http://www.w3.org/2000/svg">
         <rect fill="red" height="100" id="redrect" width="300">
      </rect></svg>
  
   </body>
</html>
Maka akan menghasilkan :
Rectangle SVG

HTML5: Menggambar Garis dengan SVG

Kemudian cobalah mengggambar garis denga script HMTL berikut :
<html>
   <head>
      
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      
      <title>SVG</title>
      
   </head>
 
   <body>
 
      <h2 align="center">
HTML5 SVG Garis</h2>
<svg height="200" id="svgelem" xmlns="http://www.w3.org/2000/svg">
         <line style="stroke-width: 2; stroke: red;" x1="0" x2="200" y1="0" y2="100">
      </line></svg>
  
   </body>
</html>
Hasilnya:
Garis dengan SVG HTML5


Demikian sekilas tentang SVG, lain kesempatan akan kita bahas lagi.

Baca Tulisan Lainnya Juga :)

0 komentar: