Tutorial Web Design

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.