Web terus berkembang bersamaan dengan semua elemennya, termasuk aspek paling populer dari web yaitu gambar. Gambar diibaratkan seperti kelopak bunga, dimana mengekspresikan keindahan. Namun perkembangan gambar belum begitu cepat untuk bisa menyesuaikan perubahan evolusi web.
Gambar masih menjadi elemen yang banyak menghabiskan banyak waktu dalam pembuatan halaman web. Semakin besar ukuran sebuah situs web, semakin lama waktu yang dibutuhkan untuk memuatnya. Dan semakin lama waktu yang dibutuhkan untuk memuat, semakin besar kemungkinan kita akan kehilangan pengunjung, pelanggan potensial, dan akhirnya berimbas pada bisnis.
Dengan pengembangan web responsif, semakin penting untuk menyajikan konten yang secara alami dapat menyesuaikan ukurannya dengan resolusi perangkat yang digunakan untuk browsing situs web. Scalable Vector Graphics (SVG) merupakan satu jenis format gambar yang dapat disesuaikan ukurannya tanpa kehilangan kualitasnya. Gambar SVG memberi lebih banyak kebebasan pada ukuran gambar yang kamu gunakan juga interaksi jenis gambar ini dengan desain kamu.
Scalable Vector Graphics adalah markup berbasis XML yang dapat berisi vektor dua dimensi. Vektor tersebut bisa berupa shape, path, atau apapun yang bisa dibuat menggunakan Illustrator. SVG jauh lebih baik daripada format gambar lainnya yang bisa kita gunakan di web karena kita bisa memanipulasinya dengan kode.
Aplikasi SVG Gratis
Inkscape
Inkscape merupakan aplikasi editing grafis populer yang terkenal di kalangan freelancer dan desainer. Editor graphics (vector) open-source dan gratis ini digunakan oleh ribuan orang untuk membuat dan mengoptimalkan grafik vektor dalam bentuk grafik, diagram, logo, ilustrasi, bahkan multiplex imagery. Inkscape terkenal karena memiliki dukungan penuh untuk SVG, namun sejak tahun 2015 Inkscape tidak lagi mendukung fitur animasi SVG.
SVG.js
Masih seputar animasi SVG, dan dengan library SVG.js pengembang dan desainer bisa mendapatkan fitur yang memungkinkan untuk memodifikasi gambar SVG untuk membuat animasi yang dapat kamu gunakan untuk pembuatan video, kebutuhan situs web, atau hanya untuk menyalurkan ide kreatif kamu.
Method Draw
Draw Metode adalah aplikasi web gratis untuk pengeditan file SVG langsung. Method Draw secara khusus dibangun sebagai editor grafis vektor online.
Snap.svg
Snap.svg memungkinkan kamu membuat, membuat dan mengedit file SVG secara gratis untuk menciptakan animasi seni modern dan canggih yang akan membuat takjub pelanggan, pengunjung, bahkan teman desainer-mu.
Dengan berkembangnya teknologi web, kita dapat melihat bagaimana Snap.svg dapat digunakan untuk membantu menciptakan game online yang lebih interaktif, namun hal terpenting adalah konten online yang memiliki visual luar bisa. SVG adalah cara terbaik untuk membuat grafik vektor yang interaktif yang akan terlihat bagus di layar ukuran manapun. Dan perpustakaan JavaScript Snap.svg membuat kamu bekerja dengan aset SVG semudah ketika menggunakan jQuery untuk memodifikasi DOM.
Adobe Edge
Adobe adalah pemimpin dalam mengembangkan jenis aplikasi desain grafis dimana membuat desain grafis menjadi mudah dan fleksibel. Adobe terus mengikuti perkembangan standar desain web terbaru dan mengerti bahwa terkadang dibutuhkan lebih dari sekedar gambar cantik untuk membuat pengunjung dan pelanggan kamu tetap terhibur, dan disinilah Adobe Edge Animate bisa dimanfaatkan.
Jika kamu mencari cara cepat dan mudah dalam membuat animasi SVG yang menakjubkan, tidak ada salahnya untuk mencoba Adobe Edge. Kamu bisa melihat banyak video tutorial tentang cara menggunakan Adobe Edge untuk grafis SVG di YouTube.
SVG Morpheus
Ingin menambahkan beberapa interaktivitas pada gambar SVG kamu? Gunakan Morpheus, sebuah tools untuk mengubah banyak gambar SVG dengan efek animasi yang menakjubkan.
Quasi-svg
Selami aspek kreatif diri kamu dalam dalam desain web dan grafis dengan menggunakan aplikasi Quasi untuk menciptakan pola quasicrystalline yang indah yang akan mempercantik tampilan apps, desain situs web, atau latar belakang sederhana untuk proyek yang sedang kamu bangun. Pada panel pengaturan memungkinkan kamu membangun pola yang benar-benar sesuai dengan berbagai desain.
Plain Pattern
Plain Pattern adalah aplikasi yang mudah digunakan untuk menciptakan pola warna polos yang dapat diekspor kedalam format SVG.
Chartist.js
Keindahan desain grafis yang bisa dengan mudah diintegrasikan dengan berbagai format konten, proyek dan aplikasi. Chartist membantu desainer, pengembang, bahkan webmaster untuk memperindah tampilan visual konten mereka dengan grafik interaktif dan dinamis yang terlihat menakjubkan pada perangkat apa pun. Tujuan Chartist adalah menyediakan perpustakaan sederhana, ringan dan tidak mengganggu untuk membuat grafik responsif di situs kamu.
Penting untuk dipahami bahwa salah satu tujuan utama Chartist.js adalah bergantung pada standar yang sudah disediakan daripada membuat solusi sendiri untuk masalah yang sudah dipecahkan oleh standar tersebut. Dengan kata lain kita memanfaatkan semua standar yang sudah disediakan oleh browser modern dan mengucapkan selamat tinggal pada gagasan untuk memecahkan semua masalah kita sendiri.
Bonsai
Bonsai adalah library ringan untuk pengeditan grafis yang mendukung API dan render intuitif untuk SVG.
SVGMagic
Walaupun kehadiran format grafik SVG sudah cukup lama, pengenalannya ke web modern baru-baru sangat baru, dan banyak browser lama tidak mendukung teknologi dan kemampuan HTML5 yang baru. Berdasarkan permasalahan tersebut maka dibangunlah SVGMagic, sebuah tools untuk membantu webmaster mengubah konten SVG yang error kembali ke PNG sehingga browser dapat mengeksekusi dan menampilkannya. SVGMagic menggunakan jQuery untuk platform dan back-end nya.
Glyphter
Glyphter memberi kamu akses ke 16 sumber yang berbeda dari ikon dan font SVG yang dapat dioptimalkan dan dapat kamu gunakan untuk map sprite SVG. Load Glypht favorit kamu dan kamu akan melihat perubahan pada font yang ingin kamu modifikasi.
ICONIZR
Apakah kamu memiliki sejumlah animasi SVG atau gambar? Masukkan semuanya dan Iconizr akan mengubahnya menjadi kit ikon CSS.
Raw
Format SVG sendiri memang populer, namun ada format media populer yaitu animasi. Raw adalah aplikasi web open-source untuk menciptakan animasi dan grafik visual berbasis vektor dengan bantuan perpustakaan grafis D3.js. Melalui penggunaan tampilan pengeditan yang sederhana, RAW menyediakan banyak pilihan pre-built template yang berbeda untuk menampilkan data kamu. Dengan bantuan Raw kamu bisa membuat statistik film, durasi lagu, atau kumpulan data yang perlu kamu visualisasikan dalam format SVG.
Fildrop [tidak tersedia]
Memiliki gambar SVG tapi ingin menambahkan dengan beberapa filter khusus? Fildrop memberikanmu ke 26 filter mulai dari Matrix, Gamma hingga Blur dan masih banyak lagi. Setelah kamu memilih filter, kamu akan diberi kode HTML5 yang dapat kamu masukan langsung ke proyek kamu.