SVG adalah format gamabr vektor basis XML untuk grafik 2D dimana dapat mendukung beberapa interaktifitas dan animasi. SVG dikembangkan W3C sejak 1999. Dalam penerapannya SVG dapat dapat diindex dan dikompresi sebagai file XML. Semua Browser Terkenal sudah didukung fitur untuk rendering SVG. Lalu apa itu Canvas? Kanvas adalah Elemen HTML yang memungkinkan seorang dapat melakukan render dinamis dan skirp dalam bentuk 2D. Dalam HTML untuk mengedit / membuat gambar mengunakan JavaScript dan Canvas mememungkinkan menghasilkan gamabr yang dinamis. Dalam Implementasinya Canvas biasanya digunakan untuk membangun Grafik, Animasi, Game, Dll.
B. Latar Belakang
Karena SVG adalah format gambar yang hasilnya gambar memiliki resolusi baik dan Elemen Canvas Adalah Editor yang dapat digunakan untuk menghasilkan Gambar SVG yang lebih baik.
C. Maksud dan Tujuan
Agar dapat mengetahui apa itu SVG dan Canvas lalu dapat membuat beberapa SVG Sederhana di Canvas.
D. Pembahasan
Scalable Vector Graphics (SVG) adalah format gambar vektor berbasis XML untuk 2D yang mendukung interktifitas dan animasi.SVG dikembangkan oleh World Wide Web Consortium (W3C) sejak 1999. Gambar SVG didefinisikan dalam file teks XML. Ini berarti SVG dapat dicari, diindeks, ditulis, dan dikompresi. Sebagai file XML. Semua peramban web modern utama memiliki dukungan render SVG.
Jika SVG dijadikan sebagai file SVG memiliki Ekstensi nama file .svg .svgz. Dan Rilis awal 4 September 2001. Dalam updatan terbaru, Rilis terbaru 1.1. Jika kalian ingin tau informasi mengenai SVG dapat kalian Cek di Website Situs web www.w3.org/Graphics/SVG/. Dalam pengembangannya SVG awanya tidak diperuntukkan untuk commersial.
SVG dalam pengembangannya dapat digunakan untuk Objek Grafis : bentuk grafik vektor seperti jalur dan garis yang terdiri dari garis lurus dan kurva, gambar bitmap, dan teks. Objek grafis dapat dikelompokkan, ditata, diubah, dan dikompositkan ke objek yang dirender sebelumnya.
Set fitur termasuk transformasi bertumpuk, jalur kliping, masker alfa, efek filter, dan objek template. Gambar SVG dapat bersifat interaktif dan dapat menyertakan animasi, yang didefinisikan dalam elemen XML SVG atau melalui scripting yang mengakses Model Objek Dokumen SVG (DOM). SVG menggunakan CSS untuk styling dan JavaScript untuk scripting. Teks, termasuk internasionalisasi dan lokalisasi, muncul dalam teks biasa dalam SVG DOM meningkatkan aksesibilitas grafik SVG.
Meskipun Spesifikasi SVG terutama berfokus pada bahasa markup grafis vektor, desainnya mencakup kemampuan dasar bahasa deskripsi halaman seperti Adobe PDF. Ini berisi ketentuan untuk grafik yang kaya, dan kompatibel dengan CSS untuk tujuan styling. SVG memiliki informasi yang diperlukan untuk menempatkan setiap glyph dan gambar di lokasi yang dipilih pada halaman yang dicetak.
Scripting dan animasi gambar SVG bisa dinamis dan interaktif. Modifikasi berbasis waktu pada elemen dapat dijelaskan dalam SMIL, atau dapat diprogram dalam bahasa scripting (misalnya ECMAScript atau JavaScript). W3C secara eksplisit merekomendasikan SMIL sebagai standar untuk animasi dalam SVG.
Penggunaan SVG di web dibatasi oleh kurangnya dukungan di Internet Explorer versi lama (IE). Banyak situs web yang menyajikan gambar SVG, seperti Wikipedia, juga menyediakan gambar dalam format raster, baik secara otomatis melalui negosiasi konten HTTP atau dengan memungkinkan pengguna langsung memilih file.
Berikut ini adalah contoh coding dan hasil SVG :
- Rectangle (Persegi) digunakan untuk membuat gambar berupa persegi ataupun persegi panjang.
<!doctype html>
<html lang="en">
<head>
<title> Tutorial Mukti911</title>
<style>
rect{ fill : pink; stroke-width:5; stroke:#212; }
</style>
</head>
<body>
<svg><rect height="200" width="400"/></svg>
</body>
</html>
Hasilnya :
- Circle (Lingkaran), digunakan untuk membuat lingkaran. cx kordinat sumbu x, cy kordinat sumbu y, r diameter dari lingkaran
<!doctype html>
<html lang="en">
<head>
<title> Tutorial Mukti911 </title>
<style>
circle{ stroke:pink;stroke-width:10;fill:blue;}
</style>
</head>
<body>
<svg height="200" width="200"><circle cx="60" cy="60" r="50"/></svg>
</body>
</html>
Hasilnya :
- Polygon, digunakan untuk membuat bentuk yang lancip contohnya Segitiga
<!doctype html>Hasilnya :
<html lang="en">
<head>
<title> Tutorial Mukti911 </title>
<style>
polygon{ stroke-width:4; stroke:#000; fill:pink; }
</style>
</head>
<body>
<svg height="400" width="300"><polygon points="200,10 250,190 160,210" /></svg>
</body>
</html>
Elemen Canvas adalah bagian dari HTML5 dan memungkinkan untuk render dinamis dan skrip dari bentuk 2D dan gambar bitmap. Ini adalah model, prosedural tingkat rendah yang memperbarui bitmap dan tidak memiliki grafik adegan built-in. Canvas dikenalkan oleh Apple di komponen Mac OS X Webkit pada 2004. dimana dpat memberikan widget Dashboard dan Browser Safari. Pada 2005 diadopsi dalam versi 1.8 dari Gecko browser, dan Opera pada tahun 2006, dan distandardisasi oleh WHATWG pada spesifikasi baru yang diusulkan untuk teknologi web generasi berikutnya.
Element Canvas sendiri mengunakan coding HTML dengan atribut tinggi dan lebar. Namun saat menggakses Canvas mengunakan Javascript dimana dapat mengakses beberapa fungsi gambar, sehingga memungkinkan untuk menghasilkan grafik yang dihasilkan secara dinamis. Beberapa penggunaan Canvas yang diantisipasi termasuk membangun grafik, animasi, permainan, dan komposisi gambar.
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charsetgoyang dombret="utf-8">
<title>Tutorial Mukti911</title>
</head>
<body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
</script>
</body>
</html>
Selanjutnya kita harus menggunakan DOM API untuk memanipulasi canvas, biasanya dilakukan seperti berikut. Fungsi document.getElementById("myCanvas") untuk memilih elemen HTML dengan id myCanvas. Selanjutnya variabel ctx (konteks) adalah objek dari canvas yang bisa kita manfaatkan untuk menggambar.
Jadi kalian dapat membuat krasi gambar kalian menggunakan Element Canavas dan Jika kalian ingin gamabr kalian memiliki resolusi yan bagus kalian dapt membuat gamabr dari coding di SVG.
F. Referensi
- www.tutorialspoint.com
- www.w3schools.com
- www.id.wikipedia.org
- www.duniailkom.com
- www.codepolitan.com
No comments:
Post a Comment