Animation SVG Export

2 min read

Animasyonlarınızı web gömülü ve ölçeklenebilir grafikler için SVG dosyaları olarak açın.

SVG kullanırken

SVGs zaman idealdir:

  • Web sitelerinde gömülü animasyonlar
  • Sonsuz ölçeklenebilirliğe ihtiyaç duyulur
  • Küçük dosya boyutu önemlidir
  • Değiştirilebilir vektör çıkışına ihtiyacınız var

SVG olarak ihracat

  1. Click Export in the header
  2. Animated SVG
  3. Click Export
  4. Dosya indirmeleri hemen hemen

Animation Support

Tam Desteklendi ✅

Animation SVG Çıktı
Pulse <animateTransform type="scale">
Rotate <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
Rise <animateTransform type="translate">

Desteklenmedi

Özellik Sebep
Typewriter JavaScript gerekir
Etkileri (Sparkle, Blast) Frame tabanlı animasyonlar
Desen rotasyonu onFrame-based
Kompleks anahtar çerçeveler Sınırlı SMIL desteği

Browser Support: SVG animasyonları Chrome, Firefox, Safari ve Edge’de desteklenen SMIL kullanıyor. Bazı eski tarayıcılar statik SVG gösterebilir.

Web Siteleri Üzerine Etkileri

Doğrudan Embed

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

Inline SVG

Daha fazla kontrol için, SVG kodu doğrudan:

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

CSS Arka Plan

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

İhracattan Sonra Özelleştirilmesi

SVG dosyaları düzenlenebilir XML. You can:

  • Bir metin editöründe açık
  • Renkleri, boyutları, zamanlaması
  • CSS stili ekleyin
  • Embed custom JavaScript

Ne Getirdi

Element İhracatı
Text <text> element
Şekiller <path>, <circle>, vs.
Arka plan arka plan arka plan <rect> ile
Animasyonlar SMIL <animate> etiketleri

Dosya Boyutu

SVG dosyaları genellikle çok küçük:

  • Basit animasyon: 2-10 KB
  • Kompleks sahne: 20-50 KB
  • GIF veya MP4’ten çok daha küçük

İpuçları

SVG İpuçları:

  • SVG web için kalitenin nerede önemli olduğu
  • Etkilerden ve tipwriter animasyonundan kaçının
  • Hedef tarayıcılarda Test
  • SVGs CSS ile gömmekten sonra stillenebilir

Desteksiz Animasyonlar için geri dönüş

Tasarımınız desteklenmeyen özellikleri kullanırsa:

  1. MP4 veya GIF animasyon versiyonu için
  2. Normal bir düşüş için PNG olarak ihracat
  3. <picture> elementi ilerici geliştirme için kullanın