Mengenal Format SVG

SVG singkatan dari Scalable Vector Graphics adalah sebuah format file baru untuk menampilkan grafik dalam pengembangan. SVG memiliki dua bagian: sebuah file berbasis XML format dan API untuk pemrograman aplikasi grafis.

SVG juga bebas royalti netral vendor-standar terbuka yang dikembangkan di bawah W3C Proses. Memiliki dukungan industri yang kuat, Penulisan dari spesifikasi SVG meliputi Adobe, Agfa, Apple, Canon, Corel, Ericsson, HP, IBM, Kodak, Macromedia, Microsoft, Nokia, Sharp dan Sun Microsystems. Tampilan SVG dikerahkan ke lebih dari 100 juta desktop, dan ada dukungan luas dalam banyak authoring tools.

SVG ini dibangun berdasarkan standar-standar sukses lainnya seperti XML (SVG grafis berbasis teks dan dengan demikian mudah untuk menciptakan), JPEG dan PNG untuk format gambar, script dan DOM untuk interaktivitas, SMIL untuk animasi dan CSS untuk styling.

SVG juga dioperasikan. W3C merilis sebuah suite dan pelaksanaan tes hasil untuk memastikan kesesuaian.

Macam- Macam SVG

SVG 1.1 adalah Rekomendasi W3C dan merupakan versi terbaru dari spesifikasi lengkap.

SVG Tiny 1,2 adalah Rekomendasi W3C, dan target perangkat mobile. Ada berbagai SVG pengembangan modul di bawah yang akan memperluas versi sebelumnya dari spesifikasi, dan yang akan berfungsi sebagai inti dari perkembangan SVG masa depan.

Fungsi SVG untuk menampilkan grafik -grafik 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.

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:

Di bawah ini adalah contoh dokumen SVG.

<?xml version=”1.0″ encoding=”iso-8859–1″?>

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

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:

<path d=”M75,100 a50,25 0 1,0 50,25”/>

<path d=”M75,100 c25,-75 50,50 100, 0 s50,-50 150,50”/>

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

Kelebihan dan Kekurangan

1.Kelebihan SVG

gambar tidak akan kehilangan kualitasnya apabila diperbesar atau diperkecil (scalable), karena dibuat berdasarkan metode vektor (vector), bukan pixel (seperti format grafik pada umumnya, GIF, JPEG dan PNG). Sehingga memungkinkan pengembang web dan juga designer untuk membuat grafik dengan kualitas mutu tinggi. Walaupun SVG berbasis vektor (dalam artian semua objek dibangun dengan prinsip vektor), SVG ternyata juga dapat dikreasikan untuk efek bayangan, gradasi warna atau juga pencahayaan, Selain itu, animasi juga dapat dikembangkan SVG, sesuatu yang tidak dimiliki oleh GIF, JPEG dan PNG. Hal ini dimungkinkan dengan integrasi DOM (Document Object Modell). Jadi, grafik SVG dapat dianimasikan melalui perintah script.

pengkodeannya yang lumayan mudah karena berakar XML. Tidak perlu susah payah untuk mengerjakan pengembangan pada web untuk mempelajari bahasa baru, karena pada dasarnya SVG adalah pengimplementasian objek vektor dalam web dengan menggunakan XML. Informasi (vektor) yang disimpan SVG berbentuk teks (dalam XML), bukan binary code, ini memiliki keunggulan dalam kecepatan proses download karena kecilnya kapasitas file.

  • SVG is free
  • SVG support scalable graphics
  • Animation and multimedia support ( bikin aplikasi mirip flash)
  • CSS, javascript (ECMA Script)
  • Simple (XML based)
  • Multiplatform : internet explorer menggunakan adobe svg viewer, rencananya sih svg akan diadopsi di ie8, opera sejak versi 8 sudah support svg, untuk browser lain ada svg viewer, apache batik.
  • SVGtiny, SVG mobile : untuk dapat diakses di perangkat mobile : smartphone, pda dll.

2. kekurangan SVG

Untuk membaca SVG kita harus menginstall dulu plug-in, yaitu SVG-Viewer, SVG-Viewer teraktual dikembangkan oleh ADOBE. Browser Croczilla, variasi dari Mozilla-0.9, sudah mendukung SVG, tanpa perlu menginstal SVG-Viewer terlebih dahulu.

--

--

UI Engineer at SellFazz by Payfazz Teknologi Nusantara

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Agus Andri Putra

Agus Andri Putra

UI Engineer at SellFazz by Payfazz Teknologi Nusantara