SVG yazı tipi dışa veya içe aktarımda neden değişir?

SVG yazı tipiniz değişir; çünkü düzenlenebilir SVG metni genellikle bir yazı tipinin adını belirtir, o yazı tipinin harf şekillerini otomatik olarak dosyanın içinde taşımaz. Tarayıcı, düzenleyici, kesici yazılımı veya alıcının bilgisayarı belirtilen yazı tipini kullanamıyorsa bir yedek seçer. Farklı glif genişlikleri de satır sonlarını, hizalamayı ve yakındaki çizimlerin konumunu değiştirir.

İki güvenilir teslim stratejisi vardır. Hedef uygulama seçilebilir, aranabilir veya düzenlenebilir sözcükler gerektiriyorsa ve yazı tipini doğru biçimde sağlayabiliyorsanız düzenlenebilir metni koruyun. Görünümün sabit kalması gerekiyorsa ve ifadelerin artık düzenlenmesine ihtiyaç yoksa metni vektör dış hatlara dönüştürün. Her iki durumda da ayrı bir düzenlenebilir ana dosya saklayın.

Otomatik PNG dışa aktarımı için yazı tipi dosyalarını resvg'de açıkça yükleyin ve teslim etmeden önce işlenmiş harfleri kaynağınızla karşılaştırın.

Belgelerdeki şekiller için LaTeX'te SVG illüstrasyonlarını ve dizgisi yapılan etiketleri karşılaştırın. Çizim geometrisini etiket metninden ayırmak, SVG ana dosyasını korurken metnin belge tarafından dizilmesini sağlar.

Önce SVG'nin hâlâ metin içerip içermediğini belirleyin

Dosya uzantısı tek başına bunu cevaplamaz. SVG, harfleri en az iki yaygın biçimde temsil edebilir:

<text font-family="Example Sans" font-weight="600">Sample</text>

Bu düzenlenebilir metindir. SVG, karakterleri ve biçimlendirme talimatlarını saklar. Bir işleyici, bu karakterleri görünür gliflere dönüştürmek için eşleşen bir yazı tipi bulmalıdır.

Dış hatlara dönüştürülmüş metin daha çok şöyle görünür:

<path d="M ... Z" />

Burada her harf vektör geometrisine dönüştürülmüştür. Alıcının yazı tipine ihtiyacı yoktur, ancak sözcük artık sıradan, düzenlenebilir bir metin dizisi değildir.

İşaretlemenin tamamını anlamadan da kontrol edebilirsiniz:

1. SVG'nin bir kopyasını oluşturun;
2. kopyayı düz metin düzenleyicisinde açın;
3. <text ve <tspan arayın;
4. yazı tipinin görünen adını arayın;
5. bunlar yoksa harflerin <path> öğelerinden oluşturulup oluşturulmadığını inceleyin.

Bir vektör düzenleyicisinde metin aracını kullanarak bir harfe tıklayın. Yanıp sönen metin imleci düzenlenebilir metin olduğunu gösterir. Her glifin etrafındaki düğümler ise dış hatları gösterir.

Üç tipografi durumu

Neden 1: Hedeflenen yazı tipi yüklü değil

SVG font-family özniteliği, öncelik sırasına konmuş aile adlarının listesidir. MDN'nin SVG font-family referansının açıkladığı gibi işleyici bu listeden seçim yapar. İlk aileyi eşleştiremezse sonrakine ve sonunda sans-serif veya serif gibi genel bir aileye geçer.

Bu genellikle şu durumlarda olur:

• tasarımcı, alıcının sahip olmadığı yerel bir yazı tipi kullanmıştır;
• yazı tipi bir abonelik hizmeti üzerinden yalnızca bir makinede etkinleştirilmiştir;
• SVG, masaüstü düzenleyicisinden telefona, tablete, kesici uygulamasına veya ofis paketine taşınmıştır;
• yazı tipinin içindeki aile adı, dosya adından veya indirme klasöründe görünen addan farklıdır;
• yalnızca tek stil yüklüyken SVG başka bir kalınlık veya italik biçim ister.

“Benzer bir şey” yüklemek düzeni geri getirmez. İki tırnaksız yazı tipinin harf genişlikleri, üst uzantıları, karakter çifti aralıkları ve taban çizgisi ölçüleri farklı olabilir. Yerine kullanılan yazı tipi yakın görünse de ortalanmış bir sözcüğü hedef konumundan kaydırabilir. Hedeflenen yazı tipi kullanılabilir olduğunda SVG metin dikey hizalama örneği, taban çizgisi yerleşimini metin kutusuna göre ortalama ve görsel merkezlemeden ayırmanıza yardımcı olur.

Neden 2: SVG, yüklenmeyen bir web yazı tipi bekliyor

Web sayfası içinde kullanılan bir SVG, yazı tiplerini sayfanın CSS'inden alabilir. Ayrıca @font-face kuralı içeren bir stil bloğu barındırabilir; SVG 2, CSS Fonts modeli aracılığıyla indirilebilir yazı tipi desteği gerektirir. Yazı tipi URL'si yanlışsa, dosya dağıtıma eklenmemişse, erişim engelliyse, istenen biçim desteklenmiyorsa veya SVG, stillerini sağlayan sayfa yerine tek başına açılıyorsa bu düzen çalışmaz.

Tarayıcının geliştirici araçlarını kullanın ve sayfayı yeniden yükleyin. Network panelinde yazı tipi dosyalarını filtreleyip başarısız istek arayın. <text> öğesinin hesaplanmış stillerinde, belirtilen aile adına güvenmek yerine gerçekte hangi yazı tipinin kullanıldığını doğrulayın.

Yalnızca bir web sitesine gömüldüğünde çalışan SVG, mutlaka kendi kendine yeterli bir teslim dosyası değildir. Dışa aktarılan SVG'yi doğrudan gizli tarayıcı penceresinde ve başka bir cihazda test edin. Bu, oturum açılmış bir yazı tipi hizmetine, önbellekteki yazı tipine veya site stil dosyasına olan gizli bağımlılıkları ortaya çıkarır.

Bir yazı tipi kaynağı gömmek web SVG'sini daha taşınabilir kılabilir, ancak dosya boyutunu artırır, uygulamaya özgü destek sınırlarına takılabilir ve yazı tipi lisansının buna izin vermesi gerekir. Masaüstü lisansının yazı tipi verilerini yeniden dağıtma yetkisi verdiğini varsaymak yerine gerçek yazı tipi lisansını kontrol edin.

Neden 3: Aile veya kalınlık tam olarak eşleşmiyor

CSS yazı tipi eşleştirmesi, görünen aile etiketinden fazlasını kullanır. SVG şunları isteyebilir:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Mevcut dosyalar yalnızca 400 ve 700 kalınlıklarını içeriyorsa işleyici bir kalınlık sentezleyebilir veya yakın bir biçim seçebilir. Değişken yazı tipleri, içe aktaran uygulamanın farklı yorumlayabileceği eksenler ve adlandırılmış varyantlar ekler. Eski tasarım veya kesim yazılımları bazı OpenType özelliklerini, ligatürleri veya varyasyon ayarlarını yok sayabilir.

Orijinal belgeyle SVG'yi yan yana kontrol edin:

• tam aile adı;
• stil ve sayısal kalınlık;
• harf aralığı;
• büyük/küçük harf kullanımı ve gerçek karakterler;
• ligatürler gibi OpenType özellikleri;
• değişken yazı tipi eksen değerleri;
• yol üzerindeki metin veya dikey metin davranışı.

Aile uyuşmazlığını her sözcüğü elle ölçekleyerek düzeltmeyin. Bu, yanlış glifleri korurken belirtiyi gizler.

Neden 4: Dışa aktarma metni korudu ama içe aktaran uygulama farklı işliyor

SVG metin düzeni, bir masaüstü yayıncılık belgesiyle aynı değildir. Dışa aktarıcı iç içe <tspan> öğeleri, tekil koordinatlar, text-anchor veya <textPath> kullanabilir. İçe aktaran uygulama bu özellikleri düzleştirebilir, yeniden gruplayabilir veya yeniden yorumlayabilir. Bir rozet oluşturuyorsanız düzenlenebilir SVG yol üzeri metin rehberi, her parçayı test edebilmeniz için amblemi, kılavuz eğriyi ve düzenlenebilir harfleri ayırır.

Belgeye yerleştirme için Typst'te SVG şekilleri ve satır içi çizimler iş akışını izleyin. Açıklamaları belgenin yerel metni olarak tutmak, illüstrasyondaki harfleri şekil numaralandırmasından ve paragraf tipografisinden ayrı kontrol etmenizi sağlar.

Adobe'nin güncel SVG dışa aktarma belgeleri, yol üzerindeki metin çıktısının her SVG görüntüleyicisinde görsel olarak aynı kalmayabileceğini belirtir. Ayrıca metni düzenlenebilir bırakan çıktıyı, görünümü korumak için yazıyı vektör yollara dönüştüren Convert To Outlines seçeneğinden ayırır.

Doğru yazı tipi mevcut olduğu hâlde konum değişiyorsa yazı tiplerini değiştirmek yerine yapıyı inceleyin:

1. tarayıcıda işlenen görüntüyü kaynak düzenleyiciyle karşılaştırın;
2. her karakterin kendi x konumu olup olmadığını kontrol edin;
3. metin grubundaki iç içe dönüşümleri inceleyin;
4. içe aktarıcının text-anchor, karakter çifti aralığı veya taban çizgisi ayarlarını kaldırıp kaldırmadığına bakın;
5. yol üzerindeki metin davranışını ayırmak için düz yatay metinli bir kopyayı test edin.

Görünümü düzenlenebilirliğinden daha önemli olan logo, rozet veya tek satırlık başlıkta dış hatlar genellikle daha güvenli teslim biçimidir.

Neden 5: Metni dış hatlara dönüştürdünüz ve düzenlenebilir kalmasını beklediniz

Dış hatlara dönüştürülmüş metin artık yazı tipine başvurmadığı için yazı tipi değişimine uğrayamaz. Yine de içe aktarmada sizi şaşırtabilir:

• harfler tek bir düzenlenebilir sözcük yerine bileşik yollar olarak gelebilir;
• bileşik yol serbest bırakılırsa harflerin içindeki boşluklar dolabilir;
• birçok glif birlikte gruplanmış olabilir;
• sınırlı bir hedef uygulama yolları birleştirebilir veya sadeleştirebilir;
• dosya düzenlenebilir metin sürümünden daha büyük olabilir.

Bunlar yazı tipi değişiklikleri değil, geometri ve düzenlenebilirlik değişiklikleridir. Şekillerin kendisi kaynakla eşleşiyorsa dış hat olarak dışa aktarma görevini yapmıştır.

Her zaman iki dosya saklayın:

• Düzenlenebilir ana dosya: düzenlenebilir metin, orijinal yazı tipi bilgileri, adlandırılmış katmanlar ve kaynak uygulamanın biçimi.
• Teslim kopyası: görünümün kritik olduğu teslimler için dış hatlara dönüştürülmüş SVG, EPS veya PDF.

Tek ana dosyanızı asla dış hatlara dönüştürmeyin. Metin yollara dönüştüğünde bir yazım değişikliği, çeviri veya yeni slogan, yavaş bir elle yeniden çizim işine dönüşür.

Hangi çözümü kullanmalısınız?

Ödünleşimi hedef ortam belirler. Düzenlenebilir metin anlamı ve düzenlenebilirliği korur. Dış hatlar görünümü korur. Tek bir dosya, ek bağımlılıklar veya kaynak verileri taşımadan ikisini de en üst düzeye çıkaramaz.

Güvenli bir dış hat iş akışı

Görünümün kritik olduğu teslimlerde:

1. kaynak belgeyi düzenlenebilir metinle kaydedin;
2. çoğaltın ve dosya adına -outlined veya -delivery ekleyin;
3. metni seçin ve Create Outlines, Convert to Curves, Object to Path veya eşdeğer komutu kullanın;
4. harflerdeki delikleri ve örtüşen şekilleri inceleyin;
5. SVG olarak dışa aktarın;
6. SVG'yi tarayıcıda ve ikinci bir düzenleyicide açın;
7. normal boyutta ve yüksek yakınlaştırmada kaynakla karşılaştırın;
8. düzenlenebilir metin içeren ana dosyayı ve yazı tipi lisans bilgilerini arşivlerken dış hatlara dönüştürülmüş dosyayı gönderin.

Yalnızca eksik yazı tipinden kaçınmak için metni rasterleştirmeyin. SVG içindeki PNG değişimi önler, ancak ölçeklenebilir yol geometrisini kaybettirir. Dış hatlara dönüştürme gerçek vektörleri korur.

Logonun geriye kalan tek hâli raster görüntüyse

Bazen ne düzenlenebilir metin ne de dış hatlara dönüştürülmüş ana dosya kalır. Elinizde yalnızca logonun küçük bir PNG'si, JPG'si veya ekran görüntüsü olabilir. Logo vektörleştirme karar rehberi, o raster görüntünün ne zaman vektörleştirileceğini ve ne zaman yeniden çizileceğini açıklar. Yazı tipi yüklemek rasterı düzeltemez ve benzer bir yazı tipini belirlemek özel harf değişikliklerini yeniden üretmeyebilir.

PerfectVector burada koşullu olarak yardımcı olabilir: logo vektörleştirme, rasterda görünen harfleri vektör şekiller olarak yeniden oluşturabilir. Sonuç, geri kazanılmış düzenlenebilir metin değil, dış hatlara dönüştürülmüş çizimdir. Orijinal yazı tipini belirlemez, karakter çifti aralığı ayarlarını geri getirmez veya ifadeleri yeniden yazılabilir hâle getirmez. Görünür logo geometrisini geri kazanmak için kullanın, ardından bu yeniden oluşturmayı yeni dizilmiş ana dosyadan ayrı tutun.

Daha kapsamlı bir teslim stratejisi için logo dosya biçimleri rehberi, hangi ana dosya ve teslim biçimlerinin saklanacağını açıklar.

Sık sorulan sorular

SVG'm başka bir bilgisayarda neden farklı bir yazı tipi kullanıyor? SVG muhtemelen diğer bilgisayarda bulunmayan bir yazı tipinin adını belirten düzenlenebilir metin içeriyordur. İşleyici yedek listesinden başka bir aile seçerek glif şekillerini, genişliği, aralıkları ve bazen hizalamayı değiştirir.

SVG yazı tipini otomatik olarak gömer mi? Hayır. SVG bir yazı tipinin adını belirtebilir, sayfa CSS'inden yazı tipi alabilir veya yazı tipi kaynağı içerebilir; ancak sıradan düzenlenebilir metin masaüstü yazı tipi dosyasını otomatik olarak paketlemez. Kullanılabilirlik, tarayıcı desteği ve yazı tipi lisansı yine de ele alınmalıdır.

SVG metnini dış hatlara dönüştürmeli miyim? Görünümün sabit kalması gerekiyorsa, özellikle logolar, dekoratif yazılar, baskı ve kendin yap projelerinde kullanılan yazılımlar için teslim kopyasını dış hatlara dönüştürün. İfadeler, erişilebilirlik, aranabilirlik veya yerelleştirme önemliyse düzenlenebilir ana dosyada düzenlenebilir metni koruyun.

Dış hatlara dönüştürülmüş metin içe aktardıktan sonra neden düzenlenemez oldu? Dış hatlara dönüştürme, karakterleri vektör yollarla değiştirir. Alıcı düğümleri ve şekilleri düzenleyebilir, ancak metin imleci yerleştiremez veya yazı tipini değiştiremez. Bu beklenen bir durumdur; dolayısıyla ileride metin değişiklikleri gerekiyorsa düzenlenebilir metinli ana dosyayı koruyun ve paylaşın.

PerfectVector raster logodan orijinal yazı tipini geri getirebilir mi? Hayır. PerfectVector, rasterda görünen harfleri vektör dış hatlar olarak yeniden oluşturabilir, ancak orijinal yazı tipini belirlemez veya düzenlenebilir karakterleri, karakter çifti aralığını ve yazı tipi ayarlarını geri getirmez. Amaç logonun görünür geometrisini geri kazanmak olduğunda kullanın.

Kaynaklar

1. W3C — SVG Text — düzenlenebilir <text> ve <tspan> içeriği, yazı tipi özellikleri, düzen ve indirilebilir yazı tipi desteği.
2. W3C — CSS Fonts Module Level 3 — yazı tipi ailesi eşleştirmesi, yazı tipi stili seçimi, eksik aileler ve sistem yedekleri.
3. MDN — SVG font-family — SVG'de öncelikli aile listeleri ve genel yedekler.
4. Adobe Illustrator — Create outline text — metni yollara dönüştürme ve bunun sonucunda metin düzenlenebilirliğinin kaybı.
5. Adobe Illustrator — Save artwork — SVG metin dışa aktarımı, dış hatlar ve yol üzerindeki metne ilişkin uyumluluk uyarıları.

Eksik ana dosya nedeniyle elinizde yalnızca raster logo kaldığında görünen harfleri PerfectVector ile vektör dış hatlar olarak yeniden oluşturun, ardından şekilleri ikinci bir düzenleyicide doğrulayın. Düzenlenebilir metin hâlâ mevcutsa yeniden vektörleştirmek yerine yazı tipi bağımlılığını düzeltin veya teslim kopyasını dış hatlara dönüştürün.