Posso convertire il testo SVG in percorso ma riutilizzare i glifi?

14

Ho un SVG con un sacco di testo su di esso. È una mappa di parcheggio con i numeri di spazio scritti su di essa. Lo visualizzo in un browser Web e grazie a un piccolo bug meraviglioso in Firefox , il browser rende il testo in modo errato. Boo.

Quindi ho convertito il testo in percorsi. Stiamo parlando di fino a 4000 etichette separate. Forse 15.000 nuove forme ora sono vettori. Sono 4 MB. Normalmente si potrebbe sostenere questo si presterebbe a compressione, ma ho dovuto in linea questo file SVG in HTML . Sto aggiungendo le modifiche CSS in modo dinamico e questo è l'unico modo in cui ho la possibilità di supporto cross-browser. Quindi, comunque, l'output grezzo - anche raschiato - di questo è troppo grande per essere utile.

Ciò che mi colpisce qui è che tutti questi numeri di spazio condividono glifi comuni. Zero attraverso nove. Perché includo una definizione di forma per ogni istanza di ogni numero? Posso de-duplicare questi?

Sto usando Inkscape ma sono aperto ai suggerimenti.

inkscape svg

— oli
fonte

Qualche possibilità che tu possa condividere il file SVG in modo che possiamo sperimentarlo?

— Giovanni B

1

Che cos'è esattamente il bug (screenshot) e come lo esporti e lo carichi su un browser? C'è una buona probabilità che tu possa risolverlo con solo un po 'di stile CSS o un piccolo script nella pagina per correggere / sostituire gli elementi di testo. Se si tratta di una visualizzazione dinamica della mappa, è possibile trasformarla in una vera mappa: la maggior parte delle librerie di mappatura del browser (e molte di quelle basate su dati) offrono un ottimo supporto per l'etichettatura.

— brichins,

1

Siamo spiacenti, l'SVG non è mio da condividere (appartiene a un client) ma il bug è noto . Significa essenzialmente che i caratteri nell'SVG non si ridimensionano oltre un punto ... Il che è un grave problema se si esegue lo zoom su una mappa con migliaia di parcheggi numerati. Dovrebbero essere (ad es.) ~ 0,08pt e in realtà sono 13pt.

— Oli,

1

Hai un numero di errore sbagliato, in realtà stai cercando questo

— Robert Longson,

Potresti voler provare questo su un sottoinsieme, ma ti può path|simplifyaiutare? Una "s" minuscola si converte in un percorso di 28 punti, semplifica il ridimensionamento a 17 e sovrapponendo le versioni semplificate e non semplificate anche ingrandite in modo che una "s" riempia lo schermo non c'è differenza.

— Chris H,

6

L' <use>elemento consente di riutilizzare gli oggetti definiti altrove nel documento. Ad esempio, è possibile definire ogni glifo come a <symbol>e quindi riutilizzarli più volte. Ecco un bell'articolo su di esso: strutturazione, raggruppamento e Referencing in SVG - The <g>, <use>, <defs>ed <symbol>elementi .

Tuttavia, non so come farlo direttamente in Inkscape, specialmente non per un mucchio di testo che hai già come testo. Potrebbe essere necessario scrivere uno script per postelaborare l'SVG e trovare tutti i percorsi che possono essere riutilizzati.

— Rahul
fonte

L' <use>era quello che stavo pensando quando ho chiesto questo, l'scripting è il come. Sembra sciocco che non ci sia nulla là fuori per de-duplicare un markup quasi identico.

— Oli,

@Oli non c'era nemmeno nulla da dedicare con markup identico ; Ho dovuto scrivere il mio (e per identico intendo il byte; li ho hash e ho confrontato gli hash)

— Chris H,

Ho pensato a pranzo, e mi sembra che una sceneggiatura (in pitone) all'interno di inkscape sarebbe la strada da percorrere. La sceneggiatura inizia con il testo come testo e lo sostituisce con riferimenti a <symbol>s (o sembra che potresti i <def>tuoi glifi text-to-path

— Chris H,

4

Sono disponibili alcune opzioni di compressione che offriranno vari gradi di successo. Per provarli, ho creato un file di grafica che aveva solo un sacco di testo ripetuto. Non espanso, la dimensione del file è 13,8 KB. Esteso, la dimensione del file è 1,42 MB .

Buona opzione: utilizzare SVGZ - 46,5 KB

Salvare il disegno espanso come SVGZ mi ha dato un file di output di 46,5 KB che è significativamente più piccolo dello SVG standard. Prendi nota, tuttavia, che il supporto può variare .

Opzione migliore: comprimere con Scour - 21,1 KB

Scour è uno strumento che scrub e ottimizza il tuo file SVG per te. Utilizzando il comando "compressione massima" di scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, il disegno espanso è stato ridotto a 21,1 KB. Non lontano dalle dimensioni del file originale non espanso!

— JohnB
fonte

3

Lo scuring non si comprime, rimuove solo la spazzatura e mentre fa una buona dose di bene per me (dato l' enorme numero di oggetti), il mio "4 MB" è stato post-flag. Il contenuto compresso sarebbe fantastico ma - e avrei dovuto menzionarlo prima - devo incorporare lo SVG per problemi di targeting del browser (e anche requisiti di manipolazione del frontend). Lo so, lo so, è doloroso, ma fidati di me quando dico che mi fa più male al momento D:

— Oli

Avrei dovuto dire che la parte abrasiva di scournon si comprime. Può anche lanciare il file attraverso gzip per te, ma l'ID e la roba di minimizzazione degli spazi bianchi è il suo concerto principale.

— Oli,

@Oli giusto, quindi la mia attenta scelta della parola "ottimizzare" :) È un peccato che il tuo file sia già scansionato però ... ack!

— Giovanni

Ho fatto un po 'casino con Illustrator; la sua uscita SVG rispetta i simboli. Ecco un breve esempio . Ci vorrebbe un po 'di sforzo, ma potresti essere in grado di creare uno script di Illustrator che spezzerà il testo in singoli caratteri e li sostituirà con simboli. L'ostacolo più grande che vedo riguarderebbe la rotazione. Se tutto il testo è parallelo all'asse X non sembra difficile, ma gestire il testo su un angolo potrebbe essere una sfida. Ovviamente, tutto ciò non è molto utile se non hai Illustrator disponibile

— JohnB,

3

Questa è una soluzione nel browser o sul server

Esistono molti modi diversi per ottimizzare i file SVG. Sembra che tu l'abbia già fatto un bel po '.

Alcune risorse che ho trovato molto utili sono un articolo css-tricks che si concentra su dettagli molto specifici. E in particolare, lo strumento che utilizza SVGO .

Se hai molti percorsi ripetuti, prenderei in considerazione l'uso di JavaScript per creare le forme in modo dinamico. C'è un esempio qui . Una direzione sarebbe quella di avere una funzione definita per ogni glifo e semplicemente avere ciascun percorso all'interno dell'elemento svg creato da una richiesta per quella funzione. Oppure prendi una stringa completa e / o una matrice di argomenti per creare il tuo svg inline. Questo, ovviamente, prevede che i percorsi siano più lunghi della lunghezza del codice richiesto per richiedere detta funzione (ipotesi piuttosto semplice).

— Luca
fonte

1

Mentre questa risposta presenta molteplici possibili soluzioni, SVGO sembra molto interessante. Potrebbe anche essere eseguito su file .svg per ottimizzarlo. Tuttavia, non sembra attualmente eseguire la deduplicazione del percorso. Se l'interlocutore finisce comunque per creare script personalizzati, farlo come miglioramento di SVGO potrebbe essere una buona idea.

— jpa,

La deduplicazione @jpa prima (o mentre) della conversione in percorsi sarebbe sicuramente la strada da percorrere. Sostituisci tutte le istanze del carattere di testo "1" con <use xlink:href="#digit_one">where digit_oneis a path

— Chris H,

@ChrisH Non riesco a capire perché non si riesca a dedurre anche dopo. Basta normalizzare tutti i percorsi verso l'origine al punto di partenza, prendere l'hash, usarlo per trovare se il percorso si è già verificato. Certo, non altrettanto elegante, ma dovrebbe funzionare e potrebbe essere più facile da implementare che dover reimplementare / capire tutta la logica del layout del testo.

— jpa,

@jpa potresti, ma se normalizzare l'origine introducesse errori di arrotondamento, l'hash non corrisponderebbe. La sceneggiatura a cui sto pensando avrebbe chiamato il text-to-path di inkscape per tracciare i percorsi dei personaggi, ma poi sostituirli con riferimenti a una serie di maestri.

— Chris H,

@jpa e gli errori di arrotondamento sono reali. Su un esempio di giocattolo, la prima curva quadratica di uno zero differisce di 1 nel sesto decimale - abbastanza per rovinare l'hashish

— Chris H,

2

Qui a un livello molto alto è quello che dovrebbe fare la tua sceneggiatura. Sentiti libero di usare la tua lingua e il tuo ambiente preferiti, questo è solo un punto di partenza per una logica che dovrebbe darti quello che stai cercando.

Scorri tutti gli elementi di testo nell'xml di SVG e per quelli che hanno testo numerico (i punti di parcheggio, non specifichi se c'è più testo nel tuo svg), cambia l'id creato automaticamente da Inkscape in una stringa con quel parcheggio numero del posto. Inkscape necessita solo di ID univoci, genera ID non descrittivi ma rispetterà e non cambierà gli ID creati da altri software o creati o modificati manualmente dall'utente.
In una tabella memorizzare le coordinate x & y dell'elemento di testo di ciascun parcheggio.
In Inkscape o tramite script, converti tutto il testo del parcheggio in percorsi.
Per le cifre 0-9 aggiungere al file SVG una <defs>sezione appropriata che definisce le informazioni sul percorso per ogni cifra.
Passa attraverso tutte le <g>s dei parcheggi e sostituiscile con a<use xlink:href="#digit" x=x y=y />
Profitto

Posso prevedere alcune complicazioni che dovrai affrontare e buona fortuna con quelle.

Il circuito dovrà dividere la stringa di parcheggi con 2 o più cifre e la spaziatura appropriata tra la prima cifra e le cifre successive potrebbe essere complicata; questo dipenderà fortemente dai caratteri che stai usando.
Non si specifica in quale orientamento si trovano i parcheggi o se si trovano anche su allestimenti curvi. A causa degli offset manuali x, y per numeri di 2 cifre e superiori, potrebbe essere necessaria una logica aggiuntiva per capire l'orientamento di un parcheggio e come spaziare correttamente i diversi percorsi delle singole cifre dal primo.

Spero che sia di aiuto. In bocca al lupo.

— botwhytho
fonte