Web design terus berkembang bersamaan dengan semua elemennya, termasuk aspek paling populer dari web yaitu gambar. Gambar di ibaratkan seperti kelopak bunga, di mana 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 di butuhkan untuk memuatnya. Dan semakin lama waktu yang di butuhkan 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 di gunakan untuk browsing situs web. Scalable Vector Graphics (SVG) merupakan satu jenis format gambar yang dapat di sesuaikan 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 di mensi. Vektor tersebut bisa berupa shape, path, atau apapun yang bisa di buat 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 di gunakan 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.
Link Download :
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.
Link Website :
Method Draw
Draw Metode adalah aplikasi web gratis untuk pengeditan file SVG langsung. Method Draw secara khusus di bangun sebagai editor grafis vektor online.
Link Website :
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 di gunakan 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.
Link Website :
Adobe Edge
Adobe adalah pemimpin dalam mengembangkan jenis aplikasi desain grafis di mana membuat desain grafis menjadi mudah dan fleksibel. Software ini terus mengikuti perkembangan standar desain web terbaru dan mengerti bahwa terkadang di butuhkan lebih dari sekedar gambar cantik untuk membuat pengunjung dan pelanggan kamu tetap terhibur, dan disinilah software ini bisa di manfaatkan.
Jika kamu mencari cara cepat dan mudah dalam membuat animasi SVG yang menakjubkan, tidak ada salahnya untuk mencoba Sostware yang satu ini. Kamu bisa melihat banyak video tutorial tentang cara menggunakan Adobe Edge untuk grafis SVG di YouTube.
Link Download :
SVG Morpheus
Ingin menambahkan beberapa interaktivitas pada gambar SVG kamu? Gunakan Morpheus, sebuah tools untuk mengubah banyak gambar SVG dengan efek animasi yang menakjubkan.
Link Website :
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.
Link Website :
Plain Pattern
Plain Pattern adalah aplikasi yang mudah di gunakan untuk menciptakan pola warna polos yang dapat di ekspor kedalam format SVG.
Link Website :
Chartist.js
Keindahan desain grafis yang bisa dengan mudah di integrasikan 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 di pahami bahwa salah satu tujuan utama Chartist.js adalah bergantung pada standar yang sudah di sediakan daripada membuat solusi sendiri untuk masalah yang sudah di pecahkan oleh standar tersebut. Dengan kata lain kita memanfaatkan semua standar yang sudah di sediakan oleh browser modern dan mengucapkan selamat tinggal pada gagasan untuk memecahkan semua masalah kita sendiri.
Link Website :
Bonsai
Bonsai adalah library ringan untuk pengeditan grafis yang mendukung API dan render intuitif untuk SVG.
Link Website :
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 di bangunlah 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.
Link Website :
Glyphter
Glyphter memberi kamu akses ke 16 sumber yang berbeda dari ikon dan font SVG yang dapat di optimalkan dan dapat kamu gunakan untuk map sprite SVG. Load Glypht favorit kamu dan kamu akan melihat perubahan pada font yang ingin kamu modifikasi.
Link Website :
ICONIZR
Apakah kamu memiliki sejumlah animasi SVG atau gambar? Masukkan semuanya dan Iconizr akan mengubahnya menjadi kit ikon CSS.
Link Website :
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
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 di beri kode HTML5 yang dapat kamu masukan langsung ke proyek kamu.
