SVG neden pikselli görünür ve nasıl düzeltilir?

Bir SVG’nin düzgün ölçeklenmesi beklenir. Buna rağmen kenarlar blok blok görünüyorsa üç yaygın nedenden başlayın. Dosyanın içinde gerçekten pikseller bulunabilir, bir uygulama önizlemeyi veya içe aktarılan dosyayı rasterleştiriyor olabilir ya da gerçek bir vektör, çok küçük bir piksel ızgarasında yalnızca yumuşak görünüyor olabilir. Her nedenin çözümü farklıdır ve kısa bir teşhis, hangisiyle karşı karşıya olduğunuzu söyler. Bu yazının konusu olmayan bir durum var: Büyütüldüğünde pikselleşen PNG veya JPG logo. O dosya hiçbir zaman SVG değildi ve o sorunun ayrı bir çözümü var.

30 saniyede teşhis

• İki görüntüleyicide çok fazla yakınlaştırın (500%+). Her görüntüleyicide bloklu görünmesi raster içeriğe işaret eder. Yalnızca tek bir uygulamada bloklu görünüyorsa o uygulama muhtemelen önizlemeyi rasterleştiriyordur.
• SVG’yi bir metin düzenleyicide açın. Uzun bir data:image/png;base64,… veri yığını içeren <image> etiketi, “vektörünüzün” kılık değiştirmiş bir bitmap olduğu anlamına gelir.
• Karar vermek için dosyayı kontrol edin. Yakınlaştırma şüphe uyandırır; bir <image> öğesi veya dikdörtgen görsel nesnesi, gömülü pikselleri doğrular.

Neden 1: SVG’nizin içinde pikseller var

Bu, gömülü görsel tuzağıdır. SVG bir kapsayıcı biçimdir ve SVG 2 belirtimi, bir <image> öğesinin raster içeriği gömmesine veya ona başvurmasına izin verir. Bağlantılı bir PNG’yi gömülü veriden veya iç içe geçmiş bir SVG’den ayırmanız gerekiyorsa karma içerikli SVG denetimini kullanın. Araçlar bu özelliği çeşitli şekillerde kullanabilir:

• Sahte dönüşümler. Bazı “PNG’den SVG’ye” araçları hiçbir şeyi vektörleştirmez. Bitmap’inizi bir <image> etiketine sarıp .svg uzantısıyla geri verirler. Ölçeklendiğinde orijinal PNG kadar kötü görünür; çünkü orijinal PNG’nin kendisidir.
• Zor kısımları rasterleştiren dışa aktarmalar. Tasarım uygulamaları yapabildiklerini yol olarak dışa aktarır, yapamadıklarını ise sessizce rasterleştirir: dış gölgeler, bulanıklıklar, degrade ağları, görsel dolguları. Bir logonun tek bir kıvrım veya efekt dışında her yerde net görünmesinin nedeni budur; tasarım forumlarını dolduran o “kısmen pikselli” gizem tam olarak böyle ortaya çıkar.
• Fotoğraf içeriği. Bir fotoğraf temiz yollara dönüşemez; bu nedenle fotoğrafları SVG’ye “dönüştüren” araçlar genellikle onları gömer veya posterize edilmiş bir benzerini üretir. Harita araçları gölgelendirme katmanlarında bunu bilerek de yapar. Bu geçerli bir kullanımdır; çünkü gölgelendirme doğası gereği sürekli tonludur.
• Biçim sarmalayıcıları. Bir dosya, bir uygulamanın okuyabildiği ama diğerinin okuyamadığı vektör verileri taşıyabilir. Bir uygulama anlamadığı bir veri yüküyle karşılaştığında hazır raster önizlemeye döner; böylece bir programda pikseller görürken diğeri temiz vektörler gösterir.

Nasıl doğrularsınız? .svg dosyasını herhangi bir metin düzenleyicide açıp <image arayın. Suçlu, base64 veri yığınıdır. Inkscape veya Illustrator’da bulanık bölgeye tıklayın: Seçim yollar yerine tek bir dikdörtgen “görsel” nesnesiyse cevap aynıdır. Bu, yapay zekâ araçlarından ve dışa aktarıcılardan gelen sahte SVG’leri yakalayan kontrolün aynısıdır ve bir dakikadan kısa sürer.

Çözüm: Piksellerin yollara dönüşmesi gerekir; bu da raster içeriği gerçekten vektörleştirmek anlamına gelir. Orijinal görseli veya gömülü olanı gerçek bir görselden vektöre dönüştürme işleminden geçirin ve <image> öğesini vektörleştirme sonucuyla değiştirin. Gömülü içerik bir fotoğrafsa vektörleştirmenin de sınırları vardır; bazen doğru çözüm, rasterin uygun olduğu yerde raster kullanmayı kabul etmektir.

İpucu dosyanın içinde

Neden 2: Dosya sağlam, görüntüleyici rasterleştiriyor

Bir tarayıcı veya Inkscape net yollar gösterirken tek bir uygulamada görüntü blokluysa dosyayı düzenlemeyi bırakın. Sorun o uygulamanın içe aktarma veya önizleme sürecindedir:

• Bazı uygulamaların içe aktarma süreçleri, SVG’yi içe aktarma veya önizleme boyutunda rasterleştirir. Sonradan bu önbelleğe alınmış görseli büyüttüğünüzde bir bitmap’i büyütmüş olursunuz. Uygulama tarafındaki çözüm, hedef çözünürlükte içe aktarmak veya görüntü oluşturmaktır.
• After Effects, katman dönüşürken vektör katmanlarını sürekli rasterleştirebilir; Adobe, vektör katmanları için Continuously Rasterize anahtarını belgeler. Yalnızca kompozisyon önizlemesi kötü görünüyorsa SVG’yi değiştirmeden önce önizleme çözünürlüğünü ve katman anahtarını inceleyin.
• Illustrator, çalışmayı bilerek Pixel Preview üzerinden gösterebilir. Yolun kendisinin pikselli olduğu sonucuna varmadan önce View > Pixel Preview seçeneğini kapatın.
• Küçük resimler ve önizlemeler. Dosya yöneticisi küçük resimleri ve hızlı bakış önizlemeleri, düşük çözünürlüklü raster görüntülerdir. Dosyanın kendisi hakkında hiçbir şey söylemezler.

Her durumda işe yarayan test şudur: Aynı dosyayı bir tarayıcıda veya Inkscape’te açın. Orada net görünüyorsa SVG’niz sağlıklıdır ve çözüm diğer uygulamanın içe aktarma veya önizleme ayarlarındadır.

Oyun varlıkları için kaynağın vektör yolları içermediğini varsaymadan önce Godot’un SVG içe aktarma ve rasterleştirme iş akışını veya düzenleyiciniz ve kullanıcı arayüzü sisteminiz için Unity SVG içe aktarma yöntemini kontrol edin.

Neden 3: Küçük boyutta yumuşak görünen gerçek bir vektör

Simgeler 16 ile 24 piksel arasında kullanılır. Bu boyutta matematiksel olarak kusursuz bir eğri, kaba bir piksel ızgarasına yerleşmek zorundadır. Kenar yumuşatma, kenar piksellerine gri tonlar verir; sonuç, özellikle ince çizgiler ve yarım piksel konumlarında “biraz bulanık” görünür. Yakınlaştırdığınızda kusursuz netlikte vektör kenarları görürsünüz; bunun gömülü görsel tuzağı olmadığını böyle anlarsınız.

Çözümler tasarım tarafındadır: Hedef boyutta yatay ve dikey kenarları tam piksellere hizalayın, kontur kalınlıklarını tam piksel değerlerinde tutun ve kullandığınız boyut için çizilmiş simge setlerini tercih edin. Tasarım araçlarından dışa aktarılan çok hassas yol verileri, çok küçük boyutlarda yumuşaklığı artırabilir; sadeleştirilmiş yollar daha öngörülebilir şekilde görüntülenir.

Bir bakışta neden ve çözüm

SVG’lerinizin pikselsiz kalmasını nasıl sağlarsınız?

Önlem almak büyük ölçüde dönüştürme veya dışa aktarma anıyla ilgilidir. Herhangi bir SVG’ye güvenmeden önce metin düzenleyici kontrolünü bir kez yapın: <path> öğeleri varsa iyi; <image> veri yığınları varsa bu bir vektör değildir. Bir görseli dönüştürürken sarmak yerine vektörleştiren bir dönüştürücü kullanın ve tek tek şekilleri seçerek sonucu doğrulayın. Bir tasarım aracından dışa aktarırken önce efektleri yollara düzleştirin veya genişletin; çünkü dışa aktarıcının vektör olarak ifade edemediği her şey dosyaya piksel olarak girer. Ayrıca SVG’nin gerçekte ne olduğunu aklınızda tutun: Uzantı, içeriğe değil, biçime ilişkin bir vaattir.

PerfectVector ile bu süreç nasıl görünür?

PerfectVector bu tuzağın doğru tarafında yer alır: Görselinizi vektörleştirerek gerçek yollar oluşturur, hiçbir zaman sarmalamaz. Bir PNG veya JPG yükleyin; sonuç, seçebileceğiniz, yeniden renklendirebileceğiniz ve sınırsızca yakınlaştırabileceğiniz şekillerdir. Her renk ayrı bir düzenlenebilir nesnedir ve dosyanın hiçbir yerinde <image> öğesi bulunmaz. “SVG’nizin” kılık değiştirmiş bir bitmap olduğunu yeni fark ettiyseniz orijinal görseli doğru şekilde dönüştürün ve çıktıda aynı metin düzenleyici kontrolünü yapın. Farkı bir kez görmek, tekrar bu tuzağa düşmemenin en hızlı yoludur. İlk dönüşümler ücretsizdir, kredi kartı gerekmez.

Sık sorulan sorular

SVG’m yakınlaştırınca neden pikselli görünüyor? Bazı uygulamalar önizlemelerini rasterleştirdiği için yalnızca yakınlaştırmak SVG’nin piksel içerdiğini kanıtlamaz. Dosyayı bir tarayıcıda veya Inkscape’te açın; ardından kaynakta bir <image> öğesi olup olmadığını inceleyin ya da bulanık alanı seçip dikdörtgen bir görsel nesnesi olup olmadığını kontrol edin. Bu kontroller gömülü raster içeriği doğrularsa o içeriği vektörleştirin ve görsel öğesini değiştirin.

SVG’mde gömülü bir görsel olup olmadığını nasıl anlarım? Herhangi bir metin düzenleyicide açıp <image arayın. Uzun bir data:image/png;base64 dizgesi, dosyaya gömülmüş bir bitmap’tir. Ayrıca Inkscape veya Illustrator’da bulanık alana tıklayabilirsiniz: Yollar yerine tek bir dikdörtgen görsel nesnesi olarak seçiliyorsa gömülüdür.

SVG’m bir uygulamada pikselli, tarayıcıda ise neden düzgün görünüyor? Uygulama onu rasterleştiriyordur. Oyun motorları SVG’leri içe aktarma boyutunda rasterleştirir, After Effects önizlemeleri kompozisyon çözünürlüğünde rasterleştirir ve bazı uygulamalar gömülü görselleri varsayılan olarak bloklu enterpolasyonla görüntüler. Bir tarayıcı veya Inkscape net gösteriyorsa dosya sağlamdır; uygulama ayarlarını düzenleyin.

Gömülü görsel içeren bir SVG’yi düzeltebilir miyim? Evet. Orijinal raster görüntüyü alın veya gömülü olanı çıkarın, gerçek bir vektörleştirme aracından geçirin ve görsel öğesinin yerine vektörleştirme sonucunu kullanın. Gömülü içerik bir fotoğrafsa aslına sadık bir kopya yerine stilize edilmiş, yaklaşık bir vektör temsili bekleyin; çünkü fotoğraflar temiz yollara indirgenemez.

SVG simgelerim küçük boyutta neden bulanık görünüyor? Bu genellikle gömülü görselden değil, piksel ızgarasının oluşturduğu yumuşaklıktan kaynaklanır. 16 ile 24 piksel arasında kenar yumuşatma, hizalanmamış kenarları gri piksellere dönüştürür. Hedef boyutta kenarları ve kontur kalınlıklarını tam piksellere hizaladığınızda simgeler netleşir. Yolların kendisinin net olduğunu doğrulamak için yakınlaştırın.

PNG’yi SVG’ye dönüştürmek her zaman gerçek vektör üretir mi? Hayır. Bazı araçlar görseli gerçekten vektörleştirerek yollara dönüştürür, bazılarıysa PNG’yi yalnızca bir SVG kapsayıcısına sarar. Çıktı sadece ilk durumda düzgün ölçeklenir. Dönüştürülen her dosyada image etiketi olup olmadığını kontrol edin ve sonuçta düzenlenebilir şekiller gösteren bir dönüştürücüyü tercih edin.

Kaynaklar

1. W3C: SVG 2 embedded content — SVG <image> öğesini ve bir SVG belgesinin içindeki raster içeriği tanımlar.
2. Adobe Illustrator: Viewing artwork — Pixel Preview özelliğini ve diğer görüntüleme modlarını belgeler.
3. Adobe After Effects: Layers — Vektör katmanları için Continuously Rasterize anahtarını belgeler.
4. Adobe Illustrator: Create pixel-perfect art — Küçük boyutlu çalışmalarda piksel ızgarasına hizalamayı açıklar.

---

Üzerinde çalıştığınız bir dosyadan şüphe mi ediyorsunuz? Yakınlaştırma testini yapın, ardından orijinal görseli gerçek, yollardan oluşan bir SVG’ye dönüştürün ve karşılaştırın. Pikseller gizlenir; yollar gizlenmez.