SMIL ile JavaScript’siz SVG Animasyonu: Zamanlama Grafiğiyle Planlama

SMIL (Synchronized Multimedia Integration Language), SVG’leri JavaScript’e ihtiyaç duymadan animasyonlu hale getiren XML tabanlı bir animasyon dilidir. CSS animasyonlarının aksine bir <img> etiketi içine yerleştirilmiş SVG dosyasında bile tam olarak çalışır ve viewBox gibi CSS’in henüz animasyonlayamadığı özellikleri de kapsar.

SMIL nedir, neden hâlâ önemli?

Web’de her şey varsayılan olarak bir kutu olsa da, SVG’deki gerçek bir <circle>, HTML/CSS’teki bir <div>’in giremediği bağlamlara girebilir — özellikle <img> etiketinin içine. <img> etiketi göründüğü kadar statik değil: içine yüklenen bir SVG dosyasındaki gömülü JavaScript çalışmaz, ama CSS animasyonları büyük ölçüde çalışır. SVG geometri özellikleri (konum, boyut gibi) 2024’ten beri büyük tarayıcılarda CSS ile animasyonlanabiliyor, fakat viewBox gibi bazı özelliklerin CSS karşılığı henüz yok. İşte tam bu noktada SMIL devreye giriyor: CSS gibi <img> içinde çalışıyor ama SVG’deki her şeyi, JavaScript olmadan, eksiksiz animasyonlayabiliyor.

SMIL’in problemi: kod şişmesi

SMIL’in en büyük dezavantajı hızla şişmesi. CSS ve JavaScript’te bir keyframe içinde birden çok özelliği listeleyip animasyonları kolayca yeniden kullanabilirsiniz; SMIL’de ise her <animate> etiketi yalnızca tek bir elementin tek bir özelliğini hedefleyebilir. Bir renk ve opaklık değişimini çalıştırmanın en kısa yolu bile iki ayrı etiket gerektirir:

<animate attributeName="fill" to="someOtherColor" dur="someDuration" />
<animate attributeName="opacity" to="someOtherValue" dur="someDuration" />

Bu, animasyona dahil edilen her element için tekrarlanması gerektiğinden bir SMIL animasyonu hızla CSS karşılığından çok daha uzun hale gelebilir. Çözüm, koda başlamadan önce planlama yapmak.

Zamanlama grafiğiyle planlama

Yeni bir animasyona başlamadan önce hangi elementlerin, hangi özelliklerin animasyonlanacağını ve her tag için açıklayıcı bir ID listesini planlamak işi kolaylaştırıyor. Bunun için kullanılan araça zamanlama grafiği (timing chart) deniyor: her bileşen animasyon için bir çizgi segmenti çizilir, yalnızca başlangıç ve bitiş noktaları işaretlenir — arasındaki değerler değil. Çizgiler paralel gidebilir, üst üste binebilir ya da art arda sıralanabilir; tıpkı gerçek animasyonların birbiriyle ilişkisi gibi. Grafiğin ölçekli olması gerekmiyor, süre etiketleri eklemek yeterli.

Syncbase değerleriyle senkronizasyon

SMIL’in adında bile geçen kelime “senkronize”. Bir animasyonun ne zaman başlayacağını belirlemenin en kullanışlı yollarından biri syncbase değeri: bir SMIL etiketinin ID’sinin ardından .begin veya .end gelir, isteğe bağlı olarak pozitif ya da negatif bir ofset eklenir.

• Pozitif ofset — başlangıcı ileri (zamanda sonraya) taşır.
• Negatif ofset — başlangıcı geriye (zamanda öncesine) taşır; hatta belge yüklenmeden ya da bir tıklama olmadan önceki bir zamanı bile belirtebilir. Tarayıcı bu durumda animasyonu, sanki önceden başlamış gibi doğru noktaya “atlatır”.

Syncbase değerleri yalnızca .end’i .begin’e bağlamakla sınırlı değil — bir grup animasyonu tek bir “birincil” animasyona bağlamak için de kullanılabilir.

Birincil animasyon deseni

Bir grup animasyonu yönetmenin pratik yolu: grubu en iyi temsil eden animasyonu birincil (#primary) olarak seçip, tüm ikincil animasyonları begin="primary.begin" ile buna bağlamak. Böylece grubun tamamının başlangıcını değiştirmek istediğinizde, tek bir değeri güncellemeniz yeterli oluyor — her animasyonu tek tek düzeltmek yerine.

prefers-reduced-motion nasıl ele alınır?

Tarayıcılar prefers-reduced-motion medya özelliğini yaygın olarak destekliyor ve bu tercihe uymak pazarlık konusu değil. SMIL animasyonlarında bu tercihi karşılamanın birkaç yolu var, her birinin artı ve eksileri farklı:

• <picture> + <source media> — hareket azaltma tercihine göre farklı bir SVG dosyasını yedek olarak gösterir.
• Inline CSS @media + display:none — tek dosya içinde versiyonlar arasında geçiş yapar, ancak bazı ortamlarda sorun çıkarabiliyor.
• CSS background-image + @media — hareket azaltma tercihinde statik bir görseli yedek olarak ayarlar.
• SVG <view> elementi — hareket tercihine göre farklı görünümler arasında geçiş için kullanılabilir.
• JavaScript .matchMedia() + SMIL DOM arayüzü — her şeyi tek dosyada tutup hangi animasyonların çalışacağını script ile kontrol eder.

Etkileşimli olmayan, yalnızca opaklık değişen basit bir animasyon için <img> etiketi yeterli; harekete duyarlı bir animasyon eklerken <picture> yaklaşımına geçmek daha güvenli.

Sık sorulan sorular

SMIL hangi tarayıcılarda çalışıyor?

SMIL, modern tarayıcıların büyük çoğunluğunda temel düzeyde destekleniyor. Ancak syncbase gibi bazı zamanlama davranışları tarayıcılar arasında farklılık gösterebiliyor; Smashing Magazine’in kaynak makalesi bu farkları test etmek için ayrı bir test sayfası öneriyor, spesifik tarayıcı/sürüm oranı paylaşmıyor — üretime almadan önce hedef tarayıcılarınızda test etmeniz önerilir.

SMIL mi CSS animasyonu mu kullanmalıyım?

SVG’yi bir <img> etiketi içinde kullanıyorsanız ve yalnızca geometri/renk gibi CSS’in desteklediği özellikleri animasyonlayacaksanız CSS daha kısa ve bakımı kolay bir kod verir. viewBox gibi CSS’in animasyonlayamadığı bir özelliğe ihtiyacınız varsa ya da SVG doğrudan sayfaya gömülüyorsa SMIL devreye girer. CSS’in görsel araç kutusuna yeni özellik eklemeye devam ettiğine dair başka bir örnek için grid ve flex boşluklarına stil veren gap decorations yazımıza bakabilirsiniz.

<img> etiketi içinde JavaScript çalışır mı?

Hayır. Bir <img> etiketiyle yüklenen SVG dosyasının içine gömülü JavaScript kodu çalışmaz. CSS animasyonları ve SMIL animasyonları ise bu bağlamda da tam olarak çalışır.

prefers-reduced-motion, SMIL animasyonlarında nasıl destekleniyor?

SMIL’in kendi başına yerleşik bir prefers-reduced-motion desteği yok; bunun yerine <picture>/<source media>, CSS @media sorgusu, SVG <view> elementi ya da JavaScript’in .matchMedia() ve SMIL DOM arayüzü kombinasyonuyla dışarıdan yönetilir.

Kaynak: Smashing Magazine, “Timing Charts: A Blueprint For SMIL Animations”, Johan Grobler, 20 Ağustos 2026.