SVG adalah singkatan dari Scalable Vector Graphics. Kebanyakan web browser modern mendukung SVG.

SVG digunakan, seperti namanya, untuk membuat grafik untuk ditampilkan di web. SVG adalah standar web yang diakui dan didukung oleh World Wide Web Consortium (W3C). Langkah-langkah berikut ini akan meliputi dasar. Ini adalah apa yang Anda butuhkan: Pengetahuan dasar HTML Dasar pengetahuan tentang XML 1. SVG menggunakan bahasa markup XML untuk mendefinisikan vektor grafis berbasis di web. XML grafis yang murni, mereka tidak gambar dalam pengertian bahwa Anda dapat digunakan untuk gambar dengan JPEG atau GIF. Dengan kata lain, Anda dapat membuat gambar SVG dengan tidak lebih rumit daripada Notepad dan beberapa XML. 2. Karena bagian terukur dari SVG, grafis dapat dikurangi atau diperbesar dan tidak pernah kehilangan kualitas mereka. 3. Sejak gambar SVG didefinisikan dengan XML, elemen apapun dalam grafik dapat diidentifikasi dalam XML dan animasi. Pada pandangan pertama, Anda tidak mungkin bisa kirim animasi SVG dari animasi Flash. Perbedaannya adalah bahwa SVG adalah teknologi open source yang menggunakan standar yang diterima seperti Document Object Model (DOM) untuk memanipulasi gambar. 4. Berikut ini adalah contohnya. Aku akan membuat grafik lingkaran. Gambar menunjukkan file SVG kecil, disimpan sebagai lingkaran. svg. DOCTYPE adalah sebuah SVG DTD. lingkaran memiliki jari-jari 40px, stroke merah 3px dan mengisi biru. Ini adalah XML, jadi semua tag harus ditutup. 5. Dalam compliant browser SVG, berikut adalah cara yang terlihat. 6. cx adalah sumbu-x lingkaran, cy adalah sumbu y lingkaran. Dengan lingkaran, Anda sebenarnya dapat menghilangkan kedua dan hanya menggunakan r, yang jari-jari. (Dengan elips, Anda akan membutuhkan sumbu x dan y) Isi., Stroke dan stroke-lebar yang cukup jelas. 7. Bentuk meliputi rect (rectangle), lingkaran, elips, garis, polyline, dan poligon. 8. Grafik didefinisikan dalam file SVG dimasukkan ke dalam sebuah file HTML dengan baik tag embed (usang) dan obyek tag atau dalam iframe. Cukup kembali ke titik. svg file untuk sumber objek. 9. Tag jalur digunakan untuk menghidupkan suatu objek. Path dalam gambar objek bergerak dari titik awal untuk beberapa posisi dan kemudian menutup jalan. Berikut adalah perintah yang mungkin path: M = moveto, L = lineto, H lineto horizontal =, V = vertikal, C = curveto, S = curveto halus, Q = kuadrat Belzier kurva, T = halus kuadrat Belzier curveto, A Arc = elips dan Z = closepath.

SVG (Scalable Vector Graphics) merupakan suatu format gambar Vector yang berbasis Open XML untuk membentuk gambar 2 dimensi termasuk animasinya dalam format XML (eXtensible Markup Language). Untuk mempelajari SVG perlu dasar tentang pemrograman web yaitu menggunakan HMTL dan dasar-dasar XML. Pengertian SVG lainnya : > SVG digunakan untuk membuat grafik dengan mendefinisikan vector, yang akan digunakan dalam halaman web. > SVG menghasilkan grafik yang tidak akan berkurang kualitasnya sebagai akibat proses zoomming maupun resizing. > Elemen dan attribut dalam SVG dapat dianimaai > SVG direkomendasikan oleh World Wide Web Consortium (W3C) > SVG terintegrasi dengan standar W3C lainnya misalnya DOM dan XSL

File yang disimpan dalam format SVG ini sangat kecil ukurannya. Dan sudah didukung oleh hampir semua program gambar karena format gambar ini juga didukung oleh browser Firefox dan Opera. SVG mendukung beberapa tambahan penting, antara lain: * anti-aliased rendering, * pattern dan gradient fills, * sophisticated filter-effects, * clipping to arbitrary paths, * text dan animations. Yang membedakan antara SVG dan Flash adalah bahwa SVG merupakan rekomendasi dari W3C dan berbasis XML. Sedangkan flash merupakan format yang tertutup.

Native SVG dan Plugin SVG Ada 2 cara sebuah browser mendukung SVG, yaitu: 1. Native SVG 2. Plugin SVG Native SVG artinya browser secara langsung sudah mendukung format SVG. Sedangkan untuk browser yang tidak mendukung SVG dapat dilakukan dengan memasang Plugin (atau disebut juga Extension/Add-Ons). Salah satu Plugin yang terkenal adalah Adobe Viewer (http://www.adobe.com/svg/). Sejarah dan Keuntungan Penggunaan SVG. SVG 1.1 direkomendasikan oleh W3C pada Januari 2003. Sun Microsystems, Adobe, Apple, IBM, dan Kodak merupakan beberapa organisasi yang terlibat dalam pendefinisian SVG. Keuntungan penggunaan SVG dibanding format gambar yang lain (misalnya JPEG dan GIF) antara lain: File sumber SVG dapat dibaca dan modifikasi dengan menggunakan hampir semua tool/text (misalnya notepad)

 File sumber SVG berukuran lebih kecil dan dapat dikompresi dibanding dengan format gambar JPEG dan GIF Gambar dalam format SVG bersifat scalable/diresizing Gambar dalam format SVG dapat dicetak dengan kualitas yang tinggi dan sama baiknya pada berbagai resolusi Gambar dalam format SVG bersifat zoomable. Setiap bagian dari gambar dapat di zoom tanpa degradasi mutu Text dalam SVG selectable dan searchable (sangat berguna dalam peta) SVG dapat bekerja dengan Teknologi Java SVG merupakan open standard SVG merupakan murni XML Pesaing utama dari SVG adalah Flash. Kelebihan utama dari SVG dibanding Flash adalah bahwa SVG compliance dengan standar yang lain (misalnya XSL dan DOM). Flash berlandasan pada teknologi yang tidak open source. Sampai saat ini SVG belum sepenuhnya disupport oleh semua browser. Mozilla, Firefox, dan Opera sudah mendukung SVG, Microsoft baru pada tahap rencana untuk mendukung SVG. Beberapa SVG editor tersedia, salah satu diantaranya adalah Adobe GoLive 5. Menampilkan File SVG Untuk menampilkan file dalam format SVG, kita perlu meng- install sebuah plug-in misalnya Adobe SVG Viewer (Klik disini untuk free download dari Adobe.). Jika browser yang kita gunakan tidak mendukung SVG, makan perlu men- download sebuah SVG viewer untuk menampilkan file SVG. Jika kita menggunakan browser Firefox 1.5 atau Opera 9 yang sudah mendukung SVG tidak diperlukan sebuah plug-in/ SVG viewer. Menulis Kode dalam SVG Berikut merupakan contoh dari kode sederhana dari SVG. File SVG harus disimpan dalam file dengan ekstension .svg:

(http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd> xmlns=http://www.w3.org/2000/svg> stroke-width=2 fill=red/>) Tampilan hasil darifile SVG diatas adalah berikut ini:

Penjelasan: Baris pertama berisi deklarasi XML. Perhatikan pada atribut standalone. Atribut ini menjelaskan apakah file SVG stands alone, atau memiliki referensi ke eksternal file. standalone=no berarti dokumen SVG mempunyai referensi ke sebuah eksternal file, dalam kasus ini DTD. Baris kedua dan ketiga merefer pada eksternal SVG DTD. DTD berada pada http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd. Baris keempat merupakan permulaan dari kode SVG yaitu dengan dmulai dengan elemen , yang terdiri atas tag pembukan dan tag penutup . Inilah elemen dasar dari SVG. Atribut width dan height merupakan seting untuk lebar dan tinggi dari dokumen SVG. Atribut version menjelaskan versi SVG yang digunakan dan atribut xmlns menjelaskan namespace dari SVG. Elemen digunakan untuk membuat sebuah lingkaran. Atribut cx dan cy merupakan definisi koordinat x dan y titik tengan lingkaran. Jika atribut cx dan cy tidak dicantumkan maka titik tengan lingkaran akan diset ke (0, 0). Atribut r merupakan radius dari lingkaran. stroke dan stroke-width mendefinisikan bagaimana tampilan dari bentuk outline dalam kasus ini outline lebar 2px, dan border hitam. fill merupakan atribut untuk warna dalam lingkaran dalam kasus ini merah. Tag menutup elemen SVG dan dokumen. Sumber : http://degraphic.blogspot.com/2007_09_02_archive.html http://www.ilmu-komputer.net/internet/pengantar-svg/ Scalable Vector Graphic (SVG)

Scalable Vector Graphic (SVG) merupakan format file baru untuk menampilkan grafik dalam pengembangan web yang berbasis XML (eXtensible Markup Language). Image SVG mempunyai nama file yang diakhiri dengan ekstension .svg dan dapat dibaca dengan menggunakan browser yang mampu menampilkan file tersebut. Banyak web browser yang mendukung untuk memperlihatkan dokumen SVG dengan menggunakan plug-in atau kontrol ActiveX seperti Adobe SVG Browser. SVG baik untuk digunakan sejumlah aplikasi yang membutuhkan kombinasi data dan gambar, seperti sistem geografi atau sistem keuangan. Fungsi SVG untuk menampilkan grafik 2 dimensional dalam kode XML dan juga dapat mengkreasikan sebuah grafik yang terdiri dari banyak vektor yang berbeda-beda. Pada dasarnya, SVG dapat digunakan untuk membuat tiga jenis objek grafik, yaitu : 1. Path, terdiri dari garis lurus dan kurva. 2. gambar. 3. teks. Kelebihan yang paling utama adalah image tidak akan kehilangan kualitasnya apabila diperbesar atau diperkecil(scalable), karena dibuat berdasarkan metode vektor bukan pixel seperti pada format grafik umumnya yaitu GIF, JPEG dan PNG. Sehingga memungkinkan pengembangan web dan juga designer untuk membuat grafik dengan mutu tinggi. Walaupun berbasis vektor, SVG ternyata juga dapat dikreasikan untuk efek bayangan, gradasi warna, atau juga pencahayaan. Selain itu, animasi juga dapat dikembangkan SVG. Informasi yang disimpan SVG berbentuk teks (dalam XML), bukan binary code, ini menyebabkan SVG memiliki keunggulan dalam kecepatan proses download karena kecilnya kapasitas. Struktur SVG Dalam struktur penulisannya, dokumen SVG mempunyai sedikit aturan sederhana. Aturan dasar yang paling penting adalah dokumen SVG dimulai dengan elemen <SVG> dan diakhiri dengan elemen </SVG>. Selain aturan dasar di atas terdapat aturan lain dalam penulisan sintaksnya antara lain: - SVG sangat memperhatikan sistem penulisan sehingga semua tag, atribut dan nilai atribut ditulis dengan huruf kecil. - Semua tag harus ditutup.Untuk tag, seperti <text> yang di luarnya dapat ditulis sesuatu, akan ditutup dengan tag pasangannya </text>. Sementara untuk tag yang diluarnya tidak dapat ditulis apa-apa akan ditutup dengan </>, seperti <rect....../>. - Komentar memiliki kode yang sama dengan seperti HTML <!-- dan -->. - Untuk memposisikan sebuah elemen digunakan atribut x dan y, bukan top atau left seperti HTML. - Semua atribut dimulai dan diakhiri dengan tanda kutip "..... - Dokumen harus dimuali dengan deklarasi XML Di bawah ini adalah contoh dokumen SVG. <!DOCTYPE svg PUBLIC "-//W3C//DTD svg 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303 stylable.dtd">

<svg width="100px" height="50px"> <text style="fill:red" x ="10" y="20">Hello World !</text> </svg>
file. standalone=no berarti dokumen SVG mempunyai referensi ke sebuah eksternal file, dalam kasus ini DTD, pada "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd.

Dokumen SVG dapat juga diletakkan ke dalam dokumen lain, seperti dokumen XML atau HTML. Untuk membuat dokumen SVG tercakup dalam dokumen HTML dapat menggunakan tag <embed>, tag <object> dan tag <iframe> seperti contoh dibawah ini: Contoh <embed> <embed src="/library/test.svg" width="80" height="80" type="image/svg+xml" /> contoh <object> <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" /> contoh <iframe> <iframe src="/library/rect.svg" width="300" height="100"></iframe> Bentuk Dasar SVG SVG menetapkan enam bentuk dasar, termasuk juga path dan teks, yang dapat digabungkan untuk membentuk image yang mungkin. Setiap bentuk ini mempunyai properti yang menjelaskan posisi dan ukuran dari bentuk. Warna dan garis ditentukan oleh properti fill dan stroke. Lingkaran Elemen untuk membangun sebuah lingkaran menggunakan elemen <circle> dimana terdapat atribut cx dan cy yang mendefinisikan posisi tengah lingkaran, serta atribut r yang mendefinisikan jari-jari lingkaran. Contohnya, <circle cx=40 cy=40 r=35/> Elips Elemen untuk membangun sebuah elips menggunakan elemen <ellipse> dimana terdapat atribut rx yang mendefinisikan jari-jari horisontal dan ry yang mendefinisikan jari-jari vertikal. Contohnya, <ellipse cx=40 cy=40 rx=35 ry=25/> Persegi empat Elemen untuk membangun segi empat menggunakan <rect> dimana terdapat atribut rx dan ry untuk mendefinisikan ujung bulat dari bujur sangkar. Jika ujungnya tidak bulat maka rx=ry=0 atau tidak ada atribut tersebut. Contohnya, <rect x=40 y=40 width=75 height=100 rx=30 ry=20/>, <rect x=40 y=40 width=75 height=100/> Garis Menampilkan garis diantara dua koordinat dan untuk membangunnya menggunakan elemen <line>. Contohnya, <line x1=0 y1=150 x2=400 y2=150/>

Banyak garis (Polyline) Menampilkan sebuah rangkaian garis dengan vertek yang sudah ditentukan dan untuk membangunnya menggunakan elemen <polyline>. Contohnya, <polyline points=50,175 150,175 150,125 250,200/> Poligon Sama dengan polyline, tetapi ditambah sebuah garis dari titik terakhir ke titik yang pertama, membuatnya dan mengandung paling sedikit tiga sisi. Contohnya, <polygon points=350,75 379,175 355,175 355,200 345,200 345,175 321,175/> Path Path memiliki konsep menghubungkan titik ke titik lainnya. Konsep ini dapat diperluas untuk menggambar kurva-kurva atau form-form yang sangat kompleks. Path juga dapat digunakan untuk membuat animasi dan bahkan untuk mengkreasikan teks. Path dapat membuat tiga tipe kurva, antara lain: - Kurva elliptikal merupakan segmen dari sebuah elips, dan dikenal sebagai arcs. Perintah A atau a membuat kurva dengan menspesifikasikan titik awal, titik akhir, jari-jari x dan y, rotasi, dan arah. Contohnya, <path d=M75,100 a50,25 0 1,0 50,25/> - Kurva Bezier kubik didefinisikan dengan sebuah titik awal, sebuah titik akhir, dan dua titik kontrol yang menarik kurva ke arah yang diinginkan. Perintah C atau c (menspesifikasikan titik awal dan akhir) dan perintah S atau s (mengasumsikan bahwa kurva memilih perintah terakhir) membuat kurva ini. Contohnya, <path d=M75,100 c25,-75 50,50 100, 0 s50,-50 150,50/> - Kurva Bezier quadratik sama dengan kurva bezier kubik diatas, tetapi hanya mempunyai satu titik kontrol. Perintah Q (atau q) dan T (atau t) membuat kurva ini. Contohnya, <path d=M75,225 q25,-75 100,0 t150,50/> Teks Elemen teks dapat dipecah menjadi beberapa bagian menggunakan elemen tspan, membuat masing-masing bagian menjadi bentuk individual. Contohnya, <text x=20 y=20 font-size=30>by their <tspan fill=rgb(255,0,0)>R</tspan> <tspan fill=rgb(0,255,0)>G</tspan> <tspan fill=rgb(0,0,255)>B</tspan> values</text> AGUNG AYU YUNITA OLIVIANI_113020112 Contoh lingkaran dengan nama corcle.svg <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> circle:hover {fill-opacity:0.9;} </style> <g style="fill-opacity:0.7;">

<circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" /> <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" /> <circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/> </g> </svg>