- Beranda
- Komunitas
- Tech
- Website, Webmaster, Webdeveloper
SVG, Cara Menggambar Modern
TS
Marcelc
SVG, Cara Menggambar Modern
Pernah mendengar dengan teknologi SVG? Banyak orang segan mempelajari teknologi ini karena terkesan kalau menggambar dengan code itu susah. Jadi mending pakai png, jpg dan gif saja.
Hari ini saya mau share kalau SVG itu untuk semua orang! Bikin SVG tidak perlu menyentuh code sama sekali. Dan untuk gambar vector, keuntungan SVG jauh lebih banyak loh.
Baca juga di web versionnya karena ada banyak demo, gambar dan juga fitur syntax highlighting yang cuma bisa digunakan di web version.
Kalau boleh subscribe juga ke mailing list
SVG, Cara Menggambar Modern
SVG merupakan sebuah format bagi vector graphics. SVG sendiri merupakan singkatan langsung dari Scalable Vector Graphic. Teknologi ini sudah dapat digunakan sejak HTML5 diperkenalkan. SVG dimaksudkan untuk menjadi sebuah alternatif yang lebih baik saat menampilkan vector graphics dibandingkan dengan menggunakan format gambar yang lama seperti PNG, JPG dan GIF. Akan tetapi, SVG masih jarang digunakan karena teknologi ini masih baru, asing dan tampak susah untuk diimplementasikan.
Saya tahu kenapa banyak orang senggan mempelajari SVG. Bayangan awal dari SVG adalah menggambar dengan code. Ini tidaklah benar tetapi tidaklah salah juga. Tenanglah, hari ini setelah saya memperkenalkan SVG kepada anda, anda akan mengetahui kalau SVG merupakan teknologi luar biasa yang dapat digunakan siapa saja! Agar konsep SVG lebih masuk akal kita pelajari dulu apa itu SVG.
Apa Itu SVG
Pada dasarnya, SVG merupakan sebuah markup. Perhatikan bagaimana HTML menggunakan markup seperti <head>, <body> dan <p> di dalam markup <html> untuk menampilkan sebuah website. Konsep dari SVG sangat mirip dimana SVG akan menggunakan markup seperti <circle>, <rect> dan <ellipse> di dalam markup <svg> untuk menampilkan sebuah vector graphic. Contohnya markup SVG adalah seperti ini:
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Maka itu, saat bayangan awal dari SVG adalah menggambar dengan code, bayangan ini tidak sepenuhnya salah. Dengan begitu code SVG, terutama code dari SVG saat menggambar vector yang yang rumit, memiliki kesan yang mengintimidasikan.
Sekali lagi tenanglah, karena dengan SVG anda tidak perlu menggambar dengan code! Oleh karena itu saya katakan kalau pendapat awal mengenai SVG juga tidaklah benar. Vector graphic tools seperti Adobe Illustrator dan Bohemian Coding Sketch memiliki fitur untuk mengexport gambar ke format SVG. Metode ini adalah metode yang disarankan saat menggambar dengan SVG karena saat menggambar, cara terbaik adalah dengan menggambar secara visual seperti bagaimana kita selalu menggambar dari saat menggunakan pen dan pencil. Kita akan mempelajari lebih lanjut mengenai hal ini nanti.
Saya tegaskan kenapa pendapat SVG adalah coding setengah benar dan setengah salah. Memang saat menggambar, cara terbaik adalah dengan vector graphic tools. Article ini juga tidak akan mengajarkan anda mengenai setiap markup SVG tetapi lebih dengan cara memulai menggambar dan mengimplementasikan SVG ke website anda secara cepat dan mudah melalui vector graphics tool. Tetapi anda jangan sampai buta dengan markup yang mendukung SVG juga. Hal ini penting karena anda bisa memanipulasi gambar SVG bila anda mengerti markup SVG! Inilah alasan mengapa mengerti markup SVG dan mungkin juga bahasa coding lain seperti JavaScript dan CSS harus menjadi dalam pertimbangan topik untuk anda pelajari.
SVG vs Canvas
Buat anda yang familiar, saat mendengar SVG, sebuah teknologi serupa yang mungkin muncul di benak anda adalah Canvas. Canvas juga diperkenalkan dengan HTML5, sama seperti SVG. Terlebih dari itu, Canvas juga merupakan sebuah teknologi untuk menggambar menggunakan code.
Ini menjadi membingungkan. Dengan awal yang mirip dan kegunaan yang mirip, ada yang mengira Canvas dan SVG adalah sama. Bagi yang mengentahui kalau SVG dan Canvas merupakan dua teknologi yang berbeda, anda bingung mengapa ada dua teknologi yang mirip. Tidak hanya itu, anda mungkin juga bingung, teknologi apa yang harus anda gunakan.
Oleh karena itu saya ingin memberitahu anda secara kalau SVG dan Canvas merupakan dua teknologi yang berbeda untuk kegunaan yang berbeda juga.
SVG Adalah Vector Based, Canvas Memanipulasi Pixel
Saat berkerja dengan SVG, bayangkan Adobe Illustrator atau shapes dalam Adobe Photoshop. Saat anda tidak suka bentuk dari shape tersebut, atau warna dari shape tersebut, anda dengan gampang dapat langsung merubah attribute apapun yang dimiliki shape tersebut. SVG sama seperti ini karena gambar dengan karakteristik ini disebut sebagai vector.
Canvas lebih seperti foto dimana canvas memanipulasi pixel. Saat menggunakan Canvas, Canvas akan memanipulasi pixel di layar anda untuk menampilkan sebuah gambar sesuai dengan manipulasi yang dilakukan. Ini disambung dengan dua karakteristik berbeda dari SVG dan Canvas yaitu…
SVG Merupakan Document Object Model, Canvas Merupakan Script
Seperti yang sudah dijelaskan tadi SVG merupakan Document Object Model, sama seperti HTML. Oleh karena itu SVG berisi banyak markup yang bisa di manipulasi memalui menambahkan markup secara langsung, dengan JavaScript atau dengan CSS. Karena karakteristik ini juga, saat browser meload code SVG, code yang membuat gambar vector tidak akan hilang dan akan hadir di halaman website dalam bentuk SVG markup dan dapat dimanipulasi nantinya melalui trigger yang ada di halaman website.
Canvas bergantung sepenuhnya dengan JavaScript. Seperti yang dikatakan tadi, Canvas merupakan teknologi yang memanipulasikan pixel. Walaupun Canvas merupakan element HTML <canvas>, element ini hanyalah sebuah canvas kosong, sesuai namanya. Semua pixel yang akan muncul di dalam canvas kosong ini diatur melalui JavaScript. Hasilnya, berbeda dengan SVG, code untuk menggambar Canvas setelah diload akan menghilang dan tidak akan hadir di halaman website. Oleh karena itu, element gambar di dalam Canvas tidak bisa dimanipulasi setelah gambar selesai diload. Satu-satunya cara untuk melakukan hal tersebut adalah dengan menggambar ulang dengan JavaScript. Ini juga berarti, untuk menggunakan Canvas anda memerlukan pengetahuan JavaScript.
Sebuah metafor untuk SVG yang ada di benak saya adalah menggambar dengan origami. Saat menggambar, misalnya sebuah kucing, dengan origami kita akan menggunakan lebih dari satu origami dimana setiap origami akan menjadi sebuah bagian tubuh kucing. Saat salah satu bagian tidak sesuai selerah kita atau posisi dari salah satu tubuh kucing itu salah, kita dapat merubah bentuk origami tersebut dengan melipatnya, menggunakan origami lain untuk merubah warna atau menggeserkannya untuk merubah posisinya. Tetapi tubuh kucing yang lain tidak terpengaruhi.
Metafor untuk Canvas adalah menggambar dengan pencil. Saat menggambar dengan pencil, anda menggambar tubuh kucing secara utuh. Tetapi saat ada bagian yang salah, anda harus menghapusnya dan menggambarnya ulang. Kalau benar-benar tidak bisa dibetulkan, anda harus menggambar ulang seluruh kucing tersebut. Konsep Canvas adalah sama seperti ini.
Kapan Menggunakan SVG Dan Kapan Menggunakan Canvas
Terlihat bagaimana Canvas dan SVG memiliki karakteristik yang sungguh berbeda. Dengan penerapannya yang berbeda juga, penggunannya juga berbeda.
SVG digunakan untuk gambar vector, terutama gambar yang ingin dimanipulasi. Contohnya adalah sebuah icon. Biasanya icon hadir dalam bentuk vector dan sebuah element dari gambar akan berubah saat terkena trigger, misalnya hover. Bayangkan icon bergambar pencil berwarna putih. Saat dihover, pencil ini menjadi lebih tinggi dan berubah menjadi warna kuning. Ini bisa dilakukan dengan SVG karena kita dapat memanipulasikan semua element gambar. Kalau dibilang secara singkat, SVG digunakan untuk vektor dan interaksi.
Canvas digunakan untuk games dan animasi kartun. Kelemahan dari SVG adalah SVG sedikit pelan karena code yang digunakan SVG untuk menggambar tidak hilang dari website dan SVG menggambar melalui object dan bukan pixel. Canvas menggambar dengan pixel dan untuk media dimana pixel akan selalu berubah dalam hitungan detik seperti games dan animasi kartun, Canvas merupakan teknologi yang dapat membuat hal ini menjadi kenyataan.
Menggambar Dengan CSS
Bagi anda yang sering melihat karya designer dan developer di CodePen, anda pasti sering melihat Pen yang kira-kira bernama “Drawn Purely in CSS”. Sebuah lingkaran dan sebuah kotak dapat digambar dengan memanipulasikan width, height dan border. Lalu apa bedanya menggambar dengan CSS dan dengan SVG dan mana yang harus dilakukan?
Sebenarnya menggambar dengan CSS dan SVG adalah sama! Saat menggambar dengan CSS, anda sebenarnya memanipulasikan markup <div>. Karena SVG merupakan kumpulan markup juga, anda tetap bisa menggunakan CSS tetapi kali ini anda akan memanipulasikan markup <circle>, <rect> dan lain-lain.
Perbedaan saat memanipulasikan markup SVG adalah, SVG merupakan markup yang memiliki functionalitas lebih dimana anda dapat menggambar langsung di markupnya seperti <rect width="300" height="100">. Kelebihan ini mengijinkan vector graphic tools seperti Adobe Illustrator untuk mengexport gambar mereka ke code SVG. Oleh karena itu, anda tidak perlu lagi menggunakan property CSS width atau border saat menggambar sebuah bentuk dan biarkan sebuah vector graphic tool melakukan hal itu. Gunakan CSS untuk memberikan style.
Kalau diperhatikan lagi, <rect width="300"> itu sama dengan rect { width: 300; }.
Topik antara perbedaan dari SVG dan Canvas sendiri merupakan sebuah topik yang cukup dalam yang membahas topik seperti performance, usability, working process dan banyak lagi. Mungkin ini adalah sebuah topik yang dapat anda cari tahu secara lebih lanjut.
Keuntungan Menggunakan SVG
Anda dapat menggambar dengan Adobe Photoshop atau Adobe Illustrator, menyimpannya sebagai PNG dan anda gunakan di website anda. Lalu kenapa harus menggunakan SVG? Ada beberapa keuntungan dari SVG.
Menggambar SVG Pertama Anda
Saya rasa anda sudah mulai memahami konsep dibalik sebuah gambar SVG. Oleh karena itu kita bisa menggambar SVG pertama kita. Seperti yang saya katakan tadi, cara menggambar yang terbaik adalah menggambar secara visual dan ini dapat kita lakukan menggunakan vector graphic tools. Dalam contoh ini saya akan menggunakan Adobe Illustrator karena vector graphic tool ini merupakan salah satu yang paling umum. Tetapi untuk tools lain, caranya kira-kira adalah mirip.
Pertama saya menggambar sebuah vector terlebih dahulu. Saya menggambar sebuah Rocketship. Gambar ini sedikit kompleks tetapi ini akan membuktikan kalau anda dapat membuat sebuah SVG yang kompleks dengan mudah.
Kalau dalam Adobe Illustrator biasanya gambar harus di export, kali ini pilih Save As. Save As biasanya untuk menyimpan file dalam format .ai. Tetapi ada pilihan untuk format .svg. SVG di save dalam metode Save As karena ingat, file .svg bisa berkerja sebagai save file juga layaknya .ai. Akan muncul sebuah panel mengenai opsi SVG.
Setelah di click save, akan muncul panel save untuk file SVG.
Bisa dilihat ada tombol More Options.
Optionnya tidak terlalu berpengaruh. Tetapi ada dua option yang penting untuk diketahui. Pertama dilihat dulu setelah More Option ditekan akan muncul panel seperti ini:
Pertama anda perlu mengetahui mengenai Images Location. Ada dua option yang bisa dipilih yaitu Embed dan Link. Perbedaannya adalah untuk Embed gambar akan langsung berada di dalam file. Ini memastikan kalau gambar akan selalu ada tetapi file akan menjadi sedikit berat. Untuk Link seperti namanya, gambar akan di Link. Untuk saya sendiri, kedua option ini tidak terlalu berpengaruh karena yang saya pentingkan adalah code dari SVGnya.
Yang paling penting untuk diketahu dari option yang ada adalah Decimal. Terlihat decimal memiliki value 3. Decimal sendiri merupakan berapa decimal dari posisi koordinat setiap node dari gambar vector anda. Semakin besar decimalnya semakin halus dan akurat gambar yang anda buat tetapi size dari file akan bertambah. Terlebih dari ini option yang lain tidak terlalu perlu diperhatikan. Anda mungkin melihat juga ada SVG Version, biarkan di Version 1.1 saja karena ini adalah version yang disetujui oleh W3C.
Kalau diperhatikan ada juga pilihan tombol SVG Code.
Bila dibuka, anda dapat melihat semua code markup SVG yang membentuk gambar vector anda. Ini bisa menjadi sebuah fitur yang berguna, misalnya saat anda tidak ingin menyimpan file SVG dan hanya membutuhkan codenya saja.
Dengan begini anda sudah selesai membuat gambar SVG pertama anda! Gampang bukan? SVG tentu bukanlah sesuatu yang perlu ditakuti dan dihindari.
Implementasi SVG Dalam Website
Membuat gambar SVG dan menyimpannya dalam format .svg merupakan sebuah tugas yang sudah selesai. Secara teknis, pekerjaan anda sudah selesai. Gambar vector anda sudah menjadi sebuah gambar dalam format .svg yang bisa digunakan layaknya gambar lain tetapi dengan tambahan yaitu keuntungan yang disebutkan tadi.
Tetapi, saat ingin menggunakannya dalam website, ada beberapa cara yang anda bisa lakukan. Tenang, caranya tidak berbeda jauh dari cara mengimplementasikan gambar yang biasa.
Menggunakan SVG Sebagai HTML Image
Saat anda menampilkan gambar dalam HTML, anda menggunakan tags <img>. Saat anda ingin menampilkan gambar SVG dalam HTML, anda juga menggunakan tags <img> dengan metode yang sama.
<img src="gambar.svg">
Code di atas menarget gambar secara biasa. Bedanya bila biasanya gambar memiliki format .png, .jpg atau .gif, kali ini gambar memiliki format .svg. Ukuran gambar vector anda akan mengikuti ukuran artboard yang ditentukan di vector graphic tool yang anda gunakan. Tetapi sama seperti gambar dalam HTML, anda dapat memilih ukuran sendiri melalui attribute width dan height.
<img src="gambar.svg" width="250x" height="250px">
Menggunakan SVG Sebagai CSS Background
Anda juga sering menggunakan gambar dalam CSS, terutama sebagai background. Sama seperti penerapan SVG dalam HTML, dalam CSS, SVG juga diterapkan layaknya gambar seperti biasanya.
body{
background: url(gambar.svg);
}
Hanya formatnya saja yang berubah, cara implementasinya sama. Gampang bukan? SVG memang gampang diterapkan karena SVG sendiri adalah sebuah gambar.
Click disini untuk baca web versionnya! Ada banyak demo CodePen, gambar dan fitur syntax highlighting yang hanya bisa muncul di web versionnya.
Click disini untuk lebih banyak article serupa yang berkualitas dalam bahasa indonesia!
Click disini juga untuk subscribe ke mailing list agar article baru dapat dikirim ke inbox agan setiap minggunya
Hari ini saya mau share kalau SVG itu untuk semua orang! Bikin SVG tidak perlu menyentuh code sama sekali. Dan untuk gambar vector, keuntungan SVG jauh lebih banyak loh.
Baca juga di web versionnya karena ada banyak demo, gambar dan juga fitur syntax highlighting yang cuma bisa digunakan di web version.
Kalau boleh subscribe juga ke mailing list
SVG, Cara Menggambar Modern
SVG merupakan sebuah format bagi vector graphics. SVG sendiri merupakan singkatan langsung dari Scalable Vector Graphic. Teknologi ini sudah dapat digunakan sejak HTML5 diperkenalkan. SVG dimaksudkan untuk menjadi sebuah alternatif yang lebih baik saat menampilkan vector graphics dibandingkan dengan menggunakan format gambar yang lama seperti PNG, JPG dan GIF. Akan tetapi, SVG masih jarang digunakan karena teknologi ini masih baru, asing dan tampak susah untuk diimplementasikan.
Saya tahu kenapa banyak orang senggan mempelajari SVG. Bayangan awal dari SVG adalah menggambar dengan code. Ini tidaklah benar tetapi tidaklah salah juga. Tenanglah, hari ini setelah saya memperkenalkan SVG kepada anda, anda akan mengetahui kalau SVG merupakan teknologi luar biasa yang dapat digunakan siapa saja! Agar konsep SVG lebih masuk akal kita pelajari dulu apa itu SVG.
Apa Itu SVG
Pada dasarnya, SVG merupakan sebuah markup. Perhatikan bagaimana HTML menggunakan markup seperti <head>, <body> dan <p> di dalam markup <html> untuk menampilkan sebuah website. Konsep dari SVG sangat mirip dimana SVG akan menggunakan markup seperti <circle>, <rect> dan <ellipse> di dalam markup <svg> untuk menampilkan sebuah vector graphic. Contohnya markup SVG adalah seperti ini:
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Maka itu, saat bayangan awal dari SVG adalah menggambar dengan code, bayangan ini tidak sepenuhnya salah. Dengan begitu code SVG, terutama code dari SVG saat menggambar vector yang yang rumit, memiliki kesan yang mengintimidasikan.
Sekali lagi tenanglah, karena dengan SVG anda tidak perlu menggambar dengan code! Oleh karena itu saya katakan kalau pendapat awal mengenai SVG juga tidaklah benar. Vector graphic tools seperti Adobe Illustrator dan Bohemian Coding Sketch memiliki fitur untuk mengexport gambar ke format SVG. Metode ini adalah metode yang disarankan saat menggambar dengan SVG karena saat menggambar, cara terbaik adalah dengan menggambar secara visual seperti bagaimana kita selalu menggambar dari saat menggunakan pen dan pencil. Kita akan mempelajari lebih lanjut mengenai hal ini nanti.
Saya tegaskan kenapa pendapat SVG adalah coding setengah benar dan setengah salah. Memang saat menggambar, cara terbaik adalah dengan vector graphic tools. Article ini juga tidak akan mengajarkan anda mengenai setiap markup SVG tetapi lebih dengan cara memulai menggambar dan mengimplementasikan SVG ke website anda secara cepat dan mudah melalui vector graphics tool. Tetapi anda jangan sampai buta dengan markup yang mendukung SVG juga. Hal ini penting karena anda bisa memanipulasi gambar SVG bila anda mengerti markup SVG! Inilah alasan mengapa mengerti markup SVG dan mungkin juga bahasa coding lain seperti JavaScript dan CSS harus menjadi dalam pertimbangan topik untuk anda pelajari.
SVG vs Canvas
Buat anda yang familiar, saat mendengar SVG, sebuah teknologi serupa yang mungkin muncul di benak anda adalah Canvas. Canvas juga diperkenalkan dengan HTML5, sama seperti SVG. Terlebih dari itu, Canvas juga merupakan sebuah teknologi untuk menggambar menggunakan code.
Ini menjadi membingungkan. Dengan awal yang mirip dan kegunaan yang mirip, ada yang mengira Canvas dan SVG adalah sama. Bagi yang mengentahui kalau SVG dan Canvas merupakan dua teknologi yang berbeda, anda bingung mengapa ada dua teknologi yang mirip. Tidak hanya itu, anda mungkin juga bingung, teknologi apa yang harus anda gunakan.
Oleh karena itu saya ingin memberitahu anda secara kalau SVG dan Canvas merupakan dua teknologi yang berbeda untuk kegunaan yang berbeda juga.
SVG Adalah Vector Based, Canvas Memanipulasi Pixel
Saat berkerja dengan SVG, bayangkan Adobe Illustrator atau shapes dalam Adobe Photoshop. Saat anda tidak suka bentuk dari shape tersebut, atau warna dari shape tersebut, anda dengan gampang dapat langsung merubah attribute apapun yang dimiliki shape tersebut. SVG sama seperti ini karena gambar dengan karakteristik ini disebut sebagai vector.
Canvas lebih seperti foto dimana canvas memanipulasi pixel. Saat menggunakan Canvas, Canvas akan memanipulasi pixel di layar anda untuk menampilkan sebuah gambar sesuai dengan manipulasi yang dilakukan. Ini disambung dengan dua karakteristik berbeda dari SVG dan Canvas yaitu…
SVG Merupakan Document Object Model, Canvas Merupakan Script
Seperti yang sudah dijelaskan tadi SVG merupakan Document Object Model, sama seperti HTML. Oleh karena itu SVG berisi banyak markup yang bisa di manipulasi memalui menambahkan markup secara langsung, dengan JavaScript atau dengan CSS. Karena karakteristik ini juga, saat browser meload code SVG, code yang membuat gambar vector tidak akan hilang dan akan hadir di halaman website dalam bentuk SVG markup dan dapat dimanipulasi nantinya melalui trigger yang ada di halaman website.
Canvas bergantung sepenuhnya dengan JavaScript. Seperti yang dikatakan tadi, Canvas merupakan teknologi yang memanipulasikan pixel. Walaupun Canvas merupakan element HTML <canvas>, element ini hanyalah sebuah canvas kosong, sesuai namanya. Semua pixel yang akan muncul di dalam canvas kosong ini diatur melalui JavaScript. Hasilnya, berbeda dengan SVG, code untuk menggambar Canvas setelah diload akan menghilang dan tidak akan hadir di halaman website. Oleh karena itu, element gambar di dalam Canvas tidak bisa dimanipulasi setelah gambar selesai diload. Satu-satunya cara untuk melakukan hal tersebut adalah dengan menggambar ulang dengan JavaScript. Ini juga berarti, untuk menggunakan Canvas anda memerlukan pengetahuan JavaScript.
Sebuah metafor untuk SVG yang ada di benak saya adalah menggambar dengan origami. Saat menggambar, misalnya sebuah kucing, dengan origami kita akan menggunakan lebih dari satu origami dimana setiap origami akan menjadi sebuah bagian tubuh kucing. Saat salah satu bagian tidak sesuai selerah kita atau posisi dari salah satu tubuh kucing itu salah, kita dapat merubah bentuk origami tersebut dengan melipatnya, menggunakan origami lain untuk merubah warna atau menggeserkannya untuk merubah posisinya. Tetapi tubuh kucing yang lain tidak terpengaruhi.
Metafor untuk Canvas adalah menggambar dengan pencil. Saat menggambar dengan pencil, anda menggambar tubuh kucing secara utuh. Tetapi saat ada bagian yang salah, anda harus menghapusnya dan menggambarnya ulang. Kalau benar-benar tidak bisa dibetulkan, anda harus menggambar ulang seluruh kucing tersebut. Konsep Canvas adalah sama seperti ini.
Kapan Menggunakan SVG Dan Kapan Menggunakan Canvas
Terlihat bagaimana Canvas dan SVG memiliki karakteristik yang sungguh berbeda. Dengan penerapannya yang berbeda juga, penggunannya juga berbeda.
SVG digunakan untuk gambar vector, terutama gambar yang ingin dimanipulasi. Contohnya adalah sebuah icon. Biasanya icon hadir dalam bentuk vector dan sebuah element dari gambar akan berubah saat terkena trigger, misalnya hover. Bayangkan icon bergambar pencil berwarna putih. Saat dihover, pencil ini menjadi lebih tinggi dan berubah menjadi warna kuning. Ini bisa dilakukan dengan SVG karena kita dapat memanipulasikan semua element gambar. Kalau dibilang secara singkat, SVG digunakan untuk vektor dan interaksi.
Canvas digunakan untuk games dan animasi kartun. Kelemahan dari SVG adalah SVG sedikit pelan karena code yang digunakan SVG untuk menggambar tidak hilang dari website dan SVG menggambar melalui object dan bukan pixel. Canvas menggambar dengan pixel dan untuk media dimana pixel akan selalu berubah dalam hitungan detik seperti games dan animasi kartun, Canvas merupakan teknologi yang dapat membuat hal ini menjadi kenyataan.
Menggambar Dengan CSS
Bagi anda yang sering melihat karya designer dan developer di CodePen, anda pasti sering melihat Pen yang kira-kira bernama “Drawn Purely in CSS”. Sebuah lingkaran dan sebuah kotak dapat digambar dengan memanipulasikan width, height dan border. Lalu apa bedanya menggambar dengan CSS dan dengan SVG dan mana yang harus dilakukan?
Sebenarnya menggambar dengan CSS dan SVG adalah sama! Saat menggambar dengan CSS, anda sebenarnya memanipulasikan markup <div>. Karena SVG merupakan kumpulan markup juga, anda tetap bisa menggunakan CSS tetapi kali ini anda akan memanipulasikan markup <circle>, <rect> dan lain-lain.
Perbedaan saat memanipulasikan markup SVG adalah, SVG merupakan markup yang memiliki functionalitas lebih dimana anda dapat menggambar langsung di markupnya seperti <rect width="300" height="100">. Kelebihan ini mengijinkan vector graphic tools seperti Adobe Illustrator untuk mengexport gambar mereka ke code SVG. Oleh karena itu, anda tidak perlu lagi menggunakan property CSS width atau border saat menggambar sebuah bentuk dan biarkan sebuah vector graphic tool melakukan hal itu. Gunakan CSS untuk memberikan style.
Kalau diperhatikan lagi, <rect width="300"> itu sama dengan rect { width: 300; }.
Topik antara perbedaan dari SVG dan Canvas sendiri merupakan sebuah topik yang cukup dalam yang membahas topik seperti performance, usability, working process dan banyak lagi. Mungkin ini adalah sebuah topik yang dapat anda cari tahu secara lebih lanjut.
Keuntungan Menggunakan SVG
Anda dapat menggambar dengan Adobe Photoshop atau Adobe Illustrator, menyimpannya sebagai PNG dan anda gunakan di website anda. Lalu kenapa harus menggunakan SVG? Ada beberapa keuntungan dari SVG.
- Scalable. Seperti namanya Scalable Vector Graphic, gamabar yang terbuat dari SVG adalah scalable. Pernah mendengar ungkapan, “Kalau terlalu dizoom nanti gambarnya pecah!” Tetapi saat menggunakan Adobe Illustrator atau shapes dalam Adobe Photoshop, mau dizoom seberapa jauh atau di buah lebar gambar sebagaimana rupa, gambar vector tidak akan pecah. Karakteristik ini disebut sebagai scalable. Format PNG, JPG dan GIF merupakan kumpulan pixel dan dengan begitu saat gambarnya terlalu dizoom atau diperlebar, gambarnya akan pecah. SVG akan tetap mempertahankan karakteristik vector layaknya vector di Adobe Illustrator dan tidak akan pecah di dimensi apapun.
- Manipulatable. (Animated) SVG sendiri merupakan kumpulan markup. Seperti yang sudah dikatakan, artinya SVG dapat dimanipulasi dengan CSS dan JavaScript. Ini membuat SVG dapat digunakan untuk berbagai macam interaksi seperti hover. Tetapi interaksi yang dapat diterapkan di SVG lebih dari hover. Anda juga bisa memberikan animasi terhadap SVG. Contohnya tandah centang yang berubah menjadi tanda silang saat di hover melalui animasi.
- Small File, Compress Well. File SVG sangatlah kecil. PNG, JPG dan GIF merupakan kumpulan pixel. SVG sendiri sebenarnya bukanlah sebuah gambar melainkan sebuah markup yang menjadi gambar. Bila sebuah lingakaran merupakan kumpulan pixel yang membentuk sebuah lingkaran dalam format PNG, sebuah lingkaran dalam SVG hanyalah berubah markup <circle>. Dengan begini, file SVG sangatlah kecil! Banner-banner yang ditemukan di website ini hanya berukuran 10kb dalam format SVG!
- Can Be Revisited And Edited. Sekali lagi perlu diingat, SVG merupakan kumpulan markup dan bukan kumpulan pixel. Oleh karena itu, SVG dapat di kunjungi lagi dan di edit menggunakan Adobe Illustrator! Save gambar sebagai SVG atau simpan code SVG dalam format .svg. Anda dapat membuka file tersebut dengan Adobe Illustrator atau vector graphic tools lain dan anda langsung dapat mengedit vector tersebut layaknya file save-an .ai dan lainnya! Semua tools dalam vector graphic tools dapat berkerja dalam file .svg yang ingin di edit. Caranya mudah, buka saja file .svg layaknya file Adobe Illustrator atau file save vector graphic lainnya. Dan ya, ini semua hanya dalam sebuah file berukuran 10kb.
Menggambar SVG Pertama Anda
Saya rasa anda sudah mulai memahami konsep dibalik sebuah gambar SVG. Oleh karena itu kita bisa menggambar SVG pertama kita. Seperti yang saya katakan tadi, cara menggambar yang terbaik adalah menggambar secara visual dan ini dapat kita lakukan menggunakan vector graphic tools. Dalam contoh ini saya akan menggunakan Adobe Illustrator karena vector graphic tool ini merupakan salah satu yang paling umum. Tetapi untuk tools lain, caranya kira-kira adalah mirip.
Pertama saya menggambar sebuah vector terlebih dahulu. Saya menggambar sebuah Rocketship. Gambar ini sedikit kompleks tetapi ini akan membuktikan kalau anda dapat membuat sebuah SVG yang kompleks dengan mudah.
Kalau dalam Adobe Illustrator biasanya gambar harus di export, kali ini pilih Save As. Save As biasanya untuk menyimpan file dalam format .ai. Tetapi ada pilihan untuk format .svg. SVG di save dalam metode Save As karena ingat, file .svg bisa berkerja sebagai save file juga layaknya .ai. Akan muncul sebuah panel mengenai opsi SVG.
Setelah di click save, akan muncul panel save untuk file SVG.
Bisa dilihat ada tombol More Options.
Optionnya tidak terlalu berpengaruh. Tetapi ada dua option yang penting untuk diketahui. Pertama dilihat dulu setelah More Option ditekan akan muncul panel seperti ini:
Pertama anda perlu mengetahui mengenai Images Location. Ada dua option yang bisa dipilih yaitu Embed dan Link. Perbedaannya adalah untuk Embed gambar akan langsung berada di dalam file. Ini memastikan kalau gambar akan selalu ada tetapi file akan menjadi sedikit berat. Untuk Link seperti namanya, gambar akan di Link. Untuk saya sendiri, kedua option ini tidak terlalu berpengaruh karena yang saya pentingkan adalah code dari SVGnya.
Yang paling penting untuk diketahu dari option yang ada adalah Decimal. Terlihat decimal memiliki value 3. Decimal sendiri merupakan berapa decimal dari posisi koordinat setiap node dari gambar vector anda. Semakin besar decimalnya semakin halus dan akurat gambar yang anda buat tetapi size dari file akan bertambah. Terlebih dari ini option yang lain tidak terlalu perlu diperhatikan. Anda mungkin melihat juga ada SVG Version, biarkan di Version 1.1 saja karena ini adalah version yang disetujui oleh W3C.
Kalau diperhatikan ada juga pilihan tombol SVG Code.
Bila dibuka, anda dapat melihat semua code markup SVG yang membentuk gambar vector anda. Ini bisa menjadi sebuah fitur yang berguna, misalnya saat anda tidak ingin menyimpan file SVG dan hanya membutuhkan codenya saja.
Dengan begini anda sudah selesai membuat gambar SVG pertama anda! Gampang bukan? SVG tentu bukanlah sesuatu yang perlu ditakuti dan dihindari.
Implementasi SVG Dalam Website
Membuat gambar SVG dan menyimpannya dalam format .svg merupakan sebuah tugas yang sudah selesai. Secara teknis, pekerjaan anda sudah selesai. Gambar vector anda sudah menjadi sebuah gambar dalam format .svg yang bisa digunakan layaknya gambar lain tetapi dengan tambahan yaitu keuntungan yang disebutkan tadi.
Tetapi, saat ingin menggunakannya dalam website, ada beberapa cara yang anda bisa lakukan. Tenang, caranya tidak berbeda jauh dari cara mengimplementasikan gambar yang biasa.
Menggunakan SVG Sebagai HTML Image
Saat anda menampilkan gambar dalam HTML, anda menggunakan tags <img>. Saat anda ingin menampilkan gambar SVG dalam HTML, anda juga menggunakan tags <img> dengan metode yang sama.
<img src="gambar.svg">
Code di atas menarget gambar secara biasa. Bedanya bila biasanya gambar memiliki format .png, .jpg atau .gif, kali ini gambar memiliki format .svg. Ukuran gambar vector anda akan mengikuti ukuran artboard yang ditentukan di vector graphic tool yang anda gunakan. Tetapi sama seperti gambar dalam HTML, anda dapat memilih ukuran sendiri melalui attribute width dan height.
<img src="gambar.svg" width="250x" height="250px">
Menggunakan SVG Sebagai CSS Background
Anda juga sering menggunakan gambar dalam CSS, terutama sebagai background. Sama seperti penerapan SVG dalam HTML, dalam CSS, SVG juga diterapkan layaknya gambar seperti biasanya.
body{
background: url(gambar.svg);
}
Hanya formatnya saja yang berubah, cara implementasinya sama. Gampang bukan? SVG memang gampang diterapkan karena SVG sendiri adalah sebuah gambar.
Click disini untuk baca web versionnya! Ada banyak demo CodePen, gambar dan fitur syntax highlighting yang hanya bisa muncul di web versionnya.
Click disini untuk lebih banyak article serupa yang berkualitas dalam bahasa indonesia!
Click disini juga untuk subscribe ke mailing list agar article baru dapat dikirim ke inbox agan setiap minggunya
Diubah oleh Marcelc 07-11-2014 12:15
0
7.7K
14
Komentar yang asik ya
Urutan
Terbaru
Terlama
Komentar yang asik ya
Komunitas Pilihan