Mengapa Anda harus menggunakan gambar SVG: cara menganimasikan SVG Anda dan membuatnya secepat kilat

Mengapa Kami Menggunakan SVG?

Sektor pengembangan web tumbuh dengan pesat, dan gambar SVG (grafik vektor yang dapat diskalakan) menjadi lebih populer. Sebagai gambar vektor, SVG terdiri dari persamaan matematika yang menentukan posisi dan warna garis dan kurva yang menyusun bentuk grafik dan teks dalam format XML. SVG digunakan untuk ikon, logo, desain grafis, dan font.

Menggunakan SVG adalah pilihan yang mudah setelah Anda mempertimbangkan keuntungan yang mereka tawarkan. Untuk klien, Anda mendapatkan kualitas luar biasa di perangkat apa pun. Bagi kami sebagai developer, ada lebih banyak alasan untuk menggunakan SVG.

Mari kita bahas beberapa manfaat SVG sekarang.

1. Format berbasis teks

Elemen SVG berisi teks, yang sangat meningkatkan aksesibilitas situs web. Tetapi keuntungan utamanya adalah teks ini diindeks oleh mesin pencari. Dan pengguna dapat menemukan file SVG melalui Google.

2. Skalabilitas

Kualitas gambar SVG tidak tergantung pada resolusinya. Tidak seperti gambar format lain atau font ikon, SVG terlihat sangat tajam di perangkat apa pun dengan ukuran layar apa pun. Skalabilitas juga berarti bahwa jika Anda menggunakan gambar yang sama di seluruh situs web tetapi dalam ukuran yang berbeda, Anda menggunakan satu SVG. Anda tidak perlu membuat banyak salinan seperti dalam kasus PNG. Sebagai gantinya, Anda menyematkan gambar yang sama dan menentukan ukurannya secara langsung dalam kode SVG.

Skalabilitas

3. Performa tinggi

Jika Anda memprioritaskan kinerja, Anda harus menggunakan SVG. Dengan SVG, permintaan HTTP tidak perlu dimuat dalam file gambar. Halaman memuat lebih cepat karena tidak ada file untuk diunduh. Waktu muat yang lebih cepat berarti kinerja halaman web yang lebih baik dan peringkat mesin pencari yang lebih tinggi. Pada gilirannya, ini meningkatkan pengalaman pengguna.

4. Ukuran file kecil

Ukuran file SVG sederhana ditentukan oleh warna, lapisan, gradien, efek, dan topeng yang ada di dalamnya. Ukuran PNG atau file grafik raster lainnya ditentukan oleh jumlah piksel yang ada di dalamnya. Semakin besar gambar PNG, semakin berat ukurannya. Ini tidak berlaku untuk ikon SVG. Juga, SVG dapat dioptimalkan, dan saya akan memberi tahu caranya nanti di artikel ini.

Ukuran file SVG

5. Berbagai peluang pengeditan dan animasi

Tidak seperti gambar raster, gambar vektor dapat diedit baik dalam program gambar vektor khusus dan langsung di editor teks. Anda juga dapat mengedit warna atau ukuran ikon SVG secara langsung melalui CSS. Sedangkan untuk menganimasikan SVG, dapat dilakukan dengan bantuan SMIL, Web Animations API, WebGL, atau animasi CSS. Gulir ke bawah untuk mempelajari lebih lanjut tentang animasi CSS gambar SVG.

6. Integrasi dengan HTML, XHTML, dan CSS

SVG dirancang "untuk mengintegrasikan dan memperluas teknologi platform Web terbuka terkemuka lainnya, seperti X / HTML, CSS, dan Javascript", menurut W3C. Jadi, tidak seperti format gambar lainnya, format ini dapat dengan mudah diintegrasikan dengan dokumen dan teknologi lain.

7. Dukungan Model Objek Dokumen W3C

Ada dukungan komunitas yang berkembang untuk SVG. World Wide Web Consortium (W3C) selalu mengklaim bahwa Internet tidak dapat berjalan tanpa gambar vektor. Organisasi ini pada dasarnya menciptakan format SVG, dan mereka secara aktif mendukungnya saat ini.

Apa Ketidaknyamanan SVG?

Banyaknya bagian kecil membuat penggunaan format SVG menjadi tidak rasional. Semakin banyak bagian gambar, semakin berat ukurannya.

Misalnya, berikut adalah dua peta SVG Amerika Serikat. Yang kedua sedikit lebih detail dari yang pertama. Tetapi tingkat detail yang lebih tinggi membutuhkan peningkatan ukuran file hampir lima kali lipat - 33 KB dibandingkan dengan 147 KB. Jika peta ini tidak monokromatik, peningkatannya akan jauh lebih besar.

Peta SVG

Jika gambarnya linier dan berisi beberapa warna - SVG adalah solusinya. Namun, jika detailnya penting dan jumlahnya banyak, PNG atau JPEG mungkin lebih cocok.

Perhatikan juga bahwa SVG tidak dapat digunakan untuk foto. Jika Anda menggunakan foto di situs web Anda, SVG bukanlah pilihan terbaik. Anda pasti harus menggunakan format gambar raster.

Bagaimana Mengoptimalkan Gambar SVG

Saat merender format vektor, kita harus menulis beberapa kode SVG tambahan. Hasil akhirnya harus dioptimalkan menggunakan layanan yang berbeda. Paling sering, untuk mengoptimalkan SVG, saya menggunakan alat Node.js SVGO. Ini cukup mudah digunakan, dan tidak perlu mengunggah gambar ke situs web lain.

Contoh pengoptimalan SVG menggunakan SVGO

Cara Menganimasikan SVG

Grafik SVG di web dapat dianimasikan dengan beberapa cara:

  1. SMIL, yang merupakan spesifikasi animasi SVG asli
  2. API Animasi Web, yang merupakan API JavaScript asli yang memungkinkan Anda membuat animasi berurutan yang lebih kompleks tanpa memuat skrip eksternal apa pun
  3. WebGL
  4. Animasi CSS

Mari kita pertimbangkan yang terakhir.

Animasi CSS digunakan untuk menghindari membebani layanan Anda dengan perpustakaan besar untuk menganimasikan ikon dan pemuat.

Untuk melihat contoh SVG, periksa kuning telur animasi, yang desain grafisnya awalnya digambar di Sketch.

SVG gif

Seperti yang Anda lihat di sini, saya menggunakan Keyframe Animation Syntax untuk animasi. Ini diimplementasikan dengan mengatur posisi awal elemen dengan id (0%), transisi (50%) dan posisi akhir (100%). Untuk mencapai animasi yang mulus, nilai awal dan akhir sama.

Berikut beberapa manfaat menggunakan pendekatan CSS untuk animasi SVG:

  1. Anda tidak membutuhkan perpustakaan eksternal.
  2. Preprocessor (seperti Sass atau Less) memungkinkan Anda membuat variabel.
  3. Anda dapat menggunakan onAnimationEnd dan beberapa pengait animasi lainnya dengan JavaScript asli.
  4. Pendekatan ini mudah digunakan untuk pengembangan desain web responsif karena Anda dapat memodifikasi animasi dengan kueri media.

The Kerugian dari menggunakan CSS animasi adalah sebagai berikut:

  1. Anda tidak dapat menghasilkan beberapa efek fisika yang rumit, yang akan membuat animasi lebih realistis.
  2. Banyak penghitungan ulang perlu dilakukan jika Anda menyesuaikan waktu.
  3. Grafik CSS dan SVG di ponsel terkadang memerlukan peretasan yang aneh.

Sebagai contoh

Namun, kami dapat membuat beberapa proyek menarik dengan bantuan animasi CSS yang sederhana dan sepele. Sebagai contoh, saya telah membuat video game sederhana menggunakan HTML, CSS, dan sedikit JavaScript. Semua SVG digambar di Sketch. Tujuan dari permainan ini adalah untuk menyelamatkan sang putri. Dalam situasi apa pun, cukup klik. Anda dapat menemukan proyek tersebut di GitHub saya.

Untuk Membungkus

SVG adalah format gambar yang bagus untuk digunakan. Mereka dapat diskalakan, ringan, berbasis teks, dan efisien. Mereka mudah diedit, dianimasikan, dan diintegrasikan. Yang penting, mereka didukung oleh hampir semua browser kecuali Internet Explorer 8 dan Android 2.3.

Meskipun belajar bekerja dengan gambar grafis vektor yang dapat diskalakan mungkin membutuhkan waktu, ini adalah investasi yang akan terbayar dengan mempertimbangkan manfaat SVG.

Apakah Anda punya ide untuk proyek perangkat lunak?

Perusahaan saya KeenEthics adalah tim pengembang aplikasi web yang berpengalaman. Jika Anda memerlukan perkiraan gratis untuk proyek serupa, silakan hubungi kami .

Anda dapat membaca lebih banyak artikel serupa di Blog Keen saya. Izinkan saya menyarankan Anda membaca Nilai Pengujian Pengguna atau 7 Kasus Saat Anda Tidak Harus Menggunakan Docker.

PS

Juga, saya ingin mengucapkan "terima kasih" kepada Maryna Yanul karena ikut menulis artikel ini serta para pembaca yang telah menyelesaikannya!

Artikel asli yang diposting di blog KeenEthics dapat ditemukan di sini: Perspektif Segar tentang Mengapa, Kapan, dan Cara Menggunakan SVG.