SVG miter çıkıntıları: Sivri köşeleri kırpmadan düzeltin

SVG kenarlığındaki iğne gibi sivri bir uç genellikle dar açılı bir köşedeki miter birleşiminden kaynaklanır. Bu ucu istemiyorsanız stroke-miterlimit değerini düşürün veya bevel ya da round birleşimini seçin. Uç tasarımın bir parçasıysa ancak sivri kısmı kayboluyorsa çizilen kontura viewBox içinde daha fazla alan ayırın. Bunlar farklı düzeltmelerdir: biri köşenin şeklini, diğeri dosyanın gösterebildiği alanı değiştirir.

Test ederken özgün SVG'nin bir kopyasını saklayın. Bilinçli olarak sivri uçlu tasarlanmış bir logonun miter birleşimini korumak gerekebilir; içe aktarılan bir kenarlıktaki istenmeyen çıkıntı içinse daha düz bir birleşim gerekebilir. Önce hangi köşenin korunması gerektiğine karar verin.

Dar açılı bir köşe neden sivri çıkıntı oluşturur?

Konturlu bir yolun merkez çizgisinin her iki yanında genişliği vardır. stroke-linejoin="miter" kullanıldığında konturun dış kenarları kesişene kadar uzanır. Dönüş açısı daraldıkça bu kesişim noktası daha uzakta olabilir. SVG 2 Painting tanımına göre SVG'nin başlangıç birleşim stili miter, başlangıç stroke-miterlimit değeri ise 4 olur.

Limit, piksel veya SVG birimi cinsinden bir mesafe değil, bir orandır. Miter uzunluğunun stroke-width değerine bölümü limiti aşarsa normal bir miter birleşimi bevel birleşimine dönüşür. Daha yüksek limit daha uzun bir sivri uca izin verir; daha düşük limit daha fazla dar açılı köşeyi düzleştirir. MDN — stroke-miterlimit başvurusu, köşe açısıyla ilişkiyi gösterir ve bir CSS özelliğinin SVG sunum niteliğini geçersiz kılabileceğini belirtir.

Tek yol, dört görünür sonuç

Bu test için d="M130 520 L180 200 L230 520" yoluyla, 26 birimlik kontura sahip açık ve köşeli bir amblem parçası çizdik. İlk iki panelde miter limiti 10'dur. İkinci panel, y=170 konumunda dar bir görünür sınır uygular ve ucu keser. Üçüncü panelde limit 4 olduğundan bu köşe bevel birleşimine dönüşür. Dördüncü panel round kullanır. Bu, o yol ve çizim motoru için kontrollü bir gösterimdir; içe aktarılan her SVG'nin aynı köşe şekline sahip olacağına dair bir vaat değildir.

Kırmızı kesikli merkez yolu dört panelde de değişmez. Bu önemlidir: kontur birleşimini değiştirmek, alttaki vektör yolunu yeniden oluşturmadan çizilen kenarlığı düzeltebilir.

Çıkıntı mı, bevel birleşimi mi, kesilmiş bir uç mu?

Kırpılmış bir uç ilk bakışta bilinçli yapılmış bir bevel birleşimine benzeyebilir. Yakınlaştırın ve bitişinin dosya sınırıyla hizalanıp hizalanmadığını kontrol edin. Kaybolan SVG konturlarını teşhis etme kılavuzu, diğer boyama ve kırpma nedenlerini ele alır; bu test ise miter köşesini tek başına inceler.

Yanlış öğeyi değiştirmeden köşeyi düzeltin

1. Yolu ve geçerli birleşimini bulun

Bir vektör düzenleyicide köşeyi seçin veya SVG metninde stroke, stroke-width, stroke-linejoin ve stroke-miterlimit değerlerini inceleyin. Yolun kendi nitelikleri yanında üst grupları ve CSS kurallarını da kontrol edin. MDN — CSS stroke-miterlimit belgesinde açıklandığı gibi satır içi veya stil sayfasındaki bir stroke-miterlimit özelliği, öğedeki aynı sunum niteliğine göre öncelikli olabilir.

Seçili nesne düzenlenebilir bir kontur yerine dolgulu bir kenarlıksa miter ayarlarını değiştirmeyi bırakın. O dolgunun yolunu değiştirmeniz veya konturu henüz dolgulu şekle dönüştürülmemiş ana dosyaya dönmeniz gerekir. İçe aktarılan görselin tamamı yanlış boyuttaysa kontur genişliğini değiştirerek telafi etmeden önce boyutu bilinen SVG ile içe aktarım testini uygulayın.

2. Bir kopyada tek bir birleşim ayarını değiştirin

Keskin hatlı düz bir köşe kabul edilebiliyorsa önce bevel deneyin. Tasarım yumuşatılmış bir kenara izin veriyorsa round deneyin. Tam sivri uç logonun bir parçasıysa miter kullanmayı sürdürün ve yalnızca amaçlanan uçları koruyan bir limit seçin. SVG — stroke-linejoin başvurusu, yaygın birleşim şekillerinin farklarını tanımlar.

Yukarıda kullanılan yolun küçük bir test kopyası şöyledir:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Bu belirli açıda bevel birleşimine geçişi görmek için stroke-miterlimit değerini 4 yapın. Ardından 10 değerine geri dönün ve stroke-linejoin değerini round veya bevel olarak değiştirin. stroke-miterlimit değeri bu son iki birleşim stilinde etkili değildir. Tek bir köşe sorun çıkarıyor diye bu değeri logonun tamamında düşürmeyin; diğer sivri uçlar bilinçli tasarlanmış olabilir.

3. Korunacak uç için tuvalde yeterli yer bırakın

Miter doğruysa ancak kenarda kayboluyorsa viewBox alanını yalnızca yol koordinatlarına göre değil, çizilen sonucun çevresinde genişletin veya yeniden konumlandırın. SVG 2 Coordinate Systems tanımı, görünür dikdörtgeni açıklar; kontur, merkez yolunun koordinatlarının ötesine uzanabilir. İç içe SVG görüntüleme alanlarını ve kırpma yollarını da kontrol edin. Üst öğedeki bir kırpma, kök viewBox genişletildikten sonra bile ucu kesmeye devam edebilir.

Daha büyük tuvali, istenmeyen bir iğne ucu için çözüm olarak görmeyin. Bu yalnızca o ucun daha fazla kısmını gösterir. Öte yandan, dar bir çalışma yüzeyine sığdırmak için birleşimi bevel yapmak, tasarlanmış bir köşeyi ortadan kaldırabilir. Teslim dosyasını özgün logoyla gerçek görüntüleme veya baskı boyutunda karşılaştırın. Bir üretici SVG'nin fiziksel boyutunu ölçüyorsa viewBox eşlemesini bilinçli biçimde değiştirirken amaçlanan genişlik ve yüksekliği koruyun.

4. Teslim dosyasını yeniden açın

Sonucu bir tarayıcıda ve hedef düzenleyici veya üretim uygulamasında inceleyin. Sivri ucu %100 yakınlaştırmada ve amaçlanan son boyutta kontrol edin. Teslimde düzenlenebilir konturlar yerine dolgulu konturlar gerekiyorsa özgün ana dosyanızı saklayın, bir düzenleyicide teslim kopyasının konturlarını dolgulu şekillere dönüştürün ve yeni dolgulu sınırı inceleyin. Konturu dolgulu şekle dönüştürmek geometriyi değiştirir; bu, geri alınabilir bir miter ayarı değildir. Dolgular ve kenarlıklar için daha geniş bir kontrol arıyorsanız SVG paint-order kılavuzuna bakın.

Raster logoda önce yeni bir yol gerektiğinde

Miter denetimleri yalnızca düzenlenebilir bir vektör konturunda çalışır. Logonuzdan geriye yalnızca PNG veya JPG kaldıysa PerfectVector'ün logo vektörleştirme iş akışı, köşeleri düzenlemeden önce bir SVG adayı oluşturabilir. Elde edilen silueti, küçük boşlukları ve yol yapısını kaynakla karşılaştırın. Vektörleştirme, kalın bir raster çizgiyi özgün düzenlenebilir merkez çizgisi yerine dolgulu bir kenarlık olarak temsil edebilir; dolayısıyla stroke-miterlimit değerinin bu sonucu otomatik olarak düzeltmesini beklemeyin. Kritik bir geometrik ucun marka ana dosyasıyla tam olarak eşleşmesi gerekiyorsa onu yeniden çizin.

Özgün SVG mevcutsa ekran görüntüsünü vektörleştirmek yerine o dosyayı düzeltin. Logo vektörleştirme kılavuzu, görseli gerçekten piksellerden yeniden oluşturmanız gerektiğinde yardımcı olur; bu makale ise uygun bir düzenlenebilir konturun zaten mevcut olduğu aşamadan başlar.

Son köşe kontrolü

1. Dokunulmamış vektör ana dosyasını kaydedin.
2. Köşenin düzenlenebilir bir kontur mu, dolgulu bir kontur mu olduğunu doğrulayın.
3. Sorunlu tek yol üzerinde miter, bevel ve round seçeneklerini karşılaştırın.
4. Miter birleşimini koruyorsanız limitini test edin ve çizilen ucun tamamı için yeterli görünür alan bırakın.
5. SVG'yi gerçekten kullanılacağı uygulamada yeniden açın ve son boyutta kontrol edin.

Sık sorulan sorular

SVG'mde neden sivri köşelerde çıkıntılar var? Miter birleşimi konturun dış kenarlarını kesişene kadar uzatır. Dar bir açıda bu kesişim noktası merkez yolundan çok uzakta olabilir. Sivri uç istenmiyorsa miter limitini düşürün veya bevel ya da round kullanın.

stroke-miterlimit değerini düşürmek köşeyi neden düzleştiriyor? Miter uzunluğunun kontur genişliğine oranı limiti aşınca normal bir miter birleşimi bevel birleşimine geçer. Daha düşük değerler bu geçişi daha fazla köşede tetikler. Sivri uç bilinçli tasarlanmışsa daha yüksek limiti koruyun, ardından sınırlarını kontrol edin.

Miter limitini artırdıktan sonra SVG'min sivri ucu neden hâlâ kesiliyor? Daha yüksek limit, ucu uzatırken viewBox veya kırpma şekli onu kesmeye devam ediyor olabilir. Çizilen konturun çevresindeki görünür alanı genişletin veya logoyu yeniden konumlandırın; ardından teslim edilen SVG'yi hedef uygulamada yeniden açın.

Kaynaklar

1. W3C — SVG 2 Painting — Kontur birleşimlerini, başlangıç değerlerini ve miter limitinin aşılması durumundaki davranışı tanımlar.
2. MDN — stroke-miterlimit — Limit oranını ve sivri köşe açılarıyla ilişkisini açıklar.
3. MDN — stroke-linejoin — Konturlu yollar için yaygın köşe şekillerini tanımlar.
4. MDN — CSS stroke-miterlimit — CSS özelliğinin SVG sunum niteliğine göre önceliğini belgeler.
5. W3C — SVG 2 Coordinate Systems — Sınır kontrolünde kullanılan viewBox ve görüntüleme alanı ilişkisini tanımlar.

Bu düzeltmeden önce, yalnızca raster olarak mevcut olan logonuz için kullanılabilir yollar gerekiyorsa logodan bir SVG adayı oluşturun, geometrisini inceleyin; ardından önemli köşeleri ayarlayın veya yeniden çizin.