Grafik vektor sekarang mengambil alih web dan bahkan aplikasi seluler. Ikon, tombol, dan elemen halaman web atau aplikasi seluler kini menjadi semakin berbasis vektor, menjatuhkan bitmap karena kebutuhan untuk ditampilkan pada semua jenis resolusi layar, dpi, rasio, dll. Dan karena kemampuan yang berguna untuk "memperbesar" ke halaman baca yang lebih baik di browser seluler membuat aset bitmap jelek dan tidak dapat digunakan lagi.

Jadi sekarang saatnya untuk mulai membuat ikon animasi, latar belakang dan kontrol di SVG tetapi bagaimana Anda menghidupkan file SVG?

Banyak jawaban ini juga diposting dalam pertanyaan terkait ini tentang cara menghidupkan ilustrasi untuk web.

Hindari animasi SMIL

Sara Soueidan, mungkin animator terbaik SVG di web, menulis , "Saya tahu saya menulis panduan untuk animasi SMIL tetapi, melihat masa depan mereka, saya secara pribadi tidak menggunakannya lagi." Anda seharusnya juga tidak.

Animasi SMIL tidak berfungsi di IE, Edge, beberapa peramban seluler apa pun , dan secara bertahap dijatuhkan oleh Chrome / Opera (meskipun, baru-baru ini, tim Chrome mengatakan penghentian ini untuk sementara ditangguhkan ). Anda harus menghindari menggunakannya 99% dari waktu.

Gunakan CSS untuk animasi yang sangat sederhana

SVG sebagian besar dapat dianimasikan menggunakan CSS murni (termasuk menggunakan :hoverstatus, transforms, transitions, dan animations). Ini direncanakan untuk mendapatkan dukungan penuh animasi CSS tetapi saat ini hanya beberapa yang didukung dan dapat bermasalah dengan masalah lintas browser.

Sara Soueidan mengatakan CSS bagus untuk membuat animasi SVG tetapi lebih menyukai JS karena membantu menyelesaikan masalah lintas browser ini. Dengan demikian, gunakan ketika Anda bisa kembali ke JS ketika animasinya lebih kompleks atau tidak bekerja lintas browser.

Gunakan animasi JavaScript jika CSS tidak berfungsi

Sebagian besar waktu, SVG dapat dianimasikan menggunakan JavaScript kecil tanpa memerlukan perpustakaan animasi JavaScript. Animasi di JS memiliki lebih banyak dukungan lintas browser dan cukup mudah digunakan dengan pemahaman dasar.

Untuk animasi kompleks yang memerlukan penggunaan garis waktu atau yang serupa, menggunakan perpustakaan seperti GSAP bisa sangat membantu. Ada banyak pustaka animasi SVG lainnya, Snap.svg adalah perpustakaan besar yang lain, tetapi kebanyakan tidak menangani animasi semudah atau pemain seperti GSAP.

Untuk jenis animasi tertentu, menggunakan plugin JS tertentu seperti GSAP's MorphSVG dapat menghemat sedikit waktu karena mereka menangani masalah lintas browser dan semua perhitungan. Namun, sebagian besar animasi tidak memerlukan plugin seperti ini. Lihat "Panduan untuk Fitur Alternatif untuk SMIL" untuk lebih lanjut.

Ini juga dapat diterima untuk menggunakan polyfill untuk SMIL, tapi saya lelah melakukannya karena mereka tidak banyak digunakan / diuji. Dengan itu, Eric Willigers dan FakeSmile adalah dua yang paling umum.

Alat

Satu-satunya perangkat lunak yang saya temui yang mengekspor ke SVG + JS adalah plugin Adobe After Effects yang disebut Lottie (sebelumnya Bodymovin), ekstensi Flash yang disebut Flash 2 SVG , dan alat online kecil yang disebut SVG Circus . Selain itu, animator perangkat lunak seperti Adobe Edge Animate, Adobe Animate CC, atau Animatron mengekspor ke animasi SMIL yang tidak boleh digunakan. Karena itu, sebaiknya beberapa pengembang membuat animasi SVG + CSS atau SVG + JS menggunakan SVG yang diekspor dari editor . Inkscape memiliki banyak sumber daya yang menghubungkan tutorial dan contoh cara melakukannya.

Saya yakin di masa depan lebih banyak perangkat lunak animasi akan mendukung ekspor ke SVG + JS.

Beberapa catatan penting lainnya

• Penting untuk diingat kinerja . Sara Drasner membuat beberapa tolok ukur kinerja untuk SVG yang menunjukkan Anda harus memilih untuk animasi CSS yang dipercepat setiap kali memungkinkan tetapi mundur pada pendekatan JavaScript yang baik bila tidak memungkinkan.

• Cara terbaik untuk menggunakan SVGs dalam <object>tag atau disematkan langsung dalam <svg>elemen XML jika itu interaktif dan sebagai gambar latar belakang jika tidak interaktif, tetapi ada cara lain untuk melakukannya juga.

Untuk tampilan animasi web yang lebih lengkap, baca posting Rachel Nabor di A List Part . Untuk beberapa saran tambahan dalam tooling, postingan ini sangat membantu, meskipun saya tidak setuju dengan semua sentimen, terutama dengan cara menyajikan animasi SMIL.

Saya selalu menemukan mengandalkan apa pun selain perpustakaan JS untuk menjadi sangat besar dukungan / pemeliharaan WRT.

Aku selalu menggunakan D3.js . Awalnya dibuat untuk membuat elemen SVG / DOM interaktif dari set data. Namun, Anda dapat memodifikasi SVG / DOM yang disertakan dalam halaman, selama JS memiliki akses ke sana.

Saya telah menggunakan berbagai proyek untuk membuat / menghidupkan SVG / DOM. beberapa contoh termasuk soft-time dashboard, visualisasi peta, transformasi DOM, dan untuk membuat file SVG untuk dimasukkan dalam PDF. Saya sudah melihatnya di seluruh web juga. Situs web ini memiliki banyak contoh dan tautan ke halaman yang telah menggunakannya.

Saya merekomendasikannya karena ini cukup kompatibel lintas browser, memiliki komunitas aktif, dan mudah dipelajari. Lihatlah halaman web dan perhatikan kegunaan dunia nyata untuk melihat contoh kecil dari apa yang dapat Anda lakukan dengannya.

Berikut ini adalah cara yang mungkin untuk menghidupkan svg:

ANIMASI SMIL SVG

SVG dapat dianimasikan melalui bahasa markup asli yang kuat, yang disebut SMIL, yang diekspor langsung dari alat animasi seperti plugin Adobe Animate CC + flash2svg.

Untuk menghidupkan SVG dengan SMIL bahkan pada browser yang tidak memiliki dukungan, Anda hanya perlu menggunakan polyfill SMIL.

Polyfill adalah potongan kode javascript khusus yang menyediakan dukungan untuk fitur-fitur yang hilang dari peramban, menerjemahkan penyandian asli ke kode yang dapat dipahami peramban.

Polyfill SMIL yang dibuat oleh Eric Willigers tidak hanya itu: ia menerjemahkan SMIL ke Web Animations API yang bahkan didukung oleh browser Microsoft. Sangat efisien sehingga pengembang Google Chrome memutuskan untuk menghentikan dukungan SMIL asli dan fokus pada Animasi Web, menyerahkan tugas polyfill kepada Eric Willigers untuk memutar file SMIL di Chrome.

Seseorang salah menafsirkan ini sebagai penghentian SMIL oleh Chrome, dan mengkritik para devs untuk pilihan ini. Tapi itu bukan penghinaan sejati, hanya relokasi pekerjaan menafsirkan SMIL pada tingkat polyfill.

Bahkan Chrome devs sendiri mengutip polyfill Willigers di sangat resmi mengumumkan tentang niat mereka untuk mencela SMIL.

Jadi, jika Anda membaca di web tentang kematian SMIL, jangan khawatir. “Kematian” SMIL sangat dibesar-besarkan. Ini lebih seperti kelahiran kembali.

Untuk menggunakan SMIL di semua browser, termasuk IE dan EDGE, Anda hanya perlu menambahkan polyfill javascript ini ke halaman web Anda:

https://github.com/ericwilligers/svg-animation

Berikut ini adalah halaman demo menggunakan polyfill yang dibuat oleh Tom Byrne, penulis eksportir flash2svg yang populer:

halaman tanpa polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

dan halaman yang sama dengan polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Jika Anda melihat sumbernya cukup jelas.

Juga kinerja dengan polyfill seringkali lebih baik daripada SMIL asli, karena pada banyak browser Web Animasi dipercepat perangkat keras, sedangkan SMIL biasanya tidak.

ANIMASI EKSPOR DI SVG SMIL

Cara yang lebih sederhana untuk membuat animasi SVG adalah dengan menggunakan alat-alat seperti Adobe Animate CC untuk menggambar mereka dan plugin seperti Flash2svg ( https://github.com/TomByrne/Flash2Svg ) untuk mengekspornya dalam SVG. Dengannya Anda dapat mengekspor hampir semua animasi + suara sebagai file SVG tunggal, seperti episode kartun ini:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

ANIMASI PERPUSTAKAAN JS

Cara javascript lebih rumit. Pertama-tama Anda harus menjadi programmer javascript. Maka Anda harus memilih di antara banyak perpustakaan. Yang lebih populer adalah:

• SnapSVG http://snapsvg.io
  Perpustakaan ini adalah penerus dari perpustakaan animasi Raphael lama dan populer yang dibuat oleh penulis yang sama. Sangat stabil, tetapi mengkonversi SVG dalam format internal saat runtime untuk menghidupkannya. Opsi morphing juga sangat mendasar, hanya interpolasi linier. (CATATAN: Ada juga plugin snap.svg untuk Adobe Animate CC, tetapi file yang diekspor membengkak. Eksportir menghasilkan satu perintah snap svg untuk setiap frame animasi, tidak setiap frame kunci, menghasilkan file svg 18Kb dengan lebih dari 1000 baris kode, hanya untuk memutar persegi panjang sederhana melalui 360 derajat. Plugin Flash2svg jauh lebih efisien, hanya satu perintah dan beberapa byte untuk melakukan pekerjaan yang sama).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  Perpustakaan morphing berfitur lengkap yang memungkinkan untuk menghidupkan SVG dengan mudah, dan tanpa perlu mengubahnya dalam format internal. Cukup buat 3-4 svg keyframe di Inkscape dan Greenock SVGMorphing lib akan secara otomatis menginterpolasi antara frame dan membuat semua frame di antara untuk pemutaran yang lancar. Berikut ini sebuah contoh:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Jika Anda ingin menghidupkan 3D, perpustakaan ini sangat kuat.
  Seen.js merender file .obj 3D dalam SVG dan menganimasinya dengan sangat mudah.

EDITOR GAMBAR SVG

Adapun alat-alatnya, Anda dapat membuat kerangka tombol animasi terutama dengan tiga perangkat lunak:

• Inkscape: open source, memiliki banyak fitur, ini adalah paket pengeditan vektor canggih yang dibuat oleh orang-orang yang berpartisipasi dalam Kelompok Kerja SVG. Referensi untuk format SVG. Tidak mudah dipelajari.

• Adobe Illustrator: komersial, perangkat lunak menggambar vektor yang sangat kuat, ia menawarkan banyak fitur yang masih belum didukung oleh SVG, tetapi juga memiliki kompatibilitas terburuk dengan format. Anda akan sering perlu mengedit file SVG yang diekspor secara manual untuk memperbaiki kekacauan ilustrator. Tapi ini sangat populer di sekolah seni, dan semua ahli grafiti tahu cara menggunakannya.

• Affinity Designer: Ini adalah perangkat lunak komersial seperti Illustrator, tetapi dengan kompatibilitas SVG yang sangat baik, hampir di tingkat Inkscape. UI jauh lebih ramah, dan sekarang menjadi sangat populer di kalangan seniman SVG.

EDITOR ANIMASI SVG

Saat ini satu-satunya editor animasi SVG adalah ini:

• Adobe Animate CC: mantan Adobe Flash Pro sepenuhnya ditulis ulang oleh Adobe untuk bermigrasi dari animasi flash yang sekarang usang ke animasi SVG modern. Anda dapat mengekspor animasi SVG yang dihasilkan bersama dengan pustaka javascript kustom, atau memilih untuk menyimpan di SVG + SMIL menggunakan plugin seperti "flash2svg". Opsi terakhir ini sangat efisien, saya selalu menggunakannya sebagai pengganti eksportir asli yang menggembung.

Anda dapat mengunduh plugin gratis dari sini: https://github.com/TomByrne/Flash2Svg

Atau instal dari panel Adobe Plugins: https://creative.adobe.com/addons/products/7232

Sayangnya, Adobe Animate CC bersifat komersial. Ada aplikasi animasi alternatif open source gratis, tapi saya mencoba semuanya dan mereka masih menyedot IMHO. Mari berharap untuk masa depan.

Referensi:
Posting blog saya yang lebih lengkap mengenai masalah ini: https://medium.com/@fmuaddib/the-following-are-the-pos-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

Kasing direferensikan tentang snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files