Logodan yükleme çubuğuna, veri görselleştirmesinden ikon geçişlerine kadar arayüzün en zarif hareketleri çoğu zaman SVG'den gelir. Ölçeklendiğinde bozunmayan, kilobaytlarla ölçülen ve DOM'un bir parçası olduğu için stil alabilen vektörler, animasyon için adeta hazır kumaştır. Üstelik resim etiketinden farklı olarak vektörün her düğümü sorgulanabilir, değiştirilebilir ve canlandırılabilir; bu, arayüz hareketini bir video dosyasından çok bir programlama dili gibi davranışa dönüştürür.

Önce CSS, Sonra Fısıltı

Basit geçişler için harici kütüphane gerekmez; SVG ögeleri CSS geçiş ve animasyonlarının birinci sınıf vatandaşıdır:

.ikon path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ciz 1.2s ease forwards;
}
@keyframes ciz {
  to { stroke-dashoffset: 0; }
}

Bu klasik "çizim" efekti, stroke-dasharray ile çizgiye sanal bir uzunluk verip stroke-dashoffset değerini sıfıra çekerek çalışır. İkon sayfanıza ilk girdiğinde kendini çizen bir logo, kullanıcıya ürünün el yordamıyla hazırlandığını hissettirir.

Path Morphing: Şeklin Hafızası

Bir simgenin diğerine dönüşmesi (morphing) iki vektörün nokta sayısı eşitse kusursuzdur. SMIL'in animate etiketi hâlâ çalışır; ama günümüzde tercih edilen yol Web Animations API'siyle d özniteliğini canlandırmaktır. Başlangıç ve bitiş yollarını tasarım aracında eş noktalı hazırlamak, animasyonun kalitesini belirleyen sessiz emektir:

const yollar = [sekilA, sekilB, sekilC];
let sira = 0;
setInterval(() => {
  sira = (sira + 1) % yollar.length;
  yol.animate(
    [{ d: `path("${yollar[sira]}")` }],
    { duration: 600, fill: "forwards", easing: "ease-in-out" }
  );
}, 1800);

Dosya boyutu tarafında da SVG'nin sözü ağırdır: basit bir ikon birkaç yüz bayttır, aynı görselin PNG'sinin on katı olabilir. currentColor kullanarak ikonun metinle birlikte renk değiştirmesi, use etiketiyle tek tanımı onlarca yerde tekrar etmek; prefers-reduced-motion ile de hareketi koşullu kılmak, bu kumaşı kumaş yapan küçük el işaretleridir. Sprite tekniği, ikon setlerini tek istekte indirip önbelleğe alır; ağ pencerisi dar olan cihazlarda fark anında görünür. Ayrıca vektörün çözünürlük bağımsızlığı, retina ekranlarda piksel titremesini kökten bitirir; aynı dosya 16 pikselden 160 piksele kadar her boyutta keskin kalır.

Ölçülü Hareket

SVG animasyonunun cazibesi gösterişinde değil, ölçüsündedir: 200-400 milisaniyelik yumuşak bir geçiş, arayüze "canlı" der; sürekli hareket eden bir öğe ise dikkati dağıtır. prefers-reduced-motion sorgusunu unutmayın; hareketi azaltmak isteyen kullanıcıya sayfanız yine de güzel görünmelidir. Hareket bir amaç değil, anlatım aracıdır: butonun onay rengini tamamlayan küçük bir tik animasyonu, yüklemenin bittiğini sözsüz söyler. Kullanıcının gözünü nereye yönlendireceğinize karar verip ona göre hareketi yerleştirdiğinizde, animasyon süs olmaktan çıkar ve bir yol gösterme aracına dönüşür.

En iyi SVG animasyonu, bittiğinde fark edilmeyen ama varlığıyla arayüzü ısıtan o küçük jesttir. Vektörün şiiri, sustuğu yerde değil, durduğu yerde biter. İlk animasyonunuzu bugün yazın: on satırlık bir CSS, çizgisini kendini çizerek tamamlayan bir ikon ve izleyecek on binlerce kullanıcı.