SVG foreignObject: Dışa aktarmada etiket kaybını düzeltin

SVG'nin şekilleri dışa aktarmada korunuyor ama etiketleri kayboluyorsa eksik etikette <foreignObject> olup olmadığını inceleyin. Bu öğe, tarayıcının başarıyla yerleştirdiği ancak hedef görüntü oluşturucunun desteklemediği HTML içerebilir. Etkilenen etiketi yerleşik SVG <text> ve <tspan> öğeleriyle değiştirin veya görünümünü koruyan bir dışa aktarma yolu seçin.

Önce dışa aktarılan dosyanın kendisini bir tarayıcıda açın. Etiket orada da eksikse içe aktarma aracını sorumlu tutmadan önce ad alanını, sınırlarını ve stillerini kontrol edin. Özgün çizimi koruyun: yalnızca metin kapsayıcısı çalışmadığında tüm görseli vektörleştirmek gereksizdir.

Görsel korunurken etiketi neden kaybolur?

SVG, normal şekillerle başka bir XML ad alanındaki içeriği bir arada bulundurabilir. <path> ile çizilen bir dağ ve <circle> ile çizilen bir güneş, yerleşik SVG öğeleridir. <foreignObject> içindeki bir paragraf ise kendi satır kaydırma ve yerleşim kuralları olan HTML olabilir. MDN foreignObject başvurusu, bu ayrımı açıklar.

Dolayısıyla .svg uzantısı, her bölümün aynı görüntü oluşturma özelliklerini kullandığını garanti etmez. Hedef uygulama dağı ve güneşi çizerken HTML paragrafını atlayabilir. Metin rengini değiştirmek veya dışa aktarma çözünürlüğünü artırmak, bu görüntü oluşturucuya HTML desteği eklemez.

Küçük bir test: yalnızca etiketi değiştirin

Bir yol, bir daire ve “Çizimi ve etiketleri ayrı tutun” anlamına gelen “Keep artwork and labels separate” sözlerini içeren 480 × 240 boyutunda bir SVG kartı hazırladık. İlk dosya HTML etiketi kullanır. İkincisi aynı şekilleri korur ve yalnızca etiketi yerleşik metinle ve açıkça belirlenmiş üç satırla değiştirir.

Tarayıcı önizlememizde her iki etiket de göründü. Aynı dosyaları sharp 0.34.4 ve onunla birlikte gelen librsvg 2.61.1 kullanarak PNG'ye dönüştürünce aşağıdaki sonucu elde ettik: HTML etiketi kayboldu, yerleşik etiket kaldı. HTML etiketli çıktı, etiketi kaldırılmış kontrol dosyasıyla piksel düzeyinde de birebir aynıydı. Bu, bu dosyalar ve bu görüntü oluşturucu sürümü için bir testtir; her düzenleyici hakkında bir uyumluluk hükmü değildir.

Özgün dosya, yeniden oluşturulabilecek kadar küçüktür. Bunu html-label.svg olarak kaydedin ve tarayıcıda açın:

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="240" viewBox="0 0 480 240">
  <rect width="480" height="240" rx="20" fill="#f5f1e7"/>
  <path d="M40 135Q90 15 140 135Z" fill="#087f75"/>
  <circle cx="90" cy="95" r="18" fill="#f4bc45"/>
  <foreignObject x="180" y="70" width="230" height="110">
    <div xmlns="http://www.w3.org/1999/xhtml"
      style="font: 28px/1.25 Arial, sans-serif; color: #172b34;">
      Keep artwork and labels separate
    </div>
  </foreignObject>
</svg>

İkinci dosya için foreignObject öğesinin tamamını bu etiketle değiştirin ve native-label.svg olarak kaydedin:

<text x="180" y="96" font-family="Arial, sans-serif"
  font-size="28" fill="#172b34">
  <tspan x="180" dy="0">Keep artwork</tspan>
  <tspan x="180" dy="35">and labels</tspan>
  <tspan x="180" dy="35">separate</tspan>
</text>

x değeri, her satırı aynı yatay konumda başlatır. dy değerleri, sonraki satırları aşağı taşır. Bu yaklaşım, otomatik HTML satır kaydırmasından bilinçli olarak vazgeçer: yazar satır sonlarını seçer ve alana sığdıklarını doğrular. MDN, tspan konumlandırmasını açıklar; librsvg ise desteklediği SVG öğelerini listeler, bunlara text ve tspan da dahildir.

Her iki dosyayı da görsel dönüştürücünüz veya PDF oluşturucunuz gibi gerçek teslim yolundan geçirin. Yalnızca kaynak önizlemesini değil, kaydedilen sonucu karşılaştırın. Örnekteki boyutları kullanmak, başka bir makinede yazı tiplerinin de aynı olacağını garanti etmez.

Etiket tarayıcıda da eksikse

Yalnızca onu oluşturan sayfayı değil, dosyaya yazılmış .svg içeriğini kontrol edin. HTML içindeki satır içi SVG ile bağımsız bir SVG belgesi, farklı ayrıştırma bağlamlarıdır.

Örnek, div öğesini açıkça http://www.w3.org/1999/xhtml ad alanına yerleştirir. MDN, satır içi HTML örneğinde atlanabilse bile bu ad alanı bildiriminin bağımsız SVG belgesindeki HTML içeriği için gerekli olduğunu belirtir. JavaScript ile öğe oluşturuyorsanız HTML alt öğesi için uygun ad alanını kullanın; SVG ad alanında oluşturulan bir div, HTML paragraf kapsayıcısı değildir.

Ardından etiketin şu kısımlarını inceleyin:

• foreignObject için hedeflenen etiket alanına uygun, açıkça belirtilmiş pozitif width ve height değerleri verin.
• x ve y koordinatlarını, tüm satırlara yer bırakarak görünür çizimin içinde tutun.
• Kapsayıcıda ve alt öğelerinde display, visibility, opaklık ve metin rengini kontrol edin.
• Dışa aktarılan dosyanın, çevresindeki web sayfasının stil sayfasına bağımlı olmak yerine gerekli stilleri içerdiğini doğrulayın.

Örnekte tüm etiket stilleri satır içidir ve kutu 230 birim genişliğinde, 110 birim yüksekliğindedir. Böylece dış CSS bir değişken olmaktan çıkar. Bu, foreignObject öğesini bu özelliği desteklemeyen bir görüntü oluşturucuda kullanılabilir hâle getirmez.

draw.io dışa aktarmalarında etiketleri kaynakta dönüştürün

Düzenlenebilir diyagram hâlâ elinizdeyse XML'yi elle düzenlemeden önce etiketlerin dışa aktarılmasını orada düzeltin. Güncel draw.io dışa aktarma belgeleri, desteklenen biçimlendirilmiş etiketler için Convert Labels to SVG seçeneğini sunar: şekilleri veya bağlayıcıları seçin, Text sekmesindeki Advanced bölümünü açın ve onay kutusunu etkinleştirin.

Bu seçeneğin sınırları vardır. Belgeler, tablo, liste, bağlantı veya arka plan rengi gibi yapılar içeren etiketleri bu dönüşümün dışında tutar. Seçenek kullanılamıyorsa Formatted Text ve Word Wrap özelliklerini devre dışı bırakmak, belgelenmiş başka bir yoldur; elle satır sonları eklemeniz ve yerleşimi yeniden kontrol etmeniz gerekebilir.

Yeni bir kopyayı dışa aktarın ve hedef uygulamada yeniden açın. “Text is not SVG” uyarısını gizlemek, etiketi dönüştürmez. Yazı tipi gömmek, yazı tipi bağımlılığını giderir; eksik HTML yerleşim desteğini değil.

İllüstrasyon içeren bir diyagramda, içe aktarılan çizimi etiketlerden ayrı tutun. draw.io özel SVG şekli rehberi, bu iş akışının çizim tarafını ele alır.

Metin biçimini dosyayı alacak kişiye göre seçin

Alıcının sözcükleri düzenlemesi gerektiğinde yerleşik metin yararlı bir çözümdür; ancak yine de kullanılabilir yazı tiplerine dayanır. Etiket yanlış yazı tipiyle görünüyorsa bunu aynı eksik kapsayıcı sorunu olarak ele almak yerine SVG yazı tipi kontrollerini izleyin.

Yazıları yollara dönüştürmek, yalnızca kaynak araç onları görebiliyor ve dönüştürebiliyorsa işe yarar. Zaten eksik olan bir dışa aktarmayı açıp kalan nesnelerini dönüştürmek, içe aktarılan belgede bulunmayan sözcükleri geri getiremez. PNG pikselleri korur; dolayısıyla alıcının düzenlenebilir sözcüklere veya vektör kesim yollarına ihtiyacı varsa uygun değildir.

İllüstrasyonlu kartta PerfectVector'ın yeri

Kartın illüstrasyonu yalnızca PNG veya JPG olarak mevcutsa PerfectVector'ın hazır çizimden SVG'ye dönüştürme iş akışı, bu çizim için bir vektör adayı hazırlayabilir. Sözcükleri tasarım düzenleyicinizde ayrı bir metin öğesi olarak tutun. İllüstrasyonun kenarlarını ve iç boşluklarını kontrol edin, etiketi ekleyin ve birleştirilmiş dosyayı hedef görüntü oluşturucuda test edin.

Görsel vektörleştirme rehberi, piksellerin nasıl yollara dönüştüğünü açıklar. PerfectVector, SVG içindeki HTML etiketlerini onarmaz. İllüstrasyonun yolları zaten iyiyse onları koruyun ve yalnızca çalışmayan etiketi değiştirin. Eksik etiketin ekran görüntüsünde geri getirilebilecek yazı yoktur; görünür yazıları vektörleştirmek ise düzenlenebilir sözcükler yerine şekiller oluşturur.

Düzeltilen SVG'yi göndermeden önce

1. Dışa aktarılan kopyayı bir tarayıcıda ve hedef uygulamada yeniden açın.
2. Son satırları dahil tüm etiketlerin göründüğünü doğrulayın.
3. Çizimin yerinin veya boyutunun değişmediğini kontrol edin.
4. Yazı tiplerini doğrulayın veya yollara dönüştürülen yazıları hedeflenen boyutta inceleyin.
5. Düzenlenebilir kaynağı teslim kopyasının yanında saklayın.

Sık sorulan sorular

SVG metni neden Chrome'da görünüp PNG dışa aktarmasında kayboluyor? Etiket, foreignObject içindeki HTML olabilir; PNG görüntü oluşturucusu ise SVG'nin farklı bir alt kümesini destekliyor olabilir. Eksik etiketin işaretlemesini kontrol edin ve aynı dışa aktarma yolundan yerleşik metin sürümünü geçirin.

XHTML ad alanını eklemek, her foreignObject dışa aktarmasını düzeltir mi? Hayır. Bağımsız SVG'deki HTML içeriğinin ad alanını düzeltir. Hedef uygulamanın yine de bu içeriği desteklemesi, etiketin de uygun boyutlara ve görünür stillere sahip olması gerekir.

tspan, HTML paragrafı gibi metni satırlara kaydırabilir mi? Örnekte açıkça belirlenmiş satırlar ve dikey kaydırmalar kullanılır. Bu, HTML paragraf yerleşimini yeniden oluşturmaz. Mevcut alana uygun satır sonlarını seçin ve hedefteki yazı tipiyle kontrol edin.

Etiketleri geri getirmek için tüm kartı vektörleştirmeli miyim? Mevcut yolları koruyun ve etiketi özgün metninden yeniden oluşturun. Yalnızca piksel olarak mevcut çizimleri vektörleştirin. Vektörleştirilmiş yazılar geometridir; bu nedenle düzenlenebilir sözcükleri korumaz.

Kaynaklar

1. MDN — foreignObject — Yabancı içeriği, geometri özniteliklerini ve bağımsız SVG'deki XHTML ad alanını tanımlar.
2. MDN — tspan — Yerleşik SVG metninin bölümlerini konumlandırmayı açıklar.
3. draw.io — Exported SVG text problems — Yerleşik etiket dönüşümünü, biçimlendirme sınırlarını ve alternatif dışa aktarma ayarlarını açıklar.
4. GNOME — Librsvg supported SVG and CSS features — Görüntü oluşturucunun desteklediği öğeleri ve öznitelikleri listeler.

İllüstrasyonunuz hâlâ raster görüntüyse hazır çizimi SVG olarak hazırlayın, şekillerini inceleyin ve metni ayrı ekleyin. Dosyayı teslim etmeden önce dışa aktarılan dosyada her ikisini de doğrulayın.