SVG şekilleri arasındaki beyaz boşluklar: tanı ve çözüm

SVG şekilleri arasındaki ince beyaz çizgiler çoğu zaman dosyadaki delikler değil, görüntüleme sırasında oluşan birleşim izleridir. SVG görüntüleme modeli, uygulamaların vektör grafikleri rasterleştirirken kenar yumuşatma kullanmasına izin verir; bu nedenle ayrı örneklenen bitişik kenarlar, belirli bir ölçekte arka plan renginde kıl inceliğinde bir çizgi ortaya çıkarabilir. Çizgi başka bir yakınlaştırma düzeyinde veya başka bir görüntüleyicide kaybolabilir.

Bazen boşluk gerçektir. Şekilleri üst üste bindirmeden, kontur eklemeden veya yolları birleştirmeden önce dört kontrol yapın: yakınlaştırmayı değiştirin, arka planı değiştirin, çizimi raster olarak dışa aktarın ve yolları dış hat görünümünde inceleyin. Sonuçlar, görüntüleme örneklemesini mi yoksa geometriyi mi düzeltmeniz gerektiğini gösterir.

Görüntüleme izi mi, gerçek boşluk mu?

• Yakınlaştırmayla değişiyor veya kayboluyorsa: muhtemelen bir görüntüleme izidir.
• Arka planla birlikte renk değiştiriyorsa: kenarlar arasında arka plan örnekleniyordur.
• Dış hat görünümünde yoksa: vektör sınırları zaten birleşiyor olabilir.
• Yüksek çözünürlüklü raster dışa aktarmada görünüyorsa: dışa aktarma hassasiyetini ve geometriyi daha yakından inceleyin.
• Çokgen ağda, kesim önizlemesinde veya yol ölçümünde de kalıyorsa: gerçek bir geometri sorunu olarak ele alın.

Birbirine değen yollar neden birleşim izi gösterebilir?

Ekranlar vektör şekillerini bir piksel ızgarasına çizer. Kenar bir pikselin içinden geçtiğinde kenar yumuşatma, kenarın düzgün görünmesi için o pikselde şekil ve arka plan renklerini karıştırır. Ayrı çizilen iki şekil, vektör koordinatları birleşse bile kendi sınır piksellerini ayrı ayrı karıştırabilir.

Ölçek başka bir değişken ekler. Bir boyutta tam piksel sınırına denk gelen ortak koordinat, başka bir boyutta piksellerin arasına denk gelebilir. Dışa aktarma sırasında yuvarlama da bir sınırı çok az kaydırabilir. Bu nedenle bir çizgi yalnızca %67 yakınlaştırmada belirebilir, %100'de kaybolabilir ve web için küçük bir önizleme resminde yeniden görünebilir.

SVG matematiksel olarak hâlâ doğru olabilir. Test etmeden geometriyi düzenlemek; şeffaf, basılı, kesim amaçlı veya animasyonlu kullanımlarda görünür hâle gelen örtüşmeler oluşturabilir.

Temel ayrım, alttaki dış hatların ortak bir kenarı paylaşıp paylaşmadığıdır. Birbirine değen geometri üzerinde görüntüleme izi oluşabilir; gerçek boşluk ise dış hatların kendi arasında görünür kalır.

Düzenlemeden önce dört test yapın

1. Yakınlaştırmayı değiştirin

SVG'yi %100 ve yüksek yakınlaştırma dahil birkaç yakınlaştırma düzeyinde görüntüleyin. Gerçek boşluk, büyüttüğünüzde yolların arasında kalır. Örnekleme izi ise çoğu zaman yanıp söner gibi belirip kaybolur, kalınlığı değişir veya tamamen kaybolur.

Yalnızca yakınlaştırmaya güvenmeyin. Bazı geometrik boşluklar bir pikselden küçüktür ve onların görünümü de değişebilir.

2. Arka planı değiştirin

SVG'yi beyaz, siyah ve canlı renkli arka planlar üzerine yerleştirin. İnce çizgi arka planın rengini alıyorsa görüntüleyici ayrı örneklenen kenarlar arasında arka planı gösteriyordur. Bu, örnekleme izi de gerçek bir şeffaf boşluk da olabilir; bu nedenle dış hat incelemesine devam edin.

3. Yüksek çözünürlüklü PNG dışa aktarın

Son boyutların iki veya dört katında dışa aktarın, ardından küçültülmüş çıktıyı inceleyin. İz yüksek çözünürlüklü dışa aktarmada kayboluyorsa sorun muhtemelen ölçeğe bağlı rasterleştirmedir. Kalıyor ve ölçülebilir hâle geliyorsa koordinatları ve dışa aktarma hassasiyetini inceleyin.

4. Dış hat veya tel kafes görünümünü kullanın

Dolguları kapatın ve gerçek sınırları inceleyin. Komşu düğümleri seçip koordinatlarını karşılaştırın. Yollar tam olarak birleşiyorsa görünür çizgi bir görüntüleyici sorunudur. Uç noktaları veya kenarlar eşleşmiyorsa geometriyi onarın.

Daha kapsamlı yol düzenlemeleri için SVG düzenleme rehberine bakın. En uygun düzeltme dosyanın nasıl kullanılacağına bağlı olduğundan bir kopya saklayın.

Görüntüleme izini düzeltin

Bitişik dolguları arasında şeffaflık olmaması gereken düz çizimlerde çok küçük ve kontrollü bir örtüşme genellikle en güvenilir çözümdür. Alttaki veya daha koyu şekli komşusunun altına az miktarda uzatın. Örtüşme normal boyutta görünmemeli ve dış silüeti değiştirmemelidir.

Diğer seçenekler şunlardır:

• Şekille aynı renkte, izi kapatacak şekilde hizalanmış çok ince bir kontur ekleyin.
• Tüm bitişik parçaların arkasına uyumlu bir taban şekli yerleştirin.
• Yuvarlama ortak kenarları ayırdıysa SVG dışa aktarma koordinat hassasiyetini artırın.
• Son teslim biçimi PNG olduğunda daha büyük bir raster oluşturup küçültün.

SVG shape-rendering özelliği geometrik hassasiyet veya daha keskin kenarlar isteyebilir; ancak MDN bunun bir görüntüleme ipucu olduğunu belirtir. Her birleşim izinin kaybolacağına dair tüm ortamlarda geçerli bir garanti değildir. Bu ipucunu dosyanın tamamına uygulamadan önce crispEdges'in ne zaman yardımcı olduğuna ve nerede olmadığına bakın.

Tek bir düzeltme seçin, ardından gerçek hedef uygulamada test edin. Birkaç düzeltmeyi üst üste uygulamak, şekillerin örtüştüğü yerlerde koyu çıkıntılar veya şişkinlikler oluşturabilir.

Gerçek bir geometri boşluğunu düzeltin

Dış hat görünümü veya sonraki aşamadaki çıktı bir delik olduğunu doğruluyorsa:

1. Amaçlanan düğümleri aynı koordinatta çakıştırın.
2. Komşu kenarları gerçekten birleşene kadar uzatın.
3. Uç noktalarını yalnızca tasarım kesintisiz tek bir yol gerektiriyorsa birleştirin.
4. Yinelenen veya başıboş segmentleri kaldırın.
5. Yeterli koordinat hassasiyetiyle yeniden dışa aktarın.
6. Dosyayı yeniden açın ve dört testi tekrarlayın.

Boşluğu kapatmak için beyaz bir şekil kullanmaktan kaçının. Bu, belirtisini yalnızca beyaz arka planda gizler ve dosyada fazladan bir nesne olarak kalır.

Boşluklar gürültülü bir raster görüntünün vektörleştirilmesinden kaynaklanıyorsa tasarımın birçok yerinde ince parçalar ve tam birleşmeyen kenarlar olabilir. Her birini onarmak, daha temiz bir kaynağı yeniden vektörleştirmekten uzun sürebilir.

Hedef kullanım, doğru düzeltmeyi değiştirir

CAD yüzeyinde veya sonraki aşamada oluşan çokgen ağda kalan bir çatlak, tarayıcıdaki tek piksellik birleşim izinden esaslı biçimde farklıdır. Sonraki aşamadaki geometri ayrılıyorsa kaynak yolları veya dönüşüm toleransını düzeltin. Çizgi yalnızca tarayıcı küçük resminde görünüyorsa üretim geometrisi zaten doğru olabilir.

Kesim öncesi SVG kontrol listesi, makineye özgü kontrolleri ele alır. Birleşim izleri yerine ekranda bulanıklık veya gizli pikseller söz konusuysa pikselli SVG teşhisini kullanın.

PerfectVector bu süreçte nerede yer alır?

PNG veya JPG'den elde edilmiş bir vektörleştirme sonucunda boşluklar dağınık hâlde bulunuyorsa onlarca yolu yamamadan önce raster kaynağa dönün. Belirgin sıkıştırma bloklarını temizleyin, istenmeyen arka planı kaldırın ve özgün görüntünün en belirgin kenarlarını koruyun. Ardından görüntüyü vektöre dönüştürme iş akışıyla görünür bölgeleri düzenlenebilir yollar olarak yeniden oluşturup önizlemeyi inceleyin.

PerfectVector, aynı renkteki iki bölgenin animasyon, kesim veya montaj için ayrı kalması gerekip gerekmediğini bilemez. Silüetleri ve negatif alanı kontrol etmek için önizlemeyi kullanın; ardından indirdiğiniz SVG'yi gerçek hedefinde test edin. Yeniden vektörleştirme, boşlukların kaynak parçalanmasından doğduğu durumlarda yararlıdır; bir tarayıcının doğru bitişik geometriye yalnızca kenar yumuşatma uyguladığı durumda değil.

Sık sorulan sorular

SVG yolları arasında neden beyaz çizgiler var? Tarayıcı veya uygulama bitişik kenarlara ayrı ayrı kenar yumuşatma uyguluyor ve belirli ölçeklerde arka planın görünmesine izin veriyor olabilir. Yollar yine de tam olarak birleşebilir. Düzenlemeden önce yakınlaştırmayı, arka planı, görüntüleyiciyi ve dış hat görünümünü değiştirin.

SVG'deki kenar yumuşatma izlerini nasıl kaldırırım? Bitişik düz renk dolgular için çok küçük ve kontrollü bir örtüşme, aynı renkte kıl inceliğinde bir kontur veya arkaya yerleştirilen bir şekil ekleyin. Sonucu son görüntüleme boyutlarında test edin. Bu düzeltmeleri kesim, CAD, şeffaf veya animasyonlu çizimlerde düşünmeden uygulamayın.

Tüm yolları birleştirmek boşlukları kaldırır mı? Kaldırabilir; ancak ayrı renk ve düzenleme yapısını da ortadan kaldırır. Yolları yalnızca tek şekil olmaları gerekiyorsa birleştirin. Çok renkli çizimler genellikle ayrı nesneler gerektirir; bu yüzden kenarları eşleştirmek veya kontrollü örtüşme daha güvenlidir.

Boşluklar neden yalnızca SVG küçükken görünüyor? Ölçeklendirme, vektör sınırlarını piksel ızgarasına göre kaydırır. Bazı boyutlarda her iki bitişik kenar da aynı piksel satırı veya sütununda arka planla karışır. Daha büyük görüntüleme veya hafif örtüşme arka planın görünmesini önleyebilir.

Çok küçük SVG boşlukları 3D baskı veya kesim için önemli mi? Yüzeyde, çokgen ağda veya takım yolunda da kalıyorlarsa önemlidirler. Yalnızca ekranda görünen bir iz, geometrinin bozuk olduğunu kanıtlamaz. Sonraki aşamanın önizlemesini inceleyin ve üretilen nesneyi değiştiren çatlakları veya açık konturları onarın.

Kaynaklar

1. W3C — SVG 2 Rendering Model — SVG boyama sırasını, kırpmayı, birleştirmeyi ve kenar yumuşatmayı açıklar.
2. MDN — shape-rendering — SVG şekilleri için kullanılabilen görüntüleme ipuçlarını belgeler.
3. W3C — SVG 2 Coordinate Systems — Ölçeğe bağlı görüntülemenin temelindeki koordinat, görüntü alanı ve dönüşüm modelini tanımlar.

---

Parçalanmış bir raster vektörleştirmesi gerçek boşluklar içeriyorsa onu düzenlenebilir vektör yolları olarak yeniden oluşturun ve önizlemeyi inceleyin. Yollar zaten birleşiyorsa dosyayı koruyun ve hedef kullanıma özgü en küçük görüntüleme düzeltmesini uygulayın.