SVG shape-rendering: crispEdges ne zaman yararlı?

SVG'nin kenarları bilinçli olarak sert ve çoğunlukla düz tasarlanmışsa ve son görüntüleme boyutunda yapılan testte daha iyi görünüyorsa shape-rendering="crispEdges" kullanın. Fark önemsizse varsayılan auto değerini bırakın. Eğrili çizimlerde bu ipucu kenarı daha pürüzlü gösterebilir. Mevcut şekillerin kendilerini değil, görüntüleyicinin onları nasıl çizdiğini değiştirir. SVG 2 belirtimi bunu bir ipucu olarak tanımlar ve görüntüleyicinin kenar yumuşatmayı azaltmasına veya bazı kenarları cihaz piksellerine hizalamasına izin verir.

Küçük bir simge bulanık veya bir logo dışa aktarma sonrasında tırtıklı görünüyorsa bu ayrım önemlidir. crispEdges, gömülü bir PNG'yi yollara dönüştüremez, bozuk bir konturu onaramaz veya her tarayıcıda aynı pikselleri garanti edemez. Dosyanın tamamını değiştirmeden önce temsili bir şekli, kullanıcıların gerçekten göreceği boyutlarda auto, crispEdges ve geometricPrecision değerleriyle karşılaştırın.

crispEdges görüntüleyiciden ne yapmasını ister?

SVG'de dört shape-rendering değeri vardır. Bunlar dört dışa aktarma biçimi değil, önceliklerdir. Varsayılan auto, görüntüleyicinin hız, kenar kontrastı ve geometrik doğruluk arasında denge kurmasına izin verir. crispEdges güçlü kenar kontrastını önceler ve kenar yumuşatmayı baskılayabilir; geometricPrecision ise geometriye sadakati önceler. MDN'nin SVG öznitelik referansı, bir görüntüleyicinin tüm kenarları veya yalnızca yataya ve dikeye yakın kenarları farklı biçimde ele alabileceğini açıklar. Zorunlu bir keskinleştirme filtresi yoktur.

Üst SVG öğesindeki bir öznitelik alt şekillere miras kalabilir; dolayısıyla bunu köke uygulamak, düzgün kalması gereken bir daireyi etkileyebilir. Bunun yerine tek bir dikdörtgeni veya yolu hedefleyebilirsiniz. Hem SVG sunum özniteliği hem de CSS shape-rendering bildirimi uygulanıyorsa CSS özelliği önceliklidir.

Aynı şekilleri iki boyutta karşılaştırdık

Özgün SVG şekilleri olarak dikdörtgenlerden oluşan bir ızgara simgesi ve eğrili bir kontur oluşturduk. Üç sütunda da işaretleme, dolgular ve viewBox aynıydı; yalnızca shape-rendering değeri değişti. Her şekil Chromium'da, tarayıcı yakınlaştırması %100 iken 63 ve 111 CSS piksel boyutlarında görüntülendi. Görsel, hayalî bir sonucun çizimi değil, bu yerel testin tarayıcı görüntüsüdür.

Aynı SVG geometrisi, üç ipucu, iki boyut

Bu modların hiçbiri yolları değiştirmez. Bu görüntüde farklar, tek bir ayarı genel olarak en iyi ilan etmek için fazla küçüktür. Adı bir onarım aracı gibi görünse de belirli bir şekil, boyut ve görüntüleyici için etkisi sınırlı olabilir. Ek özniteliği korumadan önce gerçek hedef ortamı inceleyin.

Bu, tarayıcı uyumluluğu araştırması değil, Chromium'da yapılan tek bir görüntüleme testiydi. Bir PDF görüntüleyici, tasarım düzenleyicisi veya farklı bir cihaz ölçeğindeki tarayıcı aynı yolları farklı biçimde rasterleştirebilir. SVG 2 tanımı, uygulama seçimlerini bilinçli olarak açık bırakır.

Her yere uygulamadan önce tek bir şekil üzerinde test edin

SVG'nin bir kopyasını kaydedin, ardından ipucunu temsili bir şekle ekleyin. Örneğin bir simgenin dikdörtgen kısmına uygularken eğrili ayrıntıyı auto değerinde bırakın:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

Dosyayı kullanılacağı görüntüleyicide küçük bir simge boyutunda ve daha büyük bir boyutta açın. Çaprazlar ve eğriler dâhil olmak üzere kaydedilen özgün dosyayla karşılaştırın. Satır içi SVG'yi CSS ile biçimlendiriyorsanız özniteliğinizi geçersiz kılan bir kural olup olmadığını kontrol edin. Anlamlı bir iyileşme sağlamıyorsa ipucunu kaldırın; gereksiz bir özellik, sonraki görüntüleme farklarının teşhisini zorlaştırır.

Çözümü gerçek belirtiye göre seçin

Piksel ızgarasının birebir yapısının tasarımın kendisi olduğu bir PNG grafiği (sprite) için raster görüntüyü korumak en temiz seçim olabilir. CSS image-rendering: pixelated, ölçeklenmiş bir görüntünün nasıl örneklendiğini kontrol eder; bu, SVG shape-rendering özelliğinden farklıdır. Piksel sanatı dönüşüm rehberi, ızgarayı ne zaman korumanız, vektör karolar oluşturmanız veya konturu bilinçli olarak yumuşatmanız gerektiğini ele alır.

PerfectVector ne zaman uygundur?

Tek kaynağınız küçük, düzleştirilmiş bir PNG ise ve düzenlenebilir yollara ihtiyacınız varsa bir görüntüleme ipucu bunları sağlayamaz. PerfectVector bu daha erken aşamada yararlıdır: PNG'yi bir SVG adayına dönüştürün, ardından şekilleri ihtiyacınız olan boyutta inceleyin. Seçili yollarda bir görüntüleme ipucu denemeden önce dış konturu, iç delikleri ve küçük ayrıntıları kontrol edin. Kenarları izleyerek vektörleştirme, pikselleri geometri olarak yeniden yorumlayabilir; piksel sanatındaki basamaklı bir kenarın düzgün bir eğriye dönüşüp dönüşmemesi gerektiğine karar veremez.

Özgün ızgara nihai çizimse PNG'yi koruyun. Zaten temiz bir SVG'niz varsa ve yalnızca tarayıcıdaki görüntüsü tuhaf görünüyorsa görüntülemeyi veya geometriyi doğrudan düzeltin. Düzleştirilmiş bir PNG gerçekten düzenlenebilir konturlar gerektiriyorsa PerfectVector ile bir SVG adayı oluşturun, yollarını inceleyin ve crispEdges eklemeden önce tarayıcı görüntüsünü son boyutta karşılaştırın.

Sık sorulan sorular

crispEdges her SVG şeklinde kenar yumuşatmayı kaldırır mı? Hayır. Görüntüleyiciden kenar kontrastına öncelik vermesini ister. Belirtim, yalnızca dikeye veya yataya yakın bazı kenarları değiştirenler dâhil olmak üzere farklı uygulamalara izin verir. Çıktıyı kullanacağınız görüntüleyicide test edin.

shape-rendering="crispEdges" değerini SVG'nin tamamına uygulamalı mıyım? Yalnızca her alt şekil bundan yararlanıyorsa. Kök düzeyindeki bir ipucu, eğrili alt öğeleri de etkileyebilir. Özniteliği tek bir dikdörtgen şekle uygulamak daha kolay değerlendirilir ve bir eğriyi pürüzlü hâle getirme olasılığı daha düşüktür.

crispEdges, SVG içindeki beyaz birleşim çizgilerini veya bulanık PNG'yi düzeltir mi? Gerçek bir boşluğu kapatamaz veya raster piksellerin yerine vektör yollar koyamaz. Önce birleşim çizgisinin geometrisini teşhis edin. Ölçeklenmiş bir PNG için uygun bir raster ölçekleme yöntemi kullanın veya gerçek ihtiyaç buysa düzenlenebilir vektör yollar oluşturun.

Kaynaklar

1. W3C — SVG 2 shape-rendering property — Dört değeri görüntüleyici ipuçları olarak tanımlar ve bunlar için izin verilen öncelik dengelerini açıklar.
2. MDN — SVG shape-rendering attribute — Uygulanabildiği SVG şekillerini, miras almayı ve CSS önceliğini belgeler.
3. MDN — CSS shape-rendering property — Özelliğin davranışını ve eğrilerin görüntülenmesinin neden değişebildiğini açıklar.
4. MDN — CSS image-rendering property — Raster piksel ölçeklemesini vektör şekil kenarlarının görüntülenmesinden ayırır.