Bisakah saya mengonversi teks SVG ke jalur tetapi menggunakan kembali mesin terbang?

14

Saya memiliki SVG dengan banyak teks di atasnya. Ini peta tempat parkir dengan nomor ruang tertulis di atasnya. Saya menampilkan ini di browser web dan berkat bug kecil yang luar biasa di Firefox , browser membuat teks salah. Boo.

Jadi saya mengubah teks menjadi path. Kita bicara tentang 4000 label terpisah. Mungkin 15.000 bentuk baru sekarang mereka vektor. Ini 4MB. Biasanya Anda mungkin berpendapat ini akan memberikan kompresi, tetapi saya harus memasukkan SVG ini ke dalam HTML . Saya menambahkan perubahan CSS secara dinamis dan ini adalah satu-satunya cara saya mendapat dukungan lintas-browser. Jadi, output mentah — bahkan yang sudah digosok — ini terlalu besar untuk berguna.

Apa yang mengejutkan saya di sini adalah semua nomor ruang ini berbagi mesin terbang yang umum. Nol hingga sembilan. Mengapa saya menyertakan definisi bentuk untuk setiap instance dari setiap angka? Bisakah saya menghapus duplikat ini?

Saya menggunakan Inkscape tapi saya terbuka untuk saran.

inkscape svg Oli
sumber
Apakah Anda bisa membagikan file SVG sehingga kami dapat bereksperimen dengannya?
JohnB
1
Apa sebenarnya bug (tangkapan layar), dan bagaimana Anda mengekspor dan memuatnya ke browser? Ada kemungkinan Anda dapat memperbaikinya hanya dengan beberapa styling CSS, atau skrip kecil ke halaman untuk memperbaiki / mengganti elemen teks. Jika ini adalah tampilan peta yang dinamis, Anda mungkin ingin mengubahnya menjadi peta yang sebenarnya - sebagian besar perpustakaan pemetaan peramban (dan banyak yang berbasis data) memiliki dukungan besar untuk pelabelan.
brichins
1
Maaf, SVG bukan milikku untuk dibagikan (ini milik klien) tetapi bug tersebut diketahui . Ini pada dasarnya berarti fonta dalam SVG tidak akan turun melewati titik ... Yang merupakan masalah serius jika Anda diperbesar sepanjang jalan pada peta dengan ribuan ruang parkir bernomor. Mereka harus (misalnya) ~ 0,08pt dan mereka sebenarnya 13pt.
Oli
1
Anda mendapatkan nomor bug yang salah, Anda sebenarnya mencari yang ini
Robert Longson
Anda mungkin ingin menguji ini pada subset, tetapi dapat path|simplifymembantu Anda sama sekali? Huruf kecil "s" dikonversi ke jalur 28 titik, sederhanakan srop menjadi 17, dan overlay versi yang disederhanakan dan tidak disederhanakan bahkan diperbesar sehingga satu "s" mengisi layar tidak ada perbedaan.
Chris H

Jawaban:

6

The <use>elemen memungkinkan Anda untuk menggunakan kembali objek didefinisikan di tempat lain dalam dokumen. Misalnya, Anda bisa mendefinisikan setiap mesin terbang sebagai <symbol>dan kemudian menggunakannya kembali beberapa kali. Berikut adalah bagus artikel tentang itu: Penataan, Pengelompokan, dan Mengacu pada SVG - The <g>, <use>, <defs>dan <symbol>Elements .

Saya tidak tahu bagaimana melakukannya secara langsung di Inkscape, meskipun - terutama untuk sekelompok teks yang sudah Anda miliki sebagai teks. Anda mungkin harus menulis skrip untuk memposting-proses SVG dan menemukan semua jalur yang dapat digunakan kembali.

Rahul
sumber
The <use>adalah apa yang saya pikirkan ketika saya bertanya ini, scripting adalah bagaimana. Tampaknya konyol bahwa tidak ada yang bisa menduplikasi markup yang hampir identik.
Oli
@Oli tidak ada bahkan untuk menyimpulkan markup identik ; Saya harus menulis sendiri (dan identik maksud saya dengan byte; Saya hash mereka dan membandingkan hash)
Chris H
Saya sempat memikirkan makan siang, dan bagi saya rasanya seperti skrip (python) di inkscape yang akan menjadi jalannya. Script akan mulai dengan teks sebagai teks, dan menggantinya dengan referensi ke <symbol>s (atau sepertinya Anda bisa <def>mesin terbang teks-ke-path Anda
Chris H
4

Ada beberapa opsi kompresi yang tersedia yang akan menawarkan berbagai tingkat keberhasilan. Untuk mengujinya, saya membuat file karya seni yang hanya memiliki banyak teks berulang. Tidak diperluas, ukuran file adalah 13,8 KB. Diperluas, ukuran file adalah 1,42 MB .

Pilihan bagus: Gunakan SVGZ - 46.5 KB

Menyimpan karya seni yang diperluas sebagai SVGZ memberi saya file output 46,5 KB yang secara signifikan lebih kecil dari SVG standar. Perhatikan bahwa dukungan dapat bervariasi .

Opsi Lebih Baik: Kompres dengan Scour - 21.1 KB

Scour adalah alat yang akan menggosok dan mengoptimalkan file SVG Anda untuk Anda. Menggunakan perintah "kompresi maksimum" scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, karya seni yang diperluas dikurangi menjadi 21,1 KB. Tidak jauh dari ukuran file asli yang tidak diperluas!

JohnB
sumber
3
Scouring tidak kompres, itu hanya menghilangkan sampah dan sementara itu memang cukup baik bagi saya (mengingat sejumlah besar objek), "4MB" saya adalah post-scour. Konten yang dikompresi akan menjadi besar tetapi —dan saya seharusnya sudah menyebutkan ini sebelumnya — saya harus menjelaskan SVG untuk masalah penargetan browser (dan juga persyaratan manipulasi frontend). Saya tahu, saya tahu, ini menyakitkan tetapi percayalah ketika saya mengatakan itu lebih menyakitkan saya saat ini D:
Oli
Saya seharusnya mengatakan, bagian gerusan scourtidak kompres. Itu juga dapat membuang file melalui gzip untuk Anda tetapi ID dan hal-hal kecil spasi adalah pertunjukan utamanya.
Oli
@Oli benar, maka pilihan saya yang hati-hati dari kata "optimalkan" :) Itu menyedihkan bahwa file Anda sudah Digosok meskipun ... ack!
JohnB
Saya sedikit mengacaukan Illustrator; keluaran SVG-nya memang menghormati Simbol. Ini contoh singkatnya . Dibutuhkan sedikit usaha, tetapi Anda mungkin dapat membuat skrip Illustrator yang akan memecah teks Anda menjadi karakter individu dan menggantinya dengan Simbol. Rintangan terbesar yang saya lihat adalah berurusan dengan rotasi. Jika semua teks sejajar dengan sumbu X sepertinya tidak sulit, tetapi berurusan dengan teks pada sudut mungkin menjadi tantangan. Tentu saja, semua itu tidak terlalu membantu jika Anda tidak memiliki Illustrator yang tersedia
JohnB
3

Ini adalah solusi di-browser atau di server

Ada banyak cara untuk mengoptimalkan file SVG. Sepertinya Anda sudah melakukan sedikit hal yang adil.

Beberapa sumber yang saya temukan sangat berguna adalah artikel trik-css yang berfokus pada detail yang sangat spesifik. Dan secara khusus, alat itu menggunakan SVGO .

Jika Anda memiliki banyak, jalur berulang, saya akan mempertimbangkan menggunakan javascript untuk membuat bentuk secara dinamis. Ada contoh di sini . Satu arah adalah memiliki fungsi yang ditentukan untuk setiap mesin terbang, dan cukup memiliki setiap jalur dalam elemen svg yang dibuat oleh permintaan untuk fungsi itu. Atau ambil string penuh, dan / atau array argumen, untuk membuat inline svg Anda. Ini, tentu saja, mengharapkan bahwa jalur Anda lebih panjang dari panjang kode yang diperlukan untuk meminta fungsi tersebut (asumsi cukup mudah).

Luke
sumber
1
Sementara jawaban ini menyajikan beberapa solusi yang mungkin, SVGO tampaknya paling menarik. Itu juga bisa dijalankan pada file .svg untuk mengoptimalkannya. Namun tampaknya saat ini tidak melakukan deduplikasi jalur. Jika penanya akhirnya melakukan skrip kustom, melakukannya sebagai tambahan untuk SVGO mungkin ide yang bagus.
jpa
@ Jpa deduping sebelum (atau sementara) mengonversi ke jalur akan menjadi cara untuk pergi, tentu saja. Ganti semua instance dari teks char "1" dengan di <use xlink:href="#digit_one">mana digit_oneada path
Chris H
@ Chris Aku tidak bisa melihat mengapa orang tidak bisa menyimpulkan setelah itu juga. Cukup normalkan semua jalur ke asal pada titik awal, ambil hash, gunakan itu untuk menemukan jika jalur sudah terjadi. Tentu, tidak elegan, tetapi harus bekerja dan bisa lebih mudah diimplementasikan daripada harus menerapkan kembali / mencari tahu semua logika tata letak teks.
jpa
@ jpa Anda bisa, tetapi jika menormalkan asal menyebabkan kesalahan pembulatan hash tidak akan cocok. Script yang saya pikirkan akan memanggil text-to-path inkscape untuk meletakkan jalur karakter tetapi kemudian menggantinya dengan referensi ke satu set master.
Chris H
@ jpa dan kesalahan pembulatan adalah nyata. Pada contoh mainan, kurva kuadratik pertama dari nol berbeda dengan 1 di tempat desimal keenam - cukup untuk mengacaukan hashing
Chris H
2

Di sini, pada tingkat yang sangat tinggi, apa yang harus dilakukan skrip Anda. Jangan ragu untuk menggunakan bahasa dan lingkungan pilihan Anda, ini hanyalah titik awal untuk logika yang akan memberi Anda apa yang Anda cari.

  • Ulangi semua elemen teks dalam xml SVG dan untuk yang memiliki teks numerik (tempat parkir, Anda tidak menentukan jika ada lebih banyak teks di svg Anda), ubah id secara otomatis dibuat oleh Inkscape menjadi string dengan parkiran itu nomor tempat. Inkscape hanya membutuhkan ID unik, ini menghasilkan ID non-deskriptif tetapi akan menghormati dan tidak mengubah ID yang dibuat oleh perangkat lunak lain atau secara manual dibuat atau diubah oleh pengguna.
  • Dalam sebuah tabel, simpan koordinat x & y dari elemen teks di setiap tempat parkir.
  • Baik di Inkscape atau dengan skrip, konversi semua teks tempat parkir menjadi jalur.
  • Untuk digit 0-9 ditambahkan ke file SVG, <defs>bagian yang sesuai mendefinisikan informasi jalur untuk setiap digit.
  • Lingkari semua tempat <g>parkir dan ganti dengan a<use xlink:href="#digit" x=x y=y />
  • Keuntungan

Saya dapat meramalkan beberapa komplikasi yang harus Anda tangani, dan semoga berhasil dengan itu.

  • Lingkaran harus memisahkan string tempat parkir dengan 2 digit atau lebih dan jarak yang sesuai antara digit pertama dan digit berikutnya mungkin rumit; ini akan sangat bergantung pada font yang Anda gunakan.
  • Anda tidak menentukan orientasi tempat parkir atau jika mereka berada pada pengaturan melengkung. Karena manual x, y offset untuk angka 2 digit dan lebih besar, Anda mungkin perlu logika tambahan untuk mengetahui 'orientasi' tempat parkir dan bagaimana cara menentukan ruang jalur yang berbeda dari masing-masing digit dari yang pertama.

Semoga ini membantu. Semoga berhasil.

botwhytho
sumber