SVG kontur hizalama: İç ve dış kenarlıkları ayarlayın

SVG konturu, genişliğinin yarısı yolun her iki tarafında kalacak şekilde ortalanır. 12 birimlik bir kenarlığın kapalı bir şeklin tamamen içinde kalması için 24 birimlik bir kontur çizin ve bunu şeklin sınırlarıyla kırpın. Aynı görünür genişliği dışarıya yerleştirmek için 24 birimlik konturu, şeklin içini gizleyen bir maskeyle çizin. Özgün yolun bir kopyasını saklayın: kırpma ve maske, alttaki geometriyi değil, neyin göründüğünü değiştirir.

Önerilen stroke-alignment özelliği, SVG Strokes editor's draft belgesinde yer alır; ancak taslak, SVG 2 kontur tanımının normatif olmaya devam ettiğini belirtir. Tarayıcılar ve düzenleyiciler arasında çalışması gereken bir dosyada, önerilen özelliğe güvenmek yerine görünür sonucu oluşturup test edin.

Çizilen kenarlığın nereye yerleştiğini görün

Bu özgün kapalı rozet, üç panelde de aynı yolu kullanır. Turkuaz dolgu, nominal 12 birimlik görünür kenarlık ve çevresindeki belge alanı değişmez. Mercan rengi kesikli çizgi, merkez yoludur. Ortadaki panelde mavi şeridin dış kenarıyla, sağdaki panelde ise iç kenarıyla çakışır.

Ortadaki panel, rozetin çizilen dış sınırını özgün yol üzerinde tutar. Dış kenarlıklı panel ise çizilen alanı yolun çevresinde 12 birim genişletir. Rozet viewBox kenarına çok yaklaşıyorsa bu ek boyalı alan kesilebilir. MDN — Fills and strokes kılavuzu, normal konturları yolun ortasına hizalanmış olarak tanımlar; yukarıdaki karşılaştırma, üç yapıyı aynı boyutta gösterir.

Kırpma ile iç kenarlık oluşturun

Kapalı yolu <defs> içine yerleştirin. Bir kez dolgu, bir kez de kırpma şekli olarak yeniden kullanın. İkinci bir kopyayı istediğiniz kontur genişliğinin iki katıyla çizin, ardından bu konturu yolun iç alanıyla sınırlayın. Kırpma, şeklin dışındaki her şeyi görünmez yapar; konturun gizlenen yarısını silmez. İçe aktarılan kırpma şekli görselden uzaklaşıyorsa MDN — clipPath başvurusuna ve clipPath koordinat kılavuzumuza bakın.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Buradaki 24 birimlik kontur normalde yolun her iki tarafına 12 birim uzanır. Kırpma, dış yarıyı gizleyerek içeride 12 birimlik görünür bir şerit bırakır. İç şeridin tamamının görünür kalmasını istiyorsanız örnekteki gibi dolguyu kırpılmış konturun altına yerleştirin. Delikleri olan bileşik yollarda, hangi tarafın iç alan olduğunu varsaymadan önce dolgu ve kırpma kurallarını inceleyin.

Maske ile dış kenarlık oluşturun

Dış şerit için görünürlük bölgesinin tersine çevrilmesi gerekir. Aşağıdaki maske belge alanında beyaz, rozetin içinde siyahtır. Maske yalnızca kontur kopyasına uygulanır; maskelenmemiş bir kopya ise dolguyu sağlar. Açıkça tanımlanan maske bölgesi, özgün şeklin ötesine uzanan kontur için yer bırakır.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Yine ortalanmış 24 birimlik konturun yalnızca yarısı görünür kaldığından dış şeridin görünür genişliği 12 birimdir. Maske bölgesini bilinçli olarak ayarlayın: MDN — mask, maskUnits, maskContentUnits ve bölge ölçülerinin maskeyi nasıl etkilediğini açıklar. Beyaz dikdörtgen dış konturun tamamını kaplamalıdır. Fazla küçük bir maske, korumak istediğiniz kenarı kesebilir.

Opak dolgu için daha kısa bir görsel yöntem vardır: iki kat genişlikte bir kontur çizin, ardından paint-order="stroke fill" ile dolguyu üzerine çizin. Böylece iç yarı dolgunun altında gizlenir; ancak kontur orada varlığını sürdürür ve dolgu yarı saydam hâle gelirse ya da kaldırılırsa yeniden görünebilir. MDN — Paint order bunu açıklar. Dış şeridin ayrı bir görünür yapı olarak kalması gerekiyorsa açıkça tanımlanmış maskeyi kullanın. Çok renkli bir görselin tüm alfa siluetinden türetilen kenarlıklar için SVG morfoloji kenarlıklarına bakın; bu filtre kaynak yolları korurken görünümü değiştirir.

İçe aktardıktan sonra SVG'yi kontrol edin

Kırpma ve maskeler görüntülemeyi etkiler; sonraki aşamadaki uygulama ise dolgulu konturlar gerektirebilir. Düzenlenebilir bir ana dosya saklayın ve teslim kopyasını gerçek hedef uygulamada test edin:

1. SVG'yi tek başına açın, ardından kullanacağınız düzenleyiciye veya üretim uygulamasına yerleştirin. İç ve dış kenarları aynı yakınlaştırma düzeyinde karşılaştırın.
2. Dış kenarlıklı sürümün çevresindeki viewBox veya çalışma yüzeyini kontrol edin. Dışarı doğru uzanan 12 birimlik şerit ve sivri köşelerdeki birleşimler için yer bırakın.
3. Nesne listesini inceleyin. Örneklerde yeniden kullanılabilir yollar, bir kırpma şekli veya maske ve düzenlenebilir bir kontur bulunur. Bunlar tek bir dolgulu kenarlık konturu oluşturmaz.
4. Alıcının dolgulu geometriye ihtiyacı varsa teslim kopyasında seçili konturu dönüştürün ve oluşan şekilleri inceleyin. Daha sonra genişliği değiştirebilmek için düzenlenebilir kontur içeren kaynağı saklayın.

Çizgi dışa aktarım sırasında kayboluyorsa eksik boyama, kırpma ve içe aktarım desteğini birbirinden ayırmak için kontur görünürlüğü kontrol listesini kullanın. Bir kontur dolguyu beklenmedik biçimde kapatıyorsa SVG paint-order açıklamamız, hangi katmanın en son çizildiğini gösterir.

PerfectVector bu süreçte nerede yer alır?

Bu adımlar düzenlenebilir bir SVG yoluyla başlar. Logo yalnızca PNG veya JPG olarak mevcutsa PerfectVector'ün logo vektörleştirme iş akışı, kırpma veya maske eklemeden önce bir SVG adayı oluşturabilir. Siluetini, köşelerini ve açıklıklarını özgün görselle, hedef teslim boyutunda karşılaştırın. Vektörleştirme, aday bir geometri elde etmenizi sağlar; sizin yerinize iç veya dış kontur hizalaması belirlemez.

Özgün SVG yolu elinizdeyse doğrudan o yolu düzenleyin. Ekran görüntüsünü vektörleştirmek gereksiz bir yeniden oluşturma adımı ekler ve hizalamaya çalıştığınız sınırı değiştirebilir. Logo vektörleştirme kılavuzumuz, vektörleştirme, yeniden çizme ve mevcut vektör ana dosyasını koruma seçenekleri arasında karar vermenize yardımcı olur.

Sık sorulan sorular

SVG, iç veya dış kontur hizalamasını destekler mi? SVG Strokes editor's draft bu değerleri tanımlar; ancak SVG 2'nin normatif kontur tanımı olmaya devam ettiğini belirtir. Farklı uygulamalarda çalışacak bir teslim dosyası için taslak özelliğe bağımlı olmak yerine test edilmiş bir kırpma veya maske kullanın.

Kontur genişliğini neden iki katına çıkarıyorum? Normal bir konturun yarısı yolun bir tarafında, diğer yarısı öteki tarafındadır. Kırpma veya maske bir yarıyı gizler. Bu nedenle örneklerdeki 24 birimlik kontur, içeride veya dışarıda 12 birimlik görünür bir şerit bırakır.

İç kırpma veya dış maske, kesime hazır kenarlıklar oluşturur mu? Hayır. Alttaki yol ve kontur korunurken yalnızca görüntülenen görünüm değişir. Kesim makinesi veya üreticinin dolgulu konturlara ihtiyacı varsa ayrı bir teslim kopyası oluşturun, uygun bir düzenleyicide konturu yollara dönüştürün ve içe aktarımdan sonra geometriyi inceleyin.

Kaynaklar

1. MDN — Fills and strokes — Burada ele alınan ortalanmış kontur çizimini ve paint-order davranışını tanımlar.
2. W3C SVG Working Group — SVG Strokes editor's draft — Önerilen hizalama değerlerini ve taslağın SVG 2'ye göre durumunu ortaya koyar.
3. MDN — clipPath element — İç kenarlık yapısının görünürlüğü nasıl sınırladığını tanımlar.
4. MDN — mask element — Dış kenarlık yapısında kullanılan maske bölgesini ve koordinat niteliklerini tanımlar.
5. Alex Chan — Drawing inner/outer strokes in SVG — Özgün rozet test dosyamızın başlangıç noktası olan, iki kat genişlikte konturla uygulanan kırpma ve maske yaklaşımını gösterir.

Logonuz hâlâ raster görselse PerfectVector ile bir SVG adayı oluşturun, yol sınırını inceleyin; ardından düzenleyicinizde iç veya dış kenarlık yapısını deneyin ve teslim dosyasını kullanılacağı uygulamada doğrulayın.