SVG'de fazla düğüm mü var? Vektörleştirmeyi temizleyin

PNG'yi SVG'ye vektörleştirip düzenlemek için açtınız ve yolun bağlantı noktalarıyla kaplandığını gördünüz. Beş altı noktayla çizilebilecek eğriler boyunca kümelenmiş yüzlerce nokta. Şekli her oynatmaya çalıştığınızda istemediğiniz bir düzine tutamaçla uğraşıyorsunuz.

Tanıdık geliyorsa vektörleştiriciniz bozuk değildir. Çoğu otomatik vektörleştiricinin yaptığını yapıyordur: şekil çizmek yerine pikselleri kopyalamak. Bunun neden olduğunu, sizi düşündüğünüzden fazla nasıl yavaşlattığını ve baştan temiz vektörleri nasıl elde edebileceğinizi inceleyelim.

522 düğüme karşı 59 düğüm

Yöntem notu: bu yazıdaki sayılar, gösterilen belirli karşılaştırma dosyalarındaki yollar seçilip sayılarak elde edilmiştir. Her vektörleştirme aracı veya görüntü için ortalama değil, örnektirler.

Fazla düğüm aslında ne demek?

SVG yolu, doğru ve eğri parçaları oluşturan komutlar ve koordinatlarla tanımlanır. Düzenleyiciler ilgili koordinatları bağlantı noktaları (düğüm olarak da adlandırılır) olarak gösterir; Bézier eğrileri için yön tutamaçları da bulunur. İyi konumlandırılmış birkaç bağlantı noktası uzun ve düzgün bir eğriyi tanımlayabilir. W3C SVG yol belirtimine bakın. Düzgün bir kıvrım üzerindeki tek bir istenmeyen köşe için Bézier birleşim onarımı, bağlantı noktalarını sabit tutarken tutamaçları nasıl hizalayacağınızı gösterir.

Sorun, şeklin ihtiyaç duyduğundan çok daha fazla bağlantı noktası olduğunda başlar. Tasarımcının beş noktayla çizeceği eğri elli noktayla oluşur. Görüntü ilk bakışta iyi görünür, ancak alttaki yol karmaşıktır.

Şunlar varsa muhtemelen gereksiz düğüm yoğunluğu görüyorsunuzdur:

• Basit bir eğride birkaç inç arayla değil, birkaç piksel arayla bağlantı noktaları bulunması.
• Bir şekli seçince birkaç nokta beklediğiniz yerde onlarca noktanın belirmesi.
• Çizimin sadeliğine göre dosyanın şaşırtıcı derecede büyük olması.

Otomatik vektörleştiriciler neden düğüm biriktirir?

Klasik vektörleştirme araçları raster görüntüden sınırlar veya merkez çizgileri çıkarıp bunları vektör eğrileriyle yaklaşık olarak oluşturur. Adobe bunu Yollar, Köşeler ve Gürültü gibi kontrollere sahip Image Trace olarak sunar; Potrace ise bitmap dış çizgileri için çokgen tabanlı eğri uydurma algoritmasını belgeler. (Adobe Image Trace seçenekleri; Potrace makalesi)

Asıl sorun, sınırın nerede olduğudur. PNG'nizde kenar yumuşatma vardır: ekrandaki kenarları düzgün gösteren yumuşak, yarı saydam pikseller. Vektörleştiriciye bu yumuşak kenar hafif dalgalı bir çizgi gibi görünür; her dalgalanmayı izlemek için nokta ekler. "Bu bir yay mı, doğru parçası mı?" diye sormaz; titremeler dâhil piksel dış çizgisini kopyalar. Aracın bunu ne kadar yoğun yaptığı büyük ölçüde değişir; başlıca yapay zekâ görüntü vektörleştiricilerinin karşılaştırmasına bakın.

Bunu yol verisinde de görebilirsiniz. Baykuşun bir kulak tüyünün vektörleştirilmiş ve temiz çizilmiş hâlleri kabaca şöyledir:

<!-- Auto-traced: one ear tuft, 40+ points -->
<path d="M312.4,98.1 C313.0,97.8 313.9,97.2 314.6,96.9 C315.2,96.7
316.1,96.4 316.8,96.2 C317.4,96.0 318.3,95.7 319.0,95.5 ...(many more) Z"/>
 
<!-- Clean: the same tuft, 6 points -->
<path d="M312,98 C320,70 360,68 372,96 C378,112 340,140 312,98 Z"/>

Aynı eğri. Biri her pikselin kopyası, diğeri bir şekil.

Sizi neden yavaşlatır?

Yoğun bir yol, düzenleyicide yalnızca dağınık görünmekle kalmaz. Seçip yeniden şekillendirmeniz gereken bağlantı noktalarını artırır, yol verisini büyütebilir ve sonraki araçların işlemesi için daha fazla parça oluşturur. Etkisi çizime, düzenleyiciye, makineye ve dışa aktarma ayarlarına bağlıdır; düğüm sayısı evrensel bir geçer/kalır sayısı değil, tanı aracıdır.

Tasarım araçlarında

Illustrator veya Figma'da her ek bağlantı noktası, gerçek bir değişiklik yapmadan önce etrafından seçim yapmanız, kaçınmanız veya temizlemeniz gereken bir şeydir. Temiz bir eğriyi yeniden şekillendirmek bir iki noktayla yapılır. Kopyalanmış eğriyi değiştirmek, tüm kümeyle uğraşmayı gerektirir; düzgün tutmak da kolay değildir.

Illustrator'da seçilmiş

Kesim makinelerinde

Kesiciler, takım yolu üretmek için vektör geometrisini kullanır; bu yüzden gereksiz mikro parçaları sadeleştirip test kesimi yapmak yararlıdır. Başarısız içe aktarma veya kesimin tek nedeninin düğüm sayısı olduğunu varsaymayın: Cricut, desen dolguları, kırpma yolları, düzenlenebilir metin ve gömülü raster görüntüler gibi desteklenmeyen SVG özelliklerini ayrıca belgeler. Cricut'ın desteklenmeyen öğeler rehberine bakın. Dosyanız lazere gidecekse lazere hazır SVG hazırlayın ve makine yazılımında doğrulayın.

Cricut yüklemeyi reddederse File Too Large hatasını inceleyin; yol sayısı ve dosya boyutu, düğüm sayısından farklıdır.

Temiz düğümler nasıl elde edilir?

Kabaca ne kadar zahmetten kurtardıklarına göre sıralanmış üç çıkış yolu var:

1. Sonradan sadeleştirin. Illustrator'ın Nesne → Yol → Sadeleştir komutu bağlantı noktalarını azaltabilir. Adobe, sadeleştirmeyi eğri hassasiyeti ve köşeleri korumayla dengeleyen kontroller sunar; bu yüzden kayıpsız varsaymak yerine sonucu önizleyin. Adobe'nin Sadeleştir belgelerine bakın.
2. Vektörleştirme ayrıntısını azaltın. Çoğu araç karmaşıklığı azaltmanıza izin verir, ancak bu kaba bir müdahaledir: düğümleri azaltacak kadar düşürdüğünüzde istediğiniz ayrıntıları da kaybetmeye başlarsınız.
3. Temiz başlayın. Asıl çözüm, baştan temiz yollar üreten bir araçla vektörleştirip temizlenecek bir şey bırakmamaktır.

Bu son hedef, PerfectVector'ı geliştirme nedenlerimizden biridir. Her kaynak piksel dalgalanmasını korumak yerine düzenlenebilir vektör şekilleri üretmek için tasarlanmıştır. Dosya seçmeden önce silüeti, köşe doğruluğunu, düğüm sayısını ve düzenlenebilirliği başka bir sonuçla karşılaştırmak için vektörleştirme kalitesi değerlendirme çizelgesini kullanın.

Üstelik yalnızca illüstrasyonlarda değil; logo ve yazılarda da aynı şişkinlik oluşur. Bu sorun, keskin kenarlara ve temiz vinil kesimlerine ihtiyaç duyduğunuz yerlerde daha çok hissedilir.

Web'e sunum için geometri düzgün olduktan sonra SVGO optimizasyon rehberini izleyin. Rehber dosya boyutu değişikliklerini ve kimliğe bağlı stilleri ayrı ayrı test eder; daha küçük SVG, düzenlenebilir yolların veya sayfa davranışının ihtiyaçlarınızı hâlâ karşıladığını kanıtlamaz.

235 düğüme karşı 76 düğüm

Sonraki dışa aktarım DXF olacaksa CNC iş akışında parça yoğunluğunu ayrı bir teslim sorunu olarak kontrol edin.

Çizimin iki durumu birbirine dönüşerek canlandırılacaksa SVG biçim dönüşümü animasyonu rehberi, düğüm temizliğinin neden kullanışlı nokta eşleşmesini koruması gerektiğini gösterir. Statik başlangıç ve bitişlerin yanı sıra geçişin ortasını da inceleyin.

Deneyin

PerfectVector'ın görüntü-vektör dönüştürücüsüne bir PNG veya JPG bırakın; giriş veya kredi kartı gerekmez. Düğüm ve renk sayısını doğrudan sonuçta görürsünüz; böylece herhangi bir şey indirmeden farkı kendiniz değerlendirebilirsiniz.

Sık sorulan sorular

SVG'de kaç düğüm olmalı? Evrensel bir hedef yoktur: doğru sayı, şekli ve gerekli ayrıntıları koruyan en az nokta sayısıdır. Yalnızca bu yazıda gösterilen baykuş için ölçek örneği olarak, karşılaştırılan sonuç 522, PerfectVector sonucu 59 düğüm içeriyordu. Bunu tüm araçların veya görüntülerin ortalaması değil, tekrarlanabilir bir örnek olarak görün.

Fazla düğüm kesim makinesinde önemli mi? Olabilir. Yoğun yollar, kesim iş akışının işleyeceği daha fazla parça üretir; incelemek veya düzenlemek de zorlaşabilir. Görünür etki makineye, malzemeye, hıza, bıçağa ve yol geometrisine bağlıdır; bu yüzden dikkatle sadeleştirip küçük bir test kesimi yapın. Her içe aktarma sorununu düğüm sayısına bağlamak yerine desteklenmeyen SVG özelliklerini de kontrol edin.

SVG'deki düğüm sayısını nasıl azaltırım? Kabaca ne kadar zahmetten kurtardıklarına göre üç yol vardır. Sonradan yolu sadeleştirmek (Illustrator'da Nesne → Yol → Sadeleştir), ki bu kayıplıdır; istenen ayrıntıyı da kaybettiren kaba bir müdahale olan vektörleştirme ayrıntısını azaltmak; ya da baştan temiz noktalar yerleştiren bir vektörleştiriciyle görüntüyü yeniden dönüştürerek kaldırılacak bir şey bırakmamak.

Illustrator'da Sadeleştir kullanmam yeterli değil mi? Kullanabilirsiniz. Illustrator'ın Sadeleştir özelliği, eğri hassasiyeti ve köşeleri koruma kontrolleri sunarak bağlantı noktalarını azaltır. Aşırı ayarlar köşeleri veya eğrileri değiştirebilir; bu yüzden sonucu kabul etmeden önce önizlemeyi kullanıp silüeti karşılaştırın. Daha basit bir vektörleştirmeyle başlamak gereken temizliği azaltabilir.

Kaynaklar

1. W3C — SVG yolları — SVG yol komutlarının, koordinatlarının ve eğri parçalarının normatif tanımı.
2. Adobe Illustrator — Image Trace paneli seçenekleri — Yol uyumu, köşeler, gürültü, renkler ve vektörleştirme karmaşıklığı için resmî kontroller.
3. Adobe Illustrator — Yolları otomatik sadeleştirme — Resmî sadeleştirme iş akışı ve hassasiyet ile nokta sayısı arasındaki dengeyi kuran kontroller.
4. Selinger — Potrace: çokgen tabanlı vektörleştirme algoritması — Klasik bir vektörleştiricide sınır yaklaşımı ve eğri uydurmanın birincil teknik açıklaması.
5. Cricut — Görüntü yüklemeleri: desteklenmeyen öğeler — Design Space yüklemesini engelleyebilen veya değiştirebilen SVG yapılarının resmî listesi.