10 Contoh SVG Yang Keren dan Menginspirasi – SVG adalah format gambar grafis vektor. Secara harfiah berarti Scalable Vector Graphics (SVG). SVG sejauh ini di bangun dengan free royalti yang dikembangkan dan dikelola oleh W3C Working Group. Pada dasarnya, anda dapat menggunakan SVG di web dengan mudah, tetapi ada banyak yang harus anda ketahui.
SVG tampak seperti HTML, karena keduanya pada dasarnya XML (tag yang diberi nama dengan tanda kurung dan berisi konten didalamnya). SVG juga mendukung hampir setiap browser diluar sana dan hanya memiliki masalah dengan IE8 kebawah dan Android 2.3 kebawah. Pada tulisan kali ini TWD akan menampilkan 10 contoh SVG yang menurut kami cukup menarik untuk dilihat dan semoga menjadi motivasi.
1. Trajan
Trajan sangat interaktif, memungkinkan anda untuk memilih bagian dari gambar yang bisa ditarik keluar. Ini dekonstruksi animasi arsitektur yang sangat bagus untuk anda lihat.
2. You! Sinkronisasi Animasi dan Audio
You adalah andio dan animasi grafis yang sinkron yang dikombinasikan dengan SVG, javascript dan simulasi kamera. Dibuat oleh Vincent Hardy.
3. Animasi Lirik Lagu Dengan SVG
SVG Lirik ini adalah satu karya dari Vincent Hardy. Ini menggabungkan SVG, webfonts dan audio tag untuk membuat animasi visual lirik yang menyenangkan yang disinkronisasikan dengan trek musik.
Baca Juga: Kumpulan Tools SVG Untuk Web Designer & Developer
4. Analytics with Raphael and SVG
Analytics dengan Raphael & SVG adalah sebuah library javascript yang membantu mempermudah pengerjaan vektor grafis pada website. Support browser mulai dari IE6+ keatas, situs ini memiliki beberapa contoh SVG keren dan mengesankan tentang visualisasi data.
5. Creepy Mouth
Creepy Mouth adalah sebuah eksperimen yang memungkinkan anda untuk melihat ke dalam mulut manusia dengan SVG. Ini menggabungkan vektor grafis dengan animasi untuk membantu meningkatkan pendidikan online dengan cara yang pernah dilakukan oleh FLASH pada beberapa tahun lalu.
6. Rube Goldberg machine
Dalam contoh ini anda dapat melihat pesawat kertas terbang melintas untuk memukul bola yang kemudian memicu reaksi berantai yang lain, menimbulkan efek domino dan akhirnya lampu menyala, cek disini.
7. Envilen EM
Enliven ’em adalah plugin Jquery yang memungkinkan anda menghidupkan setiap grafis vektor dalam bentuk SVG dengan berbagai cara yang berbeda ketika ilustrasi terlihat dalam viewport browser dari pengunjung.
8. Trianglify
Trianglify adalah library javascript untuk menghasilkan segitiga berwarna-warni yang dapat digunakan sebagai gambar SVG dan CSS background.
9. Page Loading Effects
Page Loading Effects adalah sebuah kumpulan efek loading yang sangat kreatif dibuat dengan menggunakan animasi SVG dengan snap.svg. Idenya adalah untuk menunjukan overlay dengan bentuk animasi yang menarik ketika konten baru akan dimuat.
10. Blobular
Blobular adalah salah satu contoh SVG yang dibuat oleh Cameron Adams. Ini memungkinkan anda untuk mengubah warna, kekentalan, dan ukuran dengan mudah. Anda dapat bereksperimen dengan memperluas tepi gumpalan, anda bisa menarik, menggabungkan blobs. Cukup menarik untuk dicoba.
—
Itulah beberapa contoh SVG yang sangat keren dan mengarik yang bisa anda coba, semoga dapat menumbuhkan inspirasi kepada anda, dan membuat anda semakin mencintai dunia web design :)
Salam web design indonesia.
Tutorial cara bikin svg dong bos :D
[…] Baca juga: 10 Contoh SVG Yang Keren dan Menginspirasi […]