SVG boyama sırası: Kalın konturu yazının arkasına alın

Bir SVG metin veya şekil öğesinde paint-order="stroke fill" ayarlayarak konturunu dolgudan önce çizin. Opak bir dolgu kullanıldığında dolgu, konturun içe bakan kısmını örter; böylece kalın kontur, harflerin renkli yüzeyini daraltmaz. CSS'te paint-order: stroke fill; de yazabilirsiniz.

Yol, yazı tipi boyutu ve kontur kalınlığı aynı kalır. Bu bir görünüm ayarıdır; kontur kalınlığını artırdığınızda bir yazı logosu fazla ağır görünmeye veya zor okunmaya başladığında işe yarar. Dışa hizalanmış bir kontur ya da yeni bir kesim konturu oluşturmaz.

Varsayılan kontur neden harflerin içini daraltır?

SVG normalde önce öğenin dolgusunu, ardından konturunu, sonra da işaretçilerini boyar. Merkeze hizalanmış bir kontur, dolgulu şeklin sınırının her iki tarafına uzanır. Konturun en son boyanması, dolgunun bir bölümünü örter. Dar harf gövdelerinde kalın bir kontur, yüzey renginin büyük kısmını gizleyebilir.

İlk iki işlemin sırasını ters çevirmek, dolgunun bu örtüşen bölgeyi kapatmasını sağlar. SVG boyama belirtimi sıralamayı tanımlar; MDN'nin SVG öznitelik başvurusu ise hem özniteliği hem de CSS karşılığını belgeler. Kısa stroke değeri, stroke fill markers ile aynı sırayı verir: belirtilmeyen işlemler, kendi normal göreli sıralarıyla ardından gelir.

Efektin çalışması için görünür bir dolgu gerekir. fill="none" olan bir yolda içteki konturun üzerine boyanacak bir şey yoktur. Kısmen saydam bir dolgu, konturun alttan görünmesine izin verebilir; bu yüzden burada gösterilen sonuç için opak dolgu kullanın.

Aynı çizimi iki boyutta karşılaştırın

Düzenlenebilir metinle kısa bir BOLD yazı logosu ve küçük, üçgen biçimli bir yol amblemi oluşturduk. Aşağıdaki tarayıcı karşılaştırmasında her çiftte yalnızca boyama sırası değişiyor. 4 ve 8 SVG kullanıcı birimi kalınlığında konturlar kullanılıyor; ardından aynı 400 × 110 viewBox, 400 ve 200 CSS piksel genişliğinde gösteriliyor.

8 birimlik ayarda normal sıralı yazı logosu sarı yüzeyinin büyük kısmını kaybeder. Dolguyu en son boyamak sarı harf gövdelerini görünür tutar. Etki, 200 piksellik sürümde de belirgindir; ancak küçük boşluklar dar kalır. Amblemin minicik iç boşluğu da daha kalın konturla zor ayırt edilir hale gelir.

Bu son ayrıntı önemlidir: boyama sırası, her deliği veya aralığı okunabilir hale getirmeden bir harfin yüzeyini koruyabilir. Konturlar yine dolgusuz alanlara uzanır. Hedef gösterim boyutunda bir boşluk kapanıyorsa konturu inceltin veya çizimi sadeleştirin. Tarayıcı önizlemesini büyütmek, okuyucunun gerçekten göreceği boyutu kontrol etmenin yerini tutmaz.

Bunlar özgün çizim örnekleridir; PerfectVector dönüştürme sonuçları değildir. Yazı logosu, kurulu Arial yazı tipini ve yedek olarak sans-serif'i kullanır; farklı bir yazı tipi harf şekillerini ve aralıklarını değiştirir.

Eksiksiz bir SVG deneyin

Bunu wordmark.svg olarak kaydedin ve doğrudan tarayıcıda açın. Örnek, görünür kontur için şekillerin çevresinde yeterli alan bırakır. Karşılaştırma için paint-order değerini normal yapın, ardından stroke-width="4" deneyin.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

Grup, boyama özelliklerini yol ve metne aktarır. Her alt öğe kendi render işleminde istenen sırayı kullanır. fill-rule="evenodd", ambleme iç boşluğunu verir; boyama sırasından bağımsızdır.

Küçük örnekleri yeniden oluşturmak için viewBox'a dokunmadan width ve height değerlerini 200 ve 55 yapın. Bu dosyada ölçeklemeden bağımsız bir kontur olmadığı için çizim ve konturu birlikte ölçeklenir. Bu yarı boyut eşlemesinde 8 birimlik kontur, dolgunun gizlediği bölüm hesaba katılmadan önce 4 CSS piksel kalınlığına iner.

Stil sayfası kullanan sürüm için hedef öğeye bir sınıf atayın ve şunu ayarlayın:

.outlined-wordmark {
  paint-order: stroke fill;
}

Aynı özellik hem bir sunum özniteliğinde hem de bir CSS bildiriminde belirtilirse CSS öncelik kazanır. Özniteliği değiştirmek hiçbir şey yapmıyor gibi görünüyorsa uygulanan kuralları inceleyin. MDN'nin CSS başvurusu, kalıtımı ve izin verilen anahtar sözcük birleşimlerini de açıklar.

Bu ayar neleri değiştirmez?

Kontur hizalaması. Kontur hâlâ aynı merkez yolunu izler. Dolguyu konturun bir bölümünün üzerine boyamak, dolgulu bölgelerde dışarıda gibi görünen bir kenarlık oluşturur; ancak kontur geometrisini dışarıya taşımış olmaz. Bir boşluğun kenarında, görünür kalan kontur boşluğun içine girebilir.

Ayrı nesnelerin üst üste binme sırası. Bir öğenin boyama sırasını ayarlamak onu komşu bir şeklin arkasına göndermez. Daha sonra gelen, onunla örtüşen bir nesne yine onu kapatabilir. Sorun buysa nesnelerin sırasını değiştirin. Bir örnek için SVG z-index'in logo yollarını neden yeniden sıralamadığına bakın.

Kesim yolları veya ofsetler. Bir kesici ya da geometri aracı uygun konturlara ihtiyaç duyar. Tarayıcıdaki güzel bir konturu tek, birleşik bir kenarlık olarak yorumlayacağı varsayılamaz. Teslim işi gerektiriyorsa gerekli geometriyi ayrı olarak oluşturun ve inceleyin.

Yazı tipinin taşınabilirliği. Örnek düzenlenebilir metin içerir. Boyama sırasını değiştirmek yazı tipini paketlemez veya glif şekillerini sabitlemez. Yazı logosu başka yerde yeniden açıldığında değişiyorsa SVG yazı tipi değişikliği kontrollerini kullanın.

Düzenleme yaparken bu ayrımları koruyun. Boyama sırası değişikliği kolayca geri alınabilir; konturları şekle dönüştürmek veya metni yollara çevirmek, belgenin düzenlenebilir yapısını değiştirir.

Teslim kopyasını kullanılacağı yerde kontrol edin

Tarayıcı sonucuyla başlayın, ardından kaydedilmiş dosyayı kullanacak uygulamada veya render aracında açın. Yalnızca tarayıcı önizlemesi, bir düzenleyicinin, PDF dönüştürücünün veya üretim hattının görünümü koruduğunu kanıtlamaz.

1. Yüzey rengini ve dış kenarlığı son boyutta karşılaştırın. B, O ve amblemdeki dar boşlukların içine bakın.
2. Beklenen yazı tipinin yüklendiğini doğrulayın. Harf şekilleriyle birlikte aralıkları da kontrol edin.
3. Sayfa kenarlarını kontrol edin. Daha kalın bir kontur, görüntüleme alanında veya kırpma bölgesinde daha fazla yere ihtiyaç duyabilir.
4. Dışa aktarılan teslim dosyasını yeniden açın. Çalışma belgesi doğru görünse bile dışa aktarım, stilleri veya nesne yapısını değiştirebilir.

Hedef uygulama konturu değiştiriyorsa dosyayı tek bir dolgulu, konturlu şekle indirgeyin ve tarayıcıyla karşılaştırın. Sorun kırpma, ölçekleme veya eksik boyamaysa kaybolan SVG konturlarının teşhisini izleyin. Renk kuralları çakışıyorsa SVG renklendirme kılavuzu, dolguların ve konturların nerelerde tanımlanabileceğini açıklar.

Canlı görünüm aktarım sırasında korunamıyorsa düzenlenebilir aslı saklayın ve gerekli görünümün şekillerle temsil edildiği ayrı bir teslim kopyası hazırlayın. Bu kopyayı hem görsel hem geometrik olarak doğrulayın; merkezlenmiş bir konturu yalnızca şekle dönüştürmek, tek başına amaçlanan tüm örtüşmeleri yeniden oluşturmaz veya tek bir dış kontur meydana getirmez.

Kaynak bir raster logo olduğunda

Elinizde özgün vektör amblem ve düzenlenebilir yazı varsa bunları kullanın. Yalnızca kontur eklemek için çalışan metnin ekran görüntüsünü alıp vektörleştirmenin bir yararı yoktur.

Amblemin yalnızca PNG veya JPG hali kaldıysa PerfectVector'ın logo vektörleştirme iş akışı, bu aşamadan önce bir SVG adayı hazırlamanıza yardımcı olabilir. Bu stili uygulamadan önce dönüştürülen silüeti ve küçük boşlukları inceleyin. Dönüştürme; boyama sırasını ayarlamaz, özgün yazı tipinizi belirlemez veya hangi şekillerin ortak bir kontur kullanacağına karar vermez.

Yazı doğru yazı tipiyle yeniden oluşturulabiliyorsa tasarım sırasında onu ayrı bir metin nesnesi olarak tutun. Daha kapsamlı logo vektörleştirme kılavuzu, raster çizimi geri kazanmakla mevcut bir vektör aslı kullanmak arasında nasıl seçim yapılacağını açıklar.

Sık sorulan sorular

SVG'de varsayılan boyama sırası nedir? Varsayılan sıra dolgu, ardından kontur ve sonra işaretçilerdir. normal değeri bu sırayı ister.

paint-order="stroke", "stroke fill" değerinden farklı mı? Burada aynı sırayı üretirler: kontur, dolgu, ardından işaretçiler. Listelenmeyen işlemler, listelenen işlemlerden sonra kendi normal göreli sıralarıyla gelir.

paint-order dışa hizalanmış bir kontur oluşturur mu? Konturu taşımaz veya ofset uygulamaz. Opak dolgu, merkezlenmiş konturun içe bakan bölümünü gizler. Kalan kontur yine boşlukları ve aralıkları daraltabilir.

SVG konturum neden hâlâ çok ağır görünüyor? Kontur gösterim boyutu için çok kalın olabilir, dolgu saydam olabilir veya başka bir CSS kuralı boyama sırasını geçersiz kılabilir. Bu koşulları kontrol edin ve küçük boşlukları son boyutta inceleyin.

Kaynaklar

1. W3C — SVG 2 Painting — Boyama sırasını ve dolgular ile konturlar arasındaki ilişkiyi tanımlar.
2. MDN — SVG paint-order attribute — Anahtar sözcük sırasını, desteklenen öğe türlerini ve CSS'in sunum özniteliğine göre önceliğini belgeler.
3. MDN — CSS paint-order property — Kalıtımı ve kısaltılmış anahtar sözcük dizilerini açıklar.

Elinizde yalnızca raster görüntü biçiminde bir amblem mi var? Düzenlenebilir bir logo SVG'si hazırlayın, boşluklarını inceleyin ve teslim kopyasını oluşturmadan önce konturu hedef boyutta test edin.