SVG’de delikler neden dolar? Nasıl geri açılır?

SVG’de bir delik, dosya veya hedef ortam iç konturu dolgulu şeklin dışında kabul etmeyi bıraktığında dolar. Yaygın nedenler; çözülmüş bir bileşik yol, ayrı bir dolgulu nesne olarak saklanan iç kontur, değişmiş dolgu kuralı veya yol yönü, ilişkiyi kaybeden bir içe aktarıcı ya da SVG oluşturulmadan önce açıklığı kapatan bir raster görüntü izleme işlemidir.

Önce SVG’yi bir tarayıcıda açın. Delik orada zaten doluysa dosyayı onarın. Tarayıcıda doğru görünüyor ancak başka bir uygulama deliği dolduruyorsa olası sorun içe aktarma adımıdır.

Önce deliğin nerede kaybolduğunu bulun

Geometriyi değiştirmeden önce iki görüntüleyici kullanın:

1. SVG’nin bir kopyasını kaydedin.
2. Kopyayı doğrudan Chrome, Safari, Firefox veya başka bir tarayıcıda açın.
3. Hem açık hem de koyu arka plan üzerine yerleştirin.
4. Aynı dosyayı hedef uygulamada açın.
5. Yalnızca genel silueti değil, söz konusu deliği karşılaştırın.

Bu karşılaştırma, bozuk bir SVG’yi hedef ortama özgü içe aktarma sorunundan ayırır. Ayrıca rastgele yol işlemlerinin, içe aktarmadan önce doğru olan bir dosyaya zarar vermesini önler.

Beyaz bir şekil delik değildir

Gerçek bir delik, SVG’nin arkasında ne varsa onu gösterir. Beyaz bir şekil yalnızca beyaz tuvalde boş görünür. Web arayüzünde kullanılan çizimler için SVG pointer-events rehberi, deliğin, boyalı bölgenin ve ayrı bir tıklama hedefinin tıklamalara nasıl yanıt verdiğini gösterir.

Test etmek için çizimin arkasına geçici bir koyu dikdörtgen ekleyin. Delik sandığınız alan beyaz kalıyorsa o iç nesneyi seçin. Bilinçli bir beyaz tasarım öğesi olarak saklayabilirsiniz, ancak kesicinin, kazıma aracının, tarayıcıda üst üste yerleştirilen görselin veya 3D içe aktarıcısının bunu boş alan olarak yorumlamasını beklemeyin.

Saydam bir açıklık için bileşik yol kullanın veya iç şekli dış şekilden çıkarın. Maske de saydamlık oluşturabilir, ancak birçok üretim uygulaması basit yol geometrisini maskelerden daha güvenilir biçimde işler. Betikle yürütülen bir iş akışı için Paper.js ile içe aktarılan yolları kesip birleştirmeyi deneyin, ardından açıklığı kontrol etmek için dışa aktarılan SVG’yi yeniden açın.

Gobo çizimlerinde doğru bir saydam açıklık olsa bile ayrı bir malzeme kararı gerekir. Çelik ve cam gobo karşılaştırması, aynı O harfini çelik köprü düzeni ve cam destekli tasarım üzerinden ele alır; yansıtılan açık ve koyu bölgeleri tersine çevirmenin bağlı kalması gereken kısımları neden değiştirdiğini açıklar.

Bileşik yollar delik ile dış kontur arasındaki ilişkiyi korur

O harfi, halka ve ortası kesilip çıkarılmış logo, çoğunlukla birden fazla kapalı alt yol içeren tek bir path öğesi kullanır. Dış kontur silueti tanımlar; içte kalan alt yol ise harf içi boşluğu veya kesik alanı tanımlar. SVG yol modeli, tek bir yol içinde birden fazla alt yola izin verir.

Bu nedenle Ungroup, Break Apart ve Release Compound Path birbirinin yerine kullanılamaz. Bileşik yolu çözmek, iç konturu sıradan dolgulu bir nesneye dönüştürebilir. Geometri hâlâ mevcuttur, ancak dış konturla ilişkisi kaybolmuştur.

Bir kopya üzerinde ilişkiyi geri kurun:

1. Dış sınırı ve yalnızca delik olması gereken konturları seçin.
2. Make Compound Path, Combine veya eşdeğer komutu kullanın.
3. Oluşan nesneye tek bir dolgu uygulayın.
4. Dolgu kuralını kontrol edin.
5. Kaydedilen SVG’yi bir tarayıcıda ve hedef uygulamada yeniden açın.

Adobe’nin güncel bileşik yol belgeleri de aynı modeli kullanır: bileşen yollar, dolgu kuralı aracılığıyla dolgulu ve saydam bölgeleri belirler.

Yalnızca görünümü değil, ilişkiyi geri kurun

Damga çizimleri için hangi alanların dolgulu kalacağına karar vermeden önce kabartmalı ve oyuk seramik damga geometrisini kontrol edin.

nonzero ile evenodd farkını kontrol edin

SVG’nin iki dolgu kuralı vardır. SVG 2 boyama belirtimi, başlangıç değeri olarak nonzero belirler ve diğer seçenek olarak evenodd tanımlar.

• nonzero, işaretli yol geçişlerini kullanır. Yanlış yöndeki bir iç kontur, dolguyu iptal etmek yerine ona katkıda bulunabilir.
• evenodd, geçişleri sayar. İki kez çevrelenen bir nokta dışarıda kabul edilir; dolayısıyla basit bir iç içe kontur, yönünden bağımsız olarak deliğe dönüşür.

Bu en küçük örnek yol, aynı yönde iki dikdörtgen içerir. evenodd ile merkez saydam kalır:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Kuralı değiştirmek tasarımla uyumlu olduğunda yararlıdır, ancak evrensel bir onarım değildir. İki konturun yine de aynı şeklin alt yolları olarak değerlendirilmesi gerekir. Birbirinden bağımsız iki nesnede fill-rule="evenodd" ayarlamak, birinin diğerini kesmesini sağlamaz.

nonzero kullanmaya devam ediyorsanız ve düzenleyiciniz bu komutu sunuyorsa yalnızca iç konturun yönünü tersine çevirin. Illustrator, bileşik yollar için her iki dolgu kuralı seçeneğini ve yol yönü kontrolünü sunar. Herhangi bir şeyi tersine çevirmeden önce bir kopya kaydedin; çünkü kendiyle kesişmeler ve birden fazla iç içe boşluk, basit bir halkadan farklı sonuç üretebilir.

SVG doğru, içe aktarıcı yanlış olduğunda

Bazı kesim, CAD, 3D ve animasyon araçları yalnızca SVG’nin pratik bir alt kümesini destekler. Tarayıcı bileşik yolu doğru görüntülerken hedef ortam her konturu dolu bir nesne olarak içe aktarabilir.

Şu onarım sırasını kullanın:

1. Kaynak düzenleyiciden sadeleştirilmiş bir kopya kaydedin.
2. Zayıf nokta metin aktarımıysa bu kopyadaki düzenlenebilir metni konturlara dönüştürün.
3. Maskeleri, kırpmaları ve görünüm efektlerini yalnızca gereken yerlerde sade yol geometrisiyle değiştirin.
4. Amaçlanan her deliği dış konturuyla birlikte tek bir bileşik yol olarak tutun.
5. Tekrar tekrar değiştirmek yerine evenodd ve nonzero kurallarını bilinçli olarak test edin.
6. İçe aktarıcı hâlâ açıklığı dolduruyorsa her iki sınırı da aktarın ve hedef ortamda iç profili çıkarın.

Ekstrüzyon iş akışında hedef ortamın seçilebilir kapalı bir profili de tanıması gerekir. SVG ekstrüzyon teşhisi, delik korunduktan sonraki açık uçları, yinelenen geometrileri ve profil geçerliliğini kapsar.

İzleme açıklığı kapattığında

Raster görüntü kaynağı küçük, bulanık veya düşük kontrastlı olduğunda izleme aracı küçük bir harfin iç boşluğunu kapatabilir ya da dar bir aralığı birleştirebilir. Bu bir dolgu kuralı sorunu değil, geometri sorunudur: iç sınır SVG’ye hiç ulaşmamıştır.

Raster görüntü kaynağına dönün ve:

• bulanıklık eklemeden büyütün veya yeniden yakalayın;
• önemli açıklığın çevresindeki ayrımı artırın;
• aralığın yakınındaki sıkıştırma gürültüsünü kaldırın;
• araç bu kontrolleri sunuyorsa yumuşatmayı veya renk birleştirmeyi azaltın;
• yeni izleme sonucunu son çıktı boyutunda karşılaştırın.

PerfectVector’ın yardımcı olabileceği durum budur. Özgün raster görüntü elinizdeyse ve yeni bir SVG izleme sonucuna ihtiyacınız varsa görselden vektöre iş akışını kullanın. İndirmeden önce her harf içi boşluğu ve negatif alanı inceleyin. SVG, düzenleyici bileşik yollarını çözene kadar doğruysa bunun yerine o SVG’yi onarın; yeniden izleme, kaybolan düzenleme geçmişini geri getirmez.

Önce kaynağı düzeltmeye dayanan bu yaklaşım yazılar için de yararlıdır. El yazısı çizimleri vektörleştirme rehberi, çizimin tamamının karakterini kaybettirmeden küçük harf içi boşlukların nasıl açık tutulacağını gösterir.

Güvenli bir son kontrol

Onarılan SVG’yi göndermeden önce:

• açık, koyu ve saydam arka planlarda görüntüleyin;
• hedefi seçin ve amaçlanan tek bir bileşik yol olduğunu doğrulayın;
• dolgu kuralını düzenleyicide veya SVG kaynağında inceleyin;
• her harf içi boşluğu, halkayı ve kapalı negatif alanı kontrol edin;
• kaydedilmemiş tuvale güvenmek yerine dışa aktarılan dosyayı yeniden açın;
• kullanacağınız hedef uygulamanın kendisinde test edin;
• düzenlenebilir kaynak ile sadeleştirilmiş teslim kopyasını ayrı tutun.

Nesne artık tek bir nesne olarak seçiliyorsa bu doğru olabilir. Bileşik yol, tasarımı gereği tek nesnedir. Yeniden parçalara ayırmadan önce SVG grubu çözme rehberini kullanın.

Sık sorulan sorular

Break Apart kullandıktan sonra delikler neden doldu? Break Apart, iç konturları dış bileşik yoldan ayırdı. Önceden delik olan alanlar sıradan dolgulu nesnelere dönüştü. Komutu geri alın veya her dış konturu doğru iç konturlarla yeniden birleştirin, ardından dolgu kuralını doğrulayın.

SVG delikleri için fill-rule="evenodd" kullanmalı mıyım? Kontur yönü sonucu belirlemediği için evenodd, iç içe konturlarda çoğunlukla kullanışlıdır. Yine de tek şekil içinde çalışır; ayrı bir nesneyi çıkarmaz. Kaynağınız ve hedef ortamınız amaçlanan kontur yönlerini koruyorsa nonzero kullanmaya devam edin.

SVG tarayıcıda doğru görünürken uygulamamda neden dolu görünüyor? Hedef içe aktarıcı bileşik yolu, dolgu kuralını, maskeyi veya kontur yönünü korumuyor olabilir. Bir kopyayı sade yollara indirip yeniden test edin. Gerekirse dış ve iç sınırları içe aktarın ve hedef ortamda deliği çıkarın.

Üste beyaz bir şekil koyarak delik oluşturabilir miyim? Bu yalnızca beyaz arka planda delik görünümü taklit eder. Beyaz nesne dolgulu kalır; dolayısıyla başka bir dolu şekil olarak basılabilir, kesilebilir veya içe aktarılabilir. Arka planın görünmesi gerekiyorsa bileşik yol, çıkarma işlemi veya başka bir saydamlık yapısı kullanın.

PerfectVector mevcut bir SVG’de dolmuş delikleri düzeltebilir mi? Uygun bir raster görüntü kaynağına geri dönüp amaçlanan açıklıkların görünür olduğu yeni bir izleme sonucu oluşturabildiğinizde PerfectVector yararlıdır. Düzenleyicinin çözdüğü veya içe aktarıcının yok saydığı bir bileşik yolu onarmaz. Bu ilişkileri bir vektör düzenleyicide veya hedef uygulamada düzeltin.

Kaynaklar

1. W3C — SVG 2 Painting — nonzero, evenodd ve başlangıç dolgu kuralı değerini tanımlar.
2. W3C — SVG Paths — Yolları, alt yolları ve kapalı yol geometrisini tanımlar.
3. Adobe Illustrator — Create compound paths — Bileşik delikleri, dolgu kurallarını ve bileşen yol yönünün tersine çevrilmesini belgeler.
4. PerfectVector — Image to Vector — Koşullu yeniden izleme durumunda kullanılan güncel raster görüntüden SVG’ye iş akışı.

Açıklık raster görüntü izleme sırasında kaybolduysa temiz kaynaktan yeni bir vektör oluşturun ve teslimden önce her harf içi boşluğu inceleyin. Tarayıcıdaki sürüm zaten doğruysa o geometriyi koruyun ve yalnızca sorunlu içe aktarmayı onarın.