Ekspor Animasi SVG

3 min read

Esport animasi Anda sebagai berkas SVG untuk penyertaan web dan grafik scalable.

Name

SVG ideal ketika:

  • Animasi Embedding di situs web
  • Kesengsaraan tak terbatas dibutuhkan
  • Ukuran berkas kecil adalah penting
  • Anda perlu output vektor yang dapat disunting

Eksport sebagai SVG

  1. Klik*Export di header
  2. Pilih****
  3. Klik Export
  4. Muat turun berkas download segera

Dukungan Animasi Sodium

Didukung Penuh✅

Animasi Keluaran SVG
Kaku <animateTransform type="scale">
Putar <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Pudar <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
Diangkat <animateTransform type="translate">

Tidak Didukung❌

Fitur Mayak Alasan
Mesin ketik Keperluan JavaScript
Kesan - Dampak (Gegaran, Ledakan) Animasi berbasis-frame
Putaran Corak berbasis-Frame
Bingkai kunci yang kompleks Dukungan SMIL yang terbatas

*Browser Support: Animasi SVG menggunakan SMIL, yang didukung dalam Chrome, Firefox, Safari, dan Edge. Beberapa peramban yang lebih tua mungkin menunjukkan SVG statis.

Pembenaman di Situs Web

Terben Embed Langsung Terbenam

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

OG0X

Untuk kontrol lebih lanjut, tampal kode SVG secara langsung:

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

Latar Belakang CSS

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

Mengkustomisasi Setelah Ekspor

Berkas SVG UPGNOS adalah XML yang dapat disunting. Kau bisa:

  • Buka dalam editor teks
  • Ubah warna, ukuran, waktu
  • Tambahkan styling CSS
  • Terbenamkan JavaScript suai

Apa yang Dieksport

Unsur Eksport sebagai
Teks Elemen <text>
Bentuk <path>, <circle>, dll.
Latar Belakang <rect> dengan isian
Animasi Tag SMIL <animate>

Saiz Berkas XCF

Berkas SVG milik XAVE biasanya sangat kecil:

  • Animasi sederhana: 2-10 KB
  • Kompleks kompleks: 20-50 KB
  • Lebih kecil dari GIF atau MP4

Tips

Tips SVG:

  • Gunakan SVG untuk web embed di mana kualitas penting
  • Hindari efek dan animasi mesin ketik
  • Uji pada pelayar target
  • SVG dapat bergaya dengan CSS setelah pembenaman

Musim Gugur untuk Animasi yang Tidak Didukung

Jika desain Anda menggunakan fitur yang tidak didukung:

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