SVG metnini yola dönüştürebilir, ancak glifleri yeniden kullanabilir miyim?


14

Üzerinde metin yükü olan bir SVG var. Üzerinde boşluk numaraları yazılı bir otopark haritası. Bunu bir web tarayıcısında görüntülüyorum ve Firefox'taki harika küçük bir hata sayesinde tarayıcı metni yanlış oluşturuyor. Boo.

Bu yüzden metni yollara dönüştürdüm. 4000'e kadar ayrı etiketten bahsediyoruz. Belki 15.000 yeni şekil şimdi onlar vektör. 4 MB. Normalde bu sıkıştırma için kendini ödünç vereceğini iddia edebilir ama ben bu SVG HTML içine satır içi gerekir . Dinamik olarak CSS değişiklikleri ekliyorum ve çapraz tarayıcı desteği alma şansımın tek yolu bu. Her neyse, bunun ham - hatta ovalanmış - çıktısı yararlı olamayacak kadar büyük.

Burada beni etkileyen şey, tüm bu boşluk sayılarının ortak glifleri paylaşması. Sıfırdan dokuza. Neden her sayının her örneği için bir şekil tanımı ekliyorum? Bunların kopyalarını çıkarabilir miyim?

Inkscape kullanıyorum ama önerilere açığım.


SVG dosyasını paylaşabilmemiz için herhangi bir şansınız var mı?
JohnB

1
Hata tam olarak nedir (ekran görüntüsü) ve onu bir tarayıcıya nasıl dışa aktarıyorsunuz ve yüklüyorsunuz? Metin öğelerini düzeltmek / değiştirmek için sadece bir CSS stiliyle veya sayfaya küçük bir komut dosyasıyla düzeltebilirsiniz. Bu dinamik bir harita görüntüsü ise, haritayı gerçek bir haritaya dönüştürmek isteyebilirsiniz - çoğu tarayıcı eşleme kitaplığı (ve birçok veri tabanlı kitaplık) etiketleme için büyük desteğe sahiptir.
brichins

1
Maalesef, SVG paylaşmak için benim değil (bir müşteriye ait), ancak hata hakkında biliniyor . Bu aslında SVG'deki yazı tiplerinin bir noktadan daha fazla ölçeklenmeyeceği anlamına gelir ... Bu, binlerce numaralı park yeri olan bir harita üzerinde tamamen uzaklaştıysanız ciddi bir sorundur . Bunlar (örn.) ~ 0.08pt olmalı ve aslında 13pt olmalıdır.
Oli

1
Yanlış böcek numarası var, aslında aradığınız bu bir
Robert Longson

Bunu bir alt kümede test etmek isteyebilirsiniz, ancak path|simplifysize yardımcı olabilir mi? Küçük harf "s", 28 puntoluk bir yola dönüşür, onu 17'ye kadar basitleştirir ve basitleştirilmiş ve sadeleştirilmemiş sürümleri üst üste bindirerek yakınlaştırılmış bile olsa, bir "s" ekranı doldurursa hiçbir fark olmaz.
Chris H

Yanıtlar:


6

<use>Öğesi belgede başka bir yerde tanımlanan nesneleri yeniden kullanmanıza olanak tanır. Örneğin, her glifi bir olarak tanımlayabilir <symbol>ve ardından birden çok kez kullanabilirsiniz. İşte bu konuda güzel bir makale: SVG Yapilandirilmasi, gruplama, ve başvuruda - <g>, <use>, <defs>ve <symbol>Elemanları .

Bunu doğrudan Inkscape'te nasıl yapacağımı bilmiyorum - özellikle zaten metin olarak sahip olduğunuz bir grup metin için değil. SVG'yi sonradan işlemek ve yeniden kullanılabilecek tüm yolları bulmak için bir komut dosyası yazmanız gerekebilir.


<use>Bunu sorulduğunda, komut dosyası nasıl düşündüğünü oldu. Neredeyse aynı işaretlemeyi kaldırmak için hiçbir şeyin olmadığı aptalca görünüyor.
Oli

@Oli aynı işaretlemeyi tekilleştirecek hiçbir şey yoktu ; Kendi yazmak zorunda kaldım (ve aynı şekilde bayt demek istiyorum; Onları karma ve karşılaştırmaları karma)
Chris H

Öğle yemeği üzerinde bir düşünce vardı ve bana inkscape içinde bir (python) komut dosyası gibi gitmek için bir yol gibi geliyor. Komut dosyası metin olarak metin olarak başlar ve <symbol>s'ye referanslarla değiştirilir (veya <def>metinden yola glifleriniz gibi görünüyor
Chris H

4

Değişen derecelerde başarı sağlayacak bazı sıkıştırma seçenekleri mevcuttur. Onları test etmek için, sadece tekrarlanan metinleri olan bir resim dosyası oluşturdum. Genişletilmemişse, dosya boyutu 13.8 KB'dir. Genişletilmiş, dosya boyutu 1.42 MB .

İyi seçenek: SVGZ kullanın - 46.5 KB

Genişletilmiş resmi SVGZ olarak kaydetmek, bana standart SVG'den önemli ölçüde daha küçük bir 46,5 KB'lik çıktı dosyası verdi. Bu desteğin değişiklik gösterebileceğini unutmayın .

Daha İyi Seçenek: Scour ile Sıkıştır - 21.1 KB

Scour , SVG dosyanızı sizin için temizleyecek ve optimize edecek bir araçtır. "Maksimum sıkıştırma" komutu kullanılarak scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, genişletilmiş resim 21,1 KB'ye düşürüldü. Orijinal genişletilmemiş dosya boyutundan çok uzakta değil!


3
Ovma sıkıştırmaz, sadece önemsiz kaldırır ve benim için ( çok sayıda nesne göz önüne alındığında) oldukça iyi bir miktar yaparken , benim "4MB" benim ovma sonrası oldu. Sıkıştırılmış içerik harika olurdu - ve bunu daha önce de belirtmeliydim - SVG'yi tarayıcı hedefleme sorunları (ve ayrıca ön uç manipülasyon gereksinimleri) için satır içi yapmak zorundayım. Biliyorum, biliyorum, acı verici ama şu anda bana daha fazla zarar verdiğini söylediğimde bana güvenin D:
Oli

Söylemeliydim ki, ovma kısmı scoursıkıştırmıyor. Aynı yapabilirsiniz ayrıca sizin için gzip ancak kimliğine ve boşluk küçültme şeyler ana konser olduğunu aracılığıyla dosyayı atmak.
Oli

@Oli doğru, bu yüzden "optimize etmek" kelimesi benim dikkatli seçim :) Bu senin dosya zaten olsa Scoured olduğunu bir bummer ... ack!
JohnB

Illustrator'da biraz dağınıktım; SVG çıktısı Sembollere saygı duyar. İşte kısa bir örnek . Biraz çaba gerektirecektir, ancak metninizi ayrı ayrı karakterlere ayıracak ve bunları Sembollerle değiştirecek bir Illustrator komut dosyası oluşturabilirsiniz. Gördüğüm en büyük engel rotasyonla uğraşmak olurdu. Tüm metin X eksenine paralelse zor görünmüyor, ancak açılı metinle uğraşmak zor olabilir. Tabii ki, Illustrator'ınız yoksa hepsi çok yararlı değil
JohnB

3

Bu bir tarayıcı içi veya sunucu çözümü

SVG dosyalarını optimize etmenin birçok farklı yolu vardır. Sanki çok daha fazlasını yapmışsınız gibi geliyor.

Çok yararlı bulduğum birkaç kaynak , çok özel ayrıntılara odaklanan bir css-tricks makalesi . Ve özellikle, SVGO kullandığı araç .

Çok sayıda yinelenen yolunuz varsa, şekilleri dinamik olarak oluşturmak için javascript kullanmayı düşünürüm. Burada bir örnek var . Bir yön, her glif için tanımlanmış bir işleve sahip olmak ve svg öğesi içindeki her yolun, o işlev için bir istek tarafından oluşturulmuş olmasıdır. Veya satır içi svg'nizi oluşturmak için tam bir dize ve / veya bağımsız değişken dizisi alın. Bu, elbette, yollarınızın söz konusu işlevi talep etmek için gereken kodun uzunluğundan daha uzun olmasını bekler (oldukça kolay varsayım).


1
Bu cevap birden fazla olası çözüm sunarken, SVGO en ilginç görünüyor. Ayrıca optimize etmek için .svg dosyasında da çalıştırılabilir. Ancak şu anda yol tekilleştirme yapmıyor gibi görünüyor. Eğer asker yine de özel kodlama yapıyorsa, bunu SVGO için bir geliştirme olarak yapmak iyi bir fikir olabilir.
jpa

@jpa, yollara dönüştürmeden önce (ya da devam ederken) tekilleştirme, kesinlikle gidilecek yol olacaktır. Metin char "1" tüm örneklerini değiştirin <use xlink:href="#digit_one">nerede digit_onebir yoldur
Chris H

@ChrisH Daha sonra neden tekilleştirilemediğini anlayamıyorum. Başlangıç ​​noktasında başlangıç ​​noktasına giden tüm yolları normalleştirin, karma alın, yolun zaten meydana gelip gelmediğini bulmak için bunu kullanın. Elbette, o kadar zarif değil, ama çalışması gerekir ve uygulanması tüm metin düzeni mantığını yeniden uygulamak / anlamak zorunda daha kolay olabilir.
jpa

@jpa olabilir, ancak başlangıç ​​noktası normalleştirilirse yuvarlama hataları getirilirse karma eşleşmez. Düşündüğüm komut dosyası, karakter yollarını yerleştirmek için inkscape'in metinden yolunu çağırır, ancak daha sonra bunları bir dizi master'a referanslarla değiştirir.
Chris H

@jpa ve yuvarlama hataları gerçek. Bir oyuncak örneğinde, sıfırın ilk kuadratik eğrisi altıncı ondalık basamakta 1 farklıdır - karmaşayı berbat etmek için yeterli
Chris H

2

Burada çok yüksek bir seviyede betiğiniz ne yapmalı Tercih ettiğiniz dili ve ortamı kullanmaktan çekinmeyin, bu size aradığınızı vermesi gereken bir mantık için sadece bir başlangıç ​​noktasıdır.

  • SVG'nin xml'sindeki tüm metin öğelerini gözden geçirin ve sayısal metne sahip olanlar için (park noktaları, svg'nizde daha fazla metin olup olmadığını belirtmezsiniz), Inkscape tarafından otomatik olarak oluşturulan kimliği o park yeri olan bir dizeye değiştirin spot sayısı. Inkscape'in yalnızca benzersiz kimliklere ihtiyacı vardır, açıklayıcı olmayan kimlikler oluşturur, ancak başka bir yazılım tarafından oluşturulan veya kullanıcı tarafından manuel olarak oluşturulan veya değiştirilen kimliklere saygı gösterir ve bunları değiştirmez.
  • Bir tabloda, her park yerinin metin öğesinin x & y koordinatlarını saklayın.
  • İster Inkscape'te ister komut dosyası kullanarak, tüm park yerinde metni yollara dönüştürün.
  • 0-9 arasındaki rakamlar için SVG dosyasına <defs>her basamak için yol bilgisini tanımlayan uygun bir bölüm ekleyin .
  • Tüm <g>park yerlerinden geçirin ve bunları bir<use xlink:href="#digit" x=x y=y />
  • kâr

Başa çıkmak zorunda kalacağınız bazı komplikasyonlar ve bunlarla iyi şanslar öngörebilirim.

  • İlmeğin park noktalarının dizisini 2 veya daha fazla basamakla ayırması gerekecektir ve ilk basamak ile sonraki basamaklar arasındaki uygun boşluk zor olabilir; bu büyük ölçüde kullandığınız yazı tiplerine bağlı olacaktır.
  • Park yerlerinin hangi yönde olduğunu veya kavisli kurulumlarda olup olmadığını belirtmezsiniz. Manuel x, y, 2 basamaklı sayılar ve daha büyük için ofsetler nedeniyle, bir park yerinin 'yönelimini' ve birinciden farklı basamakların farklı yollarını doğru bir şekilde nasıl yerleştireceğinizi anlamak için ek mantığa ihtiyacınız olabilir.

Bu yardımcı olur umarım. İyi şanslar.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.