Animasyonlu GIF’ten SVG’ye: Kare seçin veya yeniden kurun

Evet, animasyonlu bir GIF’i SVG’ye dönüştürebilirsiniz, ancak “dönüştürmek” sözcüğü üç farklı işi gizler. Bir vektörleştirme aracı seçilen tek bir kareyi düzenlenebilir yollara dönüştürebilir. Kare tabanlı bir araç çok sayıda kareyi vektörleştirip sırayla oynatabilir. Ya da bir tasarımcı çizimi vektör nesneleri olarak yeniden kurup gerçek SVG hareketini oluşturabilir. Bu sonuçların hepsi .svg ile bitebilir, ancak birbirlerinin yerine kullanılamazlar.

GIF’teki tek bir andan logo, simge veya illüstrasyon elde etmek istiyorsanız o kareyi seçip vektörleştirin. Asıl ihtiyaç duyduğunuz varlık hareketin kendisiyse animasyonu koruyun veya bilinçli olarak yeniden oluşturun. Normal bir vektörleştirme, sihirli biçimde her kareyi korumaz.

Kısa yanıt

• Düzenlenebilir tek bir durağan görüntü: GIF’i temsil eden bir kare seçin, ardından o kareyi SVG yollarına dönüştürün.
• Aynı kare dizisi: kare kare SVG animasyonunu açıkça destekleyen bir araç kullanın; düzenli, yeniden kullanılabilir tek bir nesne kümesi yerine tekrarlanan çizimler bekleyin.
• Gerçek vektör hareketi: temel nesneleri bir kez yeniden çizin veya vektörleştirin, ardından konumlarını, dönüşlerini, ölçeklerini, renklerini veya yollarını animasyonla değiştirin.
• PerfectVector’ın iş akışı açıktır: animasyonlu GIF, kare seçimi için bekler ve yalnızca onayladığınız kare vektörleştirilir.

“Animasyonlu GIF’ten SVG’ye” ifadesinin üç anlamı

GIF raster görüntü verilerini saklar ve Library of Congress’in GIF89a biçim açıklamasında özetlendiği gibi kareleri zamanlama ve döngü davranışıyla sıralamak için kontrol uzantıları kullanabilir. SVG ise şekilleri, yolları ve isteğe bağlı animasyon talimatlarını saklar. Birinden diğerine geçerken neyin korunacağına karar vermek gerekir.

İlk yol vektörleştirmedir. İkincisi, vektörleştirilmiş bir çevirmeli animasyon kitabını SVG’nin içine koymaya daha çok benzer. Üçüncüsü animasyon tasarımıdır. Arama sonuçları bu üçünü sıklıkla aynı “yükleyin ve dönüştürün” vaadinde birleştirir; bu nedenle dosya uzantısına güvenmeden önce aracın gerçekte ne dışa aktardığını kontrol edin.

Bu yollar düzenleme işinin nerede yapıldığı bakımından da farklıdır: biri tek bir anı ayırır, biri kare çizimlerini tekrarlar, biri ise hareket oluşturulmadan önce yeniden kullanılabilir nesneleri yeniden kurar.

Animasyonlu PNG de aynı kararı gerektirir. Kaynağınız APNG ise ve yalnızca düzenlenebilir tek bir durağan görüntüye ihtiyacınız varsa vektörleştirmeden önce kareyi seçmek için APNG’den SVG’ye dönüştürücüyü kullanın. Hareketin kendisi önemliyse animasyonu koruyun veya yeniden oluşturun.

PerfectVector animasyonlu GIF ile ne yapar?

PerfectVector kare seçimini görünür bir karar olarak ele alır. Yüklenen GIF birden fazla kare içerdiğinde uygulama vektörleştirmeden önce bekler. Kaynak animasyonu durağan önizlemenin yanında oynatır ve istediğiniz kareyi seçmeniz için bir zaman çizelgesi sunar. Bu seçimi onaylayana kadar dönüştürme için hiçbir şey yüklenmez.

Seçilen kare daha sonra durağan bir görüntü olarak hazırlanır ve düzenlenebilir SVG yollarına dönüştürülür. Ortaya çıkan SVG, GIF’in diğer karelerini korumaz ve animasyon olarak oynatılmaz. Amacınız belirli bir andan temiz bir varlık elde etmek olduğunda bu kısıt yararlıdır: hangi pozun, ifadenin veya kompozisyonun vektöre dönüşeceğini tam olarak bilirsiniz.

Statik GIF’te verilecek bir hareket kararı olmadığından kare seçici atlanır. Her iki durumda da SVG’nin kalitesi yine seçilen görüntüye bağlıdır. Düz şekiller ve net kenarlar; hareket bulanıklığı, fotoğraf dokusu veya çok küçük ayrıntılardan daha temiz vektörleştirilir.

Tek bir GIF karesini düzenlenebilir SVG’ye nasıl dönüştürürsünüz?

1. GIF’i oynatın ve yararlı anı seçin. Net bir silüeti, birbirinden ayrılmış nesneleri ve mümkün olduğunca az hareket bulanıklığı olan bir kare arayın. Açılış karesi otomatik olarak en iyi kare değildir.
2. Animasyonun ilgisiz alanını kırpın. Büyük bir tuvaldeki küçük konu, vektörleştirme aracına daha az yararlı piksel sunar. Son kompozisyon için yeterli boşluk bırakın, ancak boş veya gürültülü kenarları kaldırın.
3. Çizim izin veriyorsa renkleri sınırlayın. Kareler arasındaki küçük palet değişimleri ek şekiller oluşturabilir. Logo, simge veya düz illüstrasyonda palet gereksiz yere kalabalıksa vektörleştirmeden önce seçilen durağan görüntüyü sadeleştirin.
4. GIF’ten SVG’ye dönüştürücüyü kullanın. Animasyonu yükleyin, zaman çizelgesinde gezinin, kareyi onaylayın ve PerfectVector’ın o durağan görüntüyü vektörleştirmesini bekleyin.
5. Küçük resmi değil, yolları inceleyin. Yakınlaştırın, bir şekil seçin ve eğrilerin pürüzsüz, nesnelerin gerçekten düzenlenebilir olup olmadığını kontrol edin. Dosya çok sayıda küçük parçayla doluysa daha temiz bir kare deneyin veya kaynağı sadeleştirin.
6. SVG’yi kullanılacağı yerde test edin. Bir vektör düzenleyicide renklerini değiştirin, baskı için boyutlandırın veya kullanacak üretim uygulamasına içe aktarın. Doğru uzantı yalnızca başlangıçtır; şekiller de düzgün davranmalıdır.

Bu, görüntü vektörleştirmenin anlamını açıklayan rehberde açıklanan temel ayrımın aynısıdır: vektörleştirme pikselleri şekiller olarak yeniden oluşturur. Animasyonlu bir kaynakta kare seçimi, yalnızca hangi piksel ızgarasının yeniden oluşturulacağını belirler.

Animasyonu ne zaman korumalı veya yeniden oluşturmalısınız?

Asıl önemli olan karelerse raster animasyonu koruyun

Bir tepki GIF’i, fotoğraf döngüsü, ekran kaydı veya dokusu yoğun animasyon genellikle vektörleştirmeden pek yarar sağlamaz. Her kare, şekillere indirgenmesi gereken ayrıntılar içerir ve sonuç artık orijinale benzemeyebilir. Birebir oynatma, yol düzenlemeden daha önemliyse animasyonu o teslim biçimi için tasarlanmış bir formatta koruyun.

Asıl önemli olan nesnelerse hareketi yeniden oluşturun

Birkaç düz parçadan oluşan yükleme göstergesi, simge, logo açılışı veya basit karakter, gerçek vektör animasyonu için daha iyi bir adaydır. Önce temiz vektör nesneleri oluşturun, ardından bunları animasyonla hareketlendirin. MDN’nin SVG animasyon rehberi, niteliklerin, dönüşümlerin, renklerin ve hareket yollarının SVG içinde nasıl animasyonla değiştirilebileceğini gösterir.

Bu iş akışı size, birbirinin neredeyse aynısı olan vektörleştirilmiş karelerden oluşan bir yığın yerine düzenleyebileceğiniz anlamlı parçalar sunar. Aynı zamanda animasyon kodunun varlığın bir parçası olduğu anlamına gelir. Kimlikler, sınıflar veya zamanlama bağlantıları önemliyse animasyon bağlantılarını kaybetmeden SVG düzenleme rehberindeki kodu koruyan yolu izleyin.

Kare kare SVG’yi yalnızca sonuçlarını bilerek kullanın

Özel araçlar GIF karelerini çıkarabilir, vektörleştirebilir ve sonuçları sıralayabilir. Bu, kısa piksel sanatı döngüleri veya bilinçli olarak basamaklı hareketler için uygun olabilir. Otomatik olarak tek ve zarif bir vektör animasyon yapısı oluşturmaz. Çıktıyı yinelenen şekiller, büyük bir belge ağacı ve biraz farklı vektörleştirmelerin neden olduğu kareler arası titreme açısından inceleyin.

Yaygın dönüştürme hataları

• .svg uzantısının düzenlenebilir vektör yolları anlamına geldiğini varsaymak. Bir araç raster kareleri SVG kapsayıcısına koyabilir. Yakınlaştırmak ve nesneleri seçmek, şekiller mi yoksa kapsayıcı içindeki pikseller mi aldığınızı ortaya çıkarır.
• Bakmadan varsayılan kareyi kabul etmek. İlk kare boş, geçiş hâlinde veya görsel olarak zayıf olabilir. Seçmeden önce tüm döngü boyunca gezinin.
• Hareket bulanıklığını vektörleştirmek. Bulanık bir uzuv veya parıltı, vektörleştirme aracının tahmin etmesi gereken yumuşak bir sınıra dönüşür. Mümkünse hareketin durulduğu bir kare seçin.
• Bağımsız vektörleştirmelerin kusursuz eşleşmesini beklemek. Her kare ayrı ayrı vektörleştirilirse küçük piksel farkları yolları ve renkleri değiştirebilir. Bu tutarsızlık titreme olarak görünür.
• SVG kulağa daha modern geldiği için fotoğrafı vektörleştirmek. Bilinçli olarak sadeleştirilmiş, poster benzeri bir yorum istemiyorsanız fotoğraf raster olarak daha uygundur. Fotoğrafı SVG’ye dönüştürme karar rehberi bu sınırı ele alır.

Kullanmadan önce sonucu kontrol edin

Seçilen kareden oluşturulmuş SVG için:

• Yalnızca ilk kare değil, amaçlanan kare bulunmalıdır.
• Yakınlaştırdığınızda kenarlar keskin kalmalıdır.
• Ana renkler ve nesneler seçilip düzenlenebilmelidir.
• Eğriler her piksel kusurunu takip etmek yerine yönetilebilir sayıda düğüm kullanmalıdır. Öyle değilse aşırı düğüm sayısı kontrol listesini kullanın.
• Şeffaflık ve kırpma seçilen kareyle eşleşmelidir.
• Dosya beklendiği gibi durağan olmalıdır.

Animasyonlu SVG için ikinci bir değerlendirme ekleyin: oynatmayı, onu barındıracak tarayıcı, düzenleyici veya yayın sisteminin tam kendisinde test edin. Statik SVG çizimini açabilen bir düzenleyici, dosyayı yeniden kaydederken her animasyon özelliğini korumayabilir.

Sık sorulan sorular

GIF’i SVG’ye dönüştürmek animasyonu korur mu? Otomatik olarak değil. Normal bir vektörleştirme aracı tek bir durağan kareyi vektörleştirir. Hareketi korumak için açıkça kare tabanlı animasyonlu SVG oluşturan bir araç veya çizimi vektör nesneleri olarak yeniden kurup animasyon talimatları oluşturan ayrı bir iş akışı gerekir.

Hangi GIF karesini vektörleştirmeliyim? En net silüete, en az hareket bulanıklığına, en yararlı kompozisyona ve en az üst üste binen nesneye sahip kareyi seçin. Varsayılan olarak ilk kareyi kabul etmek yerine tüm döngü boyunca gezinin.

SVG dosyası animasyonlu olabilir mi? Evet. SVG öğeleri CSS, SMIL veya JavaScript gibi mekanizmalarla animasyon hâline getirilebilir. Bu hareket vektör belgesinde oluşturulmalıdır; raster kareyi vektörleştirmek şekiller oluşturur, ancak animasyonu üretmez.

Dönüştürülen SVG’m neden hâlâ piksellerden oluşuyor? Dönüştürücü GIF’i veya karelerini yollara dönüştürmek yerine SVG kapsayıcısının içine gömmüş olabilir. Yakınlaştırın ve bir nesne seçin. Pikselleşiyorsa veya tek bir düz görüntü olarak seçiliyorsa düzenlenebilir bir vektörleştirme sonucu değildir.

Kare kare animasyonlu SVG gerçek bir vektör müdür? Gerçek vektör yolları içerebilir, ancak bu onu temiz ve yeniden kullanılabilir bir animasyon yapmaz. Her kare çizimin büyük bölümünü ayrı şekiller olarak tekrar edebilir. Bu yolu seçmeden önce belge yapısını ve yol tutarlılığını inceleyin.

Kaynaklar

1. Library of Congress — GIF89a — GIF raster görüntülerini, kontrol uzantılarını, zamanlamayı ve döngüyü açıklar.
2. W3C — Scalable Vector Graphics (SVG) 2 — SVG’nin vektör belge modelini tanımlar.
3. MDN — SVG animation with SMIL — SVG nitelikleri, dönüşümleri ve hareketi için animasyon oluşturmayı açıklar.
4. PerfectVector — GIF to SVG Converter — Seçilen kareyi vektörleştiren mevcut iş akışını belirtir.

---

Hareketli bir dosyadan temiz, düzenlenebilir tek bir ana mı ihtiyacınız var? GIF’inizi yükleyin, kareyi seçin ve vektörleştirilmiş SVG’yi inceleyin. Bu durağan görüntünün ihtiyaç duyduğunuz varlık olup olmadığına veya hareketin amaca özel bir animasyon gerektirip gerektirmediğine karar vermeden önce silüeti, küçük ayrıntıları ve düğüm sayısını kontrol edin.