SVG Bézier eğrileri: Düğüm eklemeden kırığı düzeltin

İki normal kübik Bézier parçasının birleştiği yerdeki istenmeyen bir kırığı gidermek için ortak bağlantı noktasını yerinde tutun ve bitişik tutamaçları bu noktanın iki karşı tarafında, tek bir düz çizgi üzerinde hizalayın. Eğriler aynı teğet yönünü paylaşırken tutamaçların uzunlukları farklı olabilir. Eşit ve birbirinin yansıması olan tutamaçlar ek bir koşul getirir; görsel olarak pürüzsüz her birleşim için gerekli değildir.

Bu değişikliği yapmadan önce kaynak şekli inceleyin. Sivri bir yaprak ucu, çentik veya yazıdaki köşe kasıtlı olabilir. Aşağıdaki düzeltme, başlangıç, birleşim, bitiş ve parça sayısı sabit tutularak tek bir istenmeyen yön değişikliğini hedefler.

Birleşimi kontrol eden iki tutamacı bulun

Kübik bir SVG komutunda iki kontrol noktası ve bir bitiş noktası bulunur:

C firstControlX firstControlY secondControlX secondControlY endX endY

Parça, geçerli noktadan başlar. İlk kontrol noktası bu başlangıçtan çıkış yönünü, ikincisi ise bitiş noktasına yaklaşımı yönlendirir. MDN yol eğitimi, bu kontrol noktalarını ve kübik sözdizimini gösterir. Küçük harfli komutların koordinat çiftlerinde, tutamaçları değiştirmeden önce referans konumunu takip etmek için SVG göreli yol komutları rehberini izleyin.

Ortak bir bağlantı noktasında, önceki parçanın son kontrol noktasını ve sonraki parçanın ilk kontrol noktasını inceleyin. Bu tutamaçlar farklı doğrultulara yöneliyorsa birleşimde yön değişir. Yakına başka bir düğüm eklemek, tek başına bu ilişkiyi düzeltmez.

Özgün iki parçalı örneği düzeltin

Bu eksiksiz SVG'yi join-example.svg adıyla kaydedip bir tarayıcıda açın. (150, 100) konumunda kasıtlı bir kırığı olan özgün, kavisli bir simgedir.

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

Gelen kontrol noktası (100, 100), birleşimin doğrudan solundadır. Giden kontrol noktası (170, 50), birleşimin yukarısında ve sağındadır. Eğri yatay olarak gelir ve farklı bir yönde ayrılır.

İkinci parçanın yalnızca ilk kontrol noktasını (175, 100) olarak değiştirin:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

Artık iki bitişik tutamaç da birleşimden geçen yatay çizgi üzerindedir. Gelen tutamacın uzunluğu 50 birim, giden tutamacın uzunluğu ise 25 birimdir. Bu uzunluklar farklı olsa da teğet yönleri uyumludur.

Birbirinin yansıması olan bir çift için bunun yerine o kontrol noktasını (200, 100) olarak değiştirin. Böylece iki tutamaç da ortak bağlantı noktasından 50 birim uzanır. Bu, ikinci parçanın şeklini eşit olmayan tutamaçlarla yapılan düzenlemeye göre daha fazla değiştirir; bu nedenle ikisini de korumak istediğiniz konturla karşılaştırın.

Her sürümde iki kübik parça ve eğri üzerinde üç bağlantı noktası vardır: başlangıç, birleşim ve bitiş. Kontrol noktaları ayrı koordinatlardır. Karşılaştırma, özgün bir tarayıcı görüntülemesidir; PerfectVector'ın vektörleştirme sonucu veya bir editörün düğüm aracının ekran görüntüsü değildir.

Yönü tutamaç uzunluğundan ayrı kontrol edin

Son kontrol noktası A olan ve J birleşiminde biten bir kübik eğrinin uç nokta türevi 3 × (J − A) olur. J noktasından başlayan ve ilk kontrol noktası B olan sonraki kübik eğrinin başlangıç türevi 3 × (B − J) olur.

Örneğimizde gelen türev, her panelde (150, 0) değerindedir:

Teğet yönlerinin eşleşmesine G1 sürekliliği denir. Bu iki kübik eğrinin her biri için olağan sıfırdan bire parametre aralığı kullanıldığında, birinci türevlerin eşleşmesi C1 sürekliliğidir. Michigan Tech'in Bézier türev notları belgesi bu uç nokta koşullarını türetir.

Yön testi, uç nokta türevlerinin sıfır olmadığını varsayar. Bağlantı noktasıyla çakışacak şekilde kısaltılmış bir tutamaç ayrıca kontrol edilmelidir; çünkü birinci türevi sıfırdır. Ayrıca iki tutamaç da birleşimin aynı tarafındaysa yalnızca aynı doğru üzerinde olmaları yeterli değildir: ilerleme yönü tersine dönebilir.

Hizalanmış örneklerin hiçbiri, birleşimin iki tarafındaki eğriliklerin eşleşmesini garanti etmez. Bir eğride teğet yönünde köşe olmayabilir, ancak logonun amaçlanan siluetine uyması için yine de yeniden şekillendirilmesi gerekebilir. Yalnızca seçili düğümü değil, kıvrımın tamamını inceleyin.

S komutunu yalnızca istediğiniz şekil yansıma gerektiriyorsa kullanın

Yansıtılmış sürüm daha kısa yazılabilir:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Burada S, önceki kübik eğrinin son kontrol noktasını geçerli noktanın etrafında yansıtarak ilk kontrol noktasını hesaplar:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

S240 50 270 50 içindeki kalan çiftler, ikinci kontrol noktasını ve bitiş noktasını belirtir. Bu, 50/50 yansıtılmış tutamaç sürümüdür. Eğriyi değiştirmeden 50/25 sürümünün yerine kullanılamaz.

SVG kübik komut belirtimi, bu yansıma kuralını önceki komutun C, c, S veya s olmasıyla sınırlar. Önceki komut bir çizgi veya kuadratik eğriyse örtük ilk kontrol noktası bunun yerine geçerli nokta olur.

Örneğin:

M30 150 L150 100 S240 50 270 50

Çizgiden sonra bu son parça, C150 100 240 50 270 50 gibi davranır. İlk tutamacı başlangıç noktasıyla çakışmıştır. Kalan kontrol geometrisi aynı doğru üzerinde olmadığından yine de kıvrılabilir; bir çizgiden sonra gelen S, parçayı düz olmaya zorlamaz.

Tarayıcı kontrolümüzde yansıtılmış S yolunu açıkça yazılmış C eşdeğeriyle karşılaştırdık; ardından çizgiyi S komutunun izlediği bu örneği kendi açık yazımıyla kontrol ettik. İki karşılaştırmada da örneklenen konumlar eşleşti. Bu, bu örnekleri doğrular; genel kuralı ise belirtim tanımlar.

Aynı düzeltmeyi bir düğüm editöründe yapın

Bir kopya üzerinde çalışın, yolu seçin ve şüpheli birleşimin çevresindeki tutamaçları görünür hale getirin. Tek bir ortak bağlantı noktası olduğunu doğrulayın. Yalnızca üst üste gelen iki ayrı uç nokta varsa tutamaç yönlerini değiştirmeden önce topolojiyi düzeltmeniz gerekebilir.

Inkscape'te düğüm türleri rehberi, tutamaçları aynı çizgiyi paylaşan pürüzsüz düğümler ile tutamaç uzunlukları da eşit kalan simetrik düğümler arasındaki farkı açıklar. Her birleşimi simetrik olmaya zorlamak yerine kontura uygun düğüm türünü kullanın.

Tutamaç yönünü ayarlarken bağlantı noktasını sabit tutun. Ardından birleşimin çevresindeki amaçlanan şekli geri kazanmak için tutamaçları kısaltın veya uzatın. Sonucu hem yüksek yakınlaştırmada hem de normal görüntüleme boyutunda karşılaştırın ve dışa aktarılan yolu incelemek için kaydedilen SVG'yi yeniden açın.

Yolun tüm kıvrımı boyunca sıkışık bağlantı noktaları varsa yerel bir tutamaç düzenlemesi yeterli olmayabilir. SVG düğüm sayısı rehberi sadeleştirmeyi, SVG düzenleme iş akışı ise daha kapsamlı değişiklikleri ele alır. Her iki işlemde de kasıtlı köşeleri koruyun.

Düzeltilmiş şekli kaynağıyla karşılaştırın

Pürüzsüz bir birleşim, kalite kontrollerinden biridir. Vektörleştirilmiş bir logonun özgün logoyla eşleştiğini kanıtlamaz. Vektörleştirme kalitesi kontrol listesini kullanarak siluetini, açıklıklarını ve kasıtlı köşelerini karşılaştırın.

Simgenin yalnızca PNG veya JPG sürümü mevcutsa PerfectVector'ın logo vektörleştirme aracı, düzenlenebilir bir SVG adayı hazırlayabilir. Konturlarını inceleyin, ardından istenmeyen kırığın kaldığı yerde yerel bir tutamaç düzeltmesi yapın. Yumuşatma işleminin korumak istediğiniz bir özelliği silmemesi için raster referansı düzenlenen yolun yanında tutun.

Varsa mevcut bir vektör ana dosyasını kullanın. Markanın geometrisini birebir oluşturmak veya ciddi biçimde bozulmuş bir kaynağı düzeltmek elle yeniden oluşturma gerektirebilir; logo vektörleştirme rehberi bu seçimi açıklar. Konturun geri kalanı zaten uygunsa tek bir birleşime rötuş yapmak yararlıdır.

Sık sorulan sorular

Pürüzsüz bir birleşim için iki Bézier tutamacının uzunluğu aynı mı olmalı? Hayır. Sıfır uzunlukta olmayan tutamaçlar, aynı teğet yönünü paylaşırken farklı uzunluklarda olabilir. Ortak bağlantı noktasında aynı çizginin üzerinde, karşı taraflarda bulunmalıdırlar. Eşit ve birbirinin yansıması olan tutamaçlar, burada kullanılan iki kübik parçanın birinci türevlerinin de eşleşmesini sağlar.

SVG'nin S komutu eğrimi neden değiştiriyor? S, ilk kontrol noktasını hesaplar. C veya S komutundan sonra önceki kübik eğrinin son kontrol noktasını yansıtır; diğer komut türlerinden sonra geçerli noktayı kullanır. Bu yolla hesaplanan nokta, açıkça belirtmek istediğiniz kontrol noktasından farklı olabilir.

Vektörleştirilmiş bir logodaki her düğümü yumuşatmalı mıyım? Hayır. Kasıtlı köşeleri, uçları ve çentikleri koruyun. İstenmeyen kırığı yerel olarak düzeltin, ardından siluetin tamamını kaynakla karşılaştırın. Teğet sürekliliği olan bir birleşim tek başına doğru bir yeniden oluşturma elde edildiğini göstermez.

Kaynaklar

1. MDN — SVG paths — Kübik kontrol noktalarını ve yol komutlarının sözdizimini açıklar.
2. Michigan Tech — Bézier derivatives — Uç nokta teğetlerini ve eğrilerin birleştirilme koşullarını türetir.
3. W3C — SVG cubic Bézier commands — S için yansıma kuralını ve yansıma uygulanamadığında kullanılan kontrol noktasını tanımlar.
4. Inkscape — Node types — Köşe, pürüzsüz, simetrik ve otomatik düğümlerin davranışları arasındaki farkları açıklar.

Logonuz raster görüntüyle başlıyorsa PerfectVector ile bir SVG adayı hazırlayın, birleşimleri ve silueti inceleyin; ardından kasıtlı köşeleri koruyarak yalnızca ihtiyaç duyan eğrileri düzeltin.