SVG'de yol üzerinde düzenlenebilir rozet yazısı oluşturun

SVG metnini bir yol üzerine yerleştirmek için ID'si olan bir yol tanımlayın, <text> içindeki bir <textPath> öğesinden bu yola başvurun ve sözcükleri etiketlerin arasına yazın. Yazıyı ortalamak için startOffset="50%" ile text-anchor="middle" kullanın. Çizimi yeniden oluşturmadan sözcükleri değiştirebilmek için amblemi ayrı bir grupta tutun.

Bu ayrım, bir kulüp rozetini, mağaza logosunu veya etkinlik logosunu yeniden oluştururken yararlıdır. Ortadaki amblem için vektör yollarına ihtiyaç duyarken bir tarihi düzeltmeniz ya da bir adı değiştirmeniz de gerekebilir. Rozetin tamamını konturlarını izleyerek vektörleştirmek, düzenlenebilir bir metin dizesi yerine harf şekilleri üretir. Sözcüklerin düzenlenebilir kalması gerekiyorsa tipografiyi canlı metin olarak yeniden oluşturun.

Amblemin yanındaki yatay yazı için düz bir SVG etiketini textLength ile sığdırın ve glif oranlarını ayarlamadan önce aralık değişikliklerini karşılaştırın.

Üç ayrı parçayla başlayın

Bir rozet; amblem, kılavuz yol ve o yolu izleyen metinden oluşur. Kılavuz, yazının konumunu belirler; bitmiş tasarımda görünür olması gerekmez. MDN'nin textPath başvuru belgesi, metin ile yol arasındaki href bağlantısını belgeler.

Aşağıdaki örnek için SVG koduyla basit bir çam ağacı ve yarım daire biçiminde bir kılavuz çizdik. İkisi de özgün gösterim çizimleridir; PerfectVector dönüşüm çıktısı değildir. Rozette PINE TRAIL CLUB yazıyor; yazı, oluşturma adımlarının tamamında bir metin dizesi olarak kalıyor.

Düzenlenebilir rozeti oluşturun

Bu kodu badge.svg olarak kaydedin ve tarayıcıda açın. Dosyayı düzenlenebilir ana dosya olarak saklayın. Biçimi yeni öğreniyorsanız SVG dosyası rehberimiz, metin, yollar ve gömülü görüntüler arasındaki farkı açıklar.

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

Yol, (70, 215) noktasından başlar ve üst yarım daireyi izleyerek (330, 215) noktasına ulaşır. Yarıçapı 130 birimdir. Yolu <defs> içine yerleştirmek, görünür bir kontur çizgisi çizmeden ona başvurulabilmesini sağlar. Soluk renkli dış daire, ayrı bir boyalı şekildir.

PINE TRAIL CLUB yerine kendi kısa adınızı yazın, kaydedin ve yeniden yükleyin. Yeni sözcükler aynı kılavuzu izlerken ağaç sabit kalmalıdır. Daha uzun bir ad için sığma durumunu yeniden kontrol etmek gerekir; ortaya hizalamak, her metnin yaya sığmasını sağlamaz.

Hem ofset hem hizalama noktasıyla ortalayın

startOffset="50%", metnin referans konumunu yolun ortasına yerleştirir. text-anchor="middle", metnin ortasını bu konuma hizalar. Biri eğri üzerinde bir konum seçer; diğeri metnin hangi kısmının oraya oturacağını belirler. startOffset başvuru belgesi ve text-anchor başvuru belgesi bu ayarları açıklar.

Yalnızca text-anchor değerini start olarak değiştirmeyi deneyin. Soldan sağa yazılan bu metinde sözcükler artık orta noktadan başlar ve sağ uç noktaya doğru devam eder. Tarayıcı testimizde bu değişiklik, yazıyı sağ tarafa taşıdı ve ifadenin bir kısmını kullanılabilir yayın dışına çıkardı. Font boyutunu ayarlamadan önce middle değerini geri getirin.

Simetrik bir rozette, matematiksel olarak ortaladıktan sonra sonucu gözle inceleyin. Harflerin şekilleri ve yan boşlukları farklıdır; metnin ilerleme genişliği ortalanmış olsa bile küçük bir optik ayar gerekebilir. Sonuç yaklaşık olarak doğru görünene kadar birbiriyle ilgisiz birkaç koordinatı değiştirmek yerine, bu ayarı bilinçli yapın.

Metni taşımadan önce yolun yönünü kontrol edin

Bu üst yayı aynen tersine çevirmek için d değerini şununla değiştirin:

d="M330 215 A130 130 0 0 0 70 215"

Başlangıç ve bitiş yer değiştirir, yayın süpürme bayrağı da değişir. Her iki yay bayrağını görsel olarak anlamak için SVG yay bayraklarının dört birleşimine bakın. Geometrik eğri aynı yerde kalır; ancak metin onu ters yönde izler. Tarayıcı testimizde bu tersine çevirme, yazının yönelimini değiştirdi. Bu rozetin üstünde dik duran yazı elde etmek için özgün yolu geri getirin.

Yolu tersine çevirmek, sözcüklerin yazılışını tersine çevirmekten veya bir dilin yazım yönünü ayarlamaktan farklıdır. Sözcükleri olduğu gibi koruyun. SVG metin yerleşimi belirtimi, gliflerin bir yol boyunca nasıl yerleştirildiğini açıklar. Alt satır için, üst metni amblemi kesene kadar taşımak yerine ayrı bir alt kılavuz oluşturup test edin.

Son aralık ayarından önce fontu seçin

Örnek, Georgia fontunu ve ardından genel serif yedek fontunu ister. Bu istek SVG'ye font gömmez. Görüntüleyici, MDN'nin font-family başvuru belgesinde açıklandığı gibi, aile listesinden kullanılabilir bir yazı tipi seçer.

Chromium gösterimimizde aynı sözcükler için Georgia, serif yerine Arial, sans-serif kullanmak, ölçülen metin ilerleme genişliğini değiştirdi. Yay ve amblem değişmedi. Önemli olan, başka bir bilgisayarda farklı görüntülenebilecek belirli bir genişlik değil, metnin kapladığı bölüm ve harflerin görünüşüdür.

Gerçek bir rozette boyutu veya harf aralığını ayarlamadan önce istediğiniz fontu ve kalınlığı kesinleştirin. Ardından SVG'yi kullanılacağı ortamda yeniden açın. Font orada değişiyorsa ikame font veya içe aktarma davranışını ayırt etmek için SVG font sorunlarını giderme rehberini kullanın.

Yazı yayın dışına taşıyorsa daha kısa bir ifade, daha küçük bir font boyutu veya daha geniş bir kılavuz deneyin. Her değişiklikten sonra rozetin tamamını kontrol edin. Kılavuz yarıçapını büyütmek yazıyı dış kenara yaklaştırabilir; yazı boyutunu küçültmek ise küçük basılmış bir rozeti okumayı zorlaştırabilir. Bu bozulma tasarımın bir parçası değilse, sırf sabit bir bölümü doldurmak için harfleri esnetmeyin.

Yalnızca vektörleştirilmesi gereken çizimi geri kazanın

Amblem yalnızca PNG veya JPG içinde bulunuyorsa onu geri kazanma işini tipografi işinden ayırın. Amblemi olabildiğince temiz biçimde ayıran bir kaynak kopyası kullanın. Rozeti yeniden oluştururken görsel referans olarak özgün dosyanın tamamını saklayın.

Raster amblemi PerfectVector ile vektörleştirin, ardından silüetini, iç boşluklarını ve küçük ayrıntılarını kaynakla karşılaştırın. Kabul ettiğiniz SVG çizimini amblem grubunda kullanın ve yazıyı istediğiniz fontla ayrı olarak yeniden oluşturun. PerfectVector, görüntüden vektör yolları oluşturur; bu iş akışı OCR'ye, yazı tipini tanımaya veya düzenlenebilir kavisli metnin otomatik olarak yeniden oluşturulmasına bağlı değildir.

Özgün vektör amblem mevcutsa onu yeniden kullanın. Yazı özel olarak elle çizilmişse ve düzensiz şekilleri önemliyse onu bir fontla değiştirmek yerine elle çizilmiş yazıyı vektöre dönüştürme iş akışını izleyin. Logo vektörleştirme rehberimiz, kontur izleme, yeniden yazma ve elle onarım arasındaki daha kapsamlı kararı ele alır.

Örnekteki basit ağaç, bir içe aktarma sorununu önler: mevcut bir amblem farklı bir koordinat sistemi kullanabilir veya dönüşümler içerebilir. Bu grubu rozetin viewBox alanında ölçekleyip konumlandırın, ardından metin görünürken yeniden kontrol edin. Yanlış konumlandırılmış bir amblemi telafi etmek için yazı kılavuzunu değiştirmeyin.

Düzenlenebilir ana dosyayı saklayın ve teslim kopyası oluşturun

Adlar, tarihler veya sözcükler değişebilecekse canlı metin kullanışlı ana sürümdür. Başka bir düzenleyiciye veya üretim aracına gönderilecek sabit bir rozetin metni yollara dönüştürülmüş kopyası, alıcının fontun glif şekillerini yeniden oluşturma ihtiyacını ortadan kaldırır. Sözcükler vektör yollarına dönüşür ve normal metin düzenleme özelliğini kaybeder.

Illustrator'ın SVG kaydetme seçeneklerinde Convert To Outlines, yazıyı yollara dönüştürür. Adobe ayrıca yol üzerindeki dışa aktarılmış metnin SVG görüntüleyicilerinde farklı görüntülenebileceği konusunda uyarır. Bunlar, dışa aktarılan kopyayı hedef ortamında incelemek için nedenlerdir; sonraki her aracın rozetin tamamını yeniden üreteceği garantisi değildir. Adobe'nin SVG kaydetme belgelerine bakın.

Şu teslim sırasını kullanın:

1. Herhangi bir metni yola dönüştürmeden önce canlı metin içeren ana dosyayı kaydedin.
2. Sözcükleri, fontu, yol yönünü, ortaya hizalamayı ve aralıkları doğrulayın.
3. Ayrı bir teslim kopyası oluşturun ve düzenleyicinizde bu kopyanın metnini yollara dönüştürün.
4. Bu kopyayı yeniden açın; tüm harfleri, harf içi boşlukları, aralıkları ve amblemi karşılaştırın.
5. Rozeti, kullanılacağı uygulamada hedef çıktı boyutunda kontrol edin.

Metni yollara dönüştürmek, o anda mevcut olan yazı tipinin görünümünü sabitler. Dönüştürme sırasında yanlış yedek yazı tipi etkinse yanlış harfleri sabitlemiş olursunuz. Web görüntüsü için anlamlı bir erişilebilir adı da koruyun; yola dönüştürülmüş harf şekilleri, özgün metin dizesini kendi başlarına taşımaz.

Sık sorulan sorular

SVG metnim neden yol üzerinde ortalanmıyor? Ortalanmış örnek için startOffset="50%" ile text-anchor="middle" kullanın. start hizalamasıyla %50 ofset, ifadeyi kılavuzun ortasından başlatır. Yol şeklini ve tüm yazının sığıp sığmadığını da kontrol edin.

Metin neden baş aşağı duruyor? Kılavuzun yönünü kontrol edin. Metin, yolu çizildiği yönde izler; bu nedenle yolu tersine çevirmek yazının yönelimini değiştirebilir. Metni taşımadan veya yazılışını değiştirmeden önce kılavuz yönünü test edin.

Bir rozeti vektörleştirmek düzenlenebilir kavisli metin oluşturur mu? Vektörleştirme, görünen harf şekillerini çizim olarak yeniden oluşturur. Düzenlenebilir sözcükler için metni istediğiniz fontla ve bir textPath kılavuzuyla ayrı olarak yeniden oluşturun. Metni yollara dönüştürülmüş bir teslim kopyası hazırlamadan önce canlı metin içeren ana dosyayı saklayın.

Kaynaklar

1. MDN — textPath — Canlı metni başvurulan bir yola bağlama.
2. MDN — startOffset — Metni kılavuz boyunca konumlandırma.
3. MDN — text-anchor — Metni referans konumuna göre hizalama.
4. W3C — SVG 2 text — Glif yerleşimi ve yol üzerinde metin düzenleme kuralları.
5. MDN — font-family — Kullanılabilir fontlar ve yedek font ailesi seçimi.
6. Adobe — Save artwork in Illustrator — SVG metnini yollara dönüştürme ve yol üzerindeki metni dışa aktarmanın sınırlamaları.

Yazıyı onaylanmış amblemin çevresinde oluşturun ve rozet son hâlini alana kadar sözcükleri düzenlenebilir tutun. Ambleminiz raster görüntü içinde sıkışıp kaldıysa vektör yollarını geri kazanın, küçük ayrıntıları inceleyin ve kabul ettiğiniz çizimi rozetin ana dosyasında kullanın.