Ekspor SVG animasi

3 min read

Ekspor animasi Anda sebagai berkas SVG bagi web embedding dan skalable graphics.

Kapan akan Gunakan SVG

SVG ideal ketika:

  • Membenamkan animasi di situs web
  • Kebutuhan skabilitas tak terbatas
  • Ukuran berkas kecil sangat penting
  • Anda memerlukan keluaran vektor yang dapat disunting

Exporting as SVG

  1. Klik * * Ekspor * * di header
  2. Pilih * * Animated SVG * *
  3. Klik * * Ekspor * *
  4. Berkas akan diunduh segera

Dukungan Animasi

Didukung Penuh

Animasi Keluaran SVG
Pulsa <animateTransform type="scale">
Putar <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Pudar <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Geser <animateTransform type="translate">
Naik <animateTransform type="translate">

Tak Didukung

Fitur Alasan
Mesin ketik Butuh JavaScript
Efek (Sparkle, Ledakan) Frame- berbasis animasi
Rotasi pola onFrame- based
Kompleks keyframes Dukungan SMIL terbatas
    • Dukungan Peramban: * * Animasi SVG memakai SMIL, yang didukung dalam Chrome, Firefox, Safari, dan Edge. Beberapa browser tua mungkin menunjukkan SVG statis.

Embedding di Situs Web

Embed Langsung

<img src="animation.svg" alt="Animated graphic">

Inline SVG

Untuk kontrol lebih lanjut, paste kode SVG secara langsung:

<svg viewBox="0 0 800 600">
  <!-- SVG content -->
</svg>

Latar Belakang CSS

.element {
  background-image: url('animation.svg');
}

Kustomisasi Setelah Ekspor

Berkas SVG adalah XML yang dapat disunting. Anda bisa:

  • Buka di penyunting teks
  • Ubah warna, ukuran, waktu
  • Tambah gaya CSS
  • Tempelkan JavaScript Gubahan

Apa Yang Dikeluarkan

Elemen Exported As
Teks Elemen <text>
Bentuk <path>, <circle>, dll.
Latar Belakang <rect> dengan isi
Animasi Tag SMIL <animate>

Ukuran Berkas

Berkas SVG biasanya sangat kecil:

  • Animasi sederhana: 2-10 KB
  • Adegan kompleks: 20- 50 KB
  • Jauh lebih kecil dari GIF atau MP4

Tips

SVG Tips:

  • Gunakan SVG untuk web embed dimana kualitas penting
  • Hindari efek dan animasi mesin tik
  • Uji pada target peramban
  • SVG dapat dimodifikasi dengan CSS setelah embedding

Fallback untuk Animations Tak Didukung

Bila desain Anda memakai fitur yang tak didukung:

  1. Ekspor sebagai MP4 atau GIF untuk versi animasi
  2. Ekspor sebagai PNG untuk fallback statis
  3. Gunakan elemen <picture> untuk peningkatan progresif