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> | 
