Ho un file SVG con viewBox = "- 155.7 -99 510 510". Credo che ciò abbia compensato i percorsi nell'anteprima di Mac OS X di -155,7 -99. quando apro SVG in Illustrator, i percorsi non sono affatto sfalsati. come posso esportare questo svg in modo tale che:
Ho provato a cambiare la posizione della tavola da disegno ma l'origine di viewbox non è mai 0,0.
Risposte:
Ho fatto una piccola ricerca su SVG e apparentemente il viewbox non è un elemento esportabile tramite Illustrator. L'elemento viewbox è compatibile solo con alcuni programmi che hanno scelto di utilizzare questo elemento o di manipolarlo. Purtroppo, Illustrator non è uno di questi.
Se hai salvato SVG da Illustrator senza "Conserva le funzionalità di modifica di Illustrator" puoi invertire il processo. Qualsiasi modifica apportata ai dati del file SVG si rifletterà quindi in Illustrator, ma riposizionando e ridimensionando sia la tavola da disegno che i livelli per creare una pseudo-viewbox.
Per ora tutto ciò che puoi fare è progettare in Illustrator e tutto il codice aggiuntivo per l'offset e il posizionamento della viewbox all'interno dei dati del file. Puoi creare uno pseudo-viewbox semplicemente cambiando la posizione della tavola da disegno Larghezza + Altezza / X + Y e quindi cambiando anche gli attributi Dimensione e Posizione degli oggetti. Ma non ci sarà mai un vero attributo viewbox a meno che non rilascino un aggiornamento a Illustrator con funzionalità viewbox modificabili.
Alcune letture sul formato SVG in Illustrator: Adobe Illustrator Salva in formato SVG
Ho riscontrato questo problema diverse volte e l'unica cosa che abbia mai funzionato per me per ripristinare in modo affidabile la view view SVG a 0, 0 esattamente quando si esporta da Illustrator è creare un nuovo documento vuoto e copiare e incollare la grafica in esso .
L'angolo in alto a sinistra di questa tavola da disegno predefinita non trattata verrà esportato come punto 0, 0 della casella di visualizzazione. Usa le guide intelligenti ( cmd-u) o la alignfinestra impostata su Align to Artboardse hai bisogno che la tua grafica inizi esattamente a 0, 0.
Puoi ridimensionare in modo sicuro la tavola da disegno dall'angolo in basso a destra, ma le cose iniziano a andare male se sposti l'angolo in alto a sinistra. Spostare l'angolo in alto a sinistra delle tavole da disegno o importare file SVG in AI sembra causare una sorta di strano disconnessione interna tra righelli, tavole da disegno e una sorta di punto di origine invisibile della viewbox segreta noto solo a Illustrator.
AFAICT, come per la maggior parte delle cose a che fare con il web o la tecnologia emergente, l'approccio di Adobe a SVG è stato quello di mettere qualcosa di rozzo insieme in modo che possano vantarsene in un comunicato stampa, quindi lasciarlo buggy, incompiuto e non amato, fingendo che non lo faccia esiste e continua come se fosse il 1998.
viewboxdurante l'esportazione in SVG. Hai completamente ragione nel creare un nuovo documento e copiarlo su tutte le opere d'arte. La tua risposta dovrebbe essere contrassegnata come +1 corretta.
Preserve Illustrator Editing Capabilitiesla prima volta che salvo nel caso in cui avessi bisogno di apportare ulteriori modifiche e poi dopo che penso che tutto sia abbastanza buono, lo salvo senza di esso (l'aumento delle dimensioni del file è piuttosto significativo, quindi vorrai fare questo)
So che è molto tardi sull'argomento, ma ho avuto lo stesso problema e ho fatto quanto segue.
Spero che questo aiuti qualcun altro.
width="<W>" height="<H>"del tuo editor di testo preferito al tag SVG (dove <W>e <H>sarebbero numeri decimali).
Ho avuto un problema molto simile nel fatto che la mia AI creato SVG non era centrata ed espansa all'intera finestra del browser, perché l'IA continua a cambiare le dimensioni della tavola da disegno e dimentica il centraggio.
L'unico modo per risolverlo è avere una fase di elaborazione manuale finale in Inkscape.
Infine, è necessario salvare nuovamente SVG, ma utilizzare il formato "SVG ottimizzato" nella finestra di dialogo Salva con nome. Verrà visualizzata una finestra di dialogo per le opzioni SVG e devi abilitare "Abilita viewboxing".
Poiché tutti i miei SVG sono icone della stessa dimensione, questa fase di elaborazione richiede solo 1 minuto poiché ho sempre le stesse dimensioni di tela e oggetto. Ma sì, è un peccato che questo passaggio sia necessario e debba essere risolto nell'intelligenza artificiale.
L'ho capito. Finalmente! C'è un modo semplice per farlo. Così:
<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>Il problema era quando esporti un'immagine da Illustrator (come molti fanno) la tavola da disegno non è inclusa nell'SVG esportato. I percorsi non hanno nulla su cui basare i loro calcoli.
Nel mio caso l'altezza massima per le mie immagini era 100pxe avevo bisogno di basare gli stili CSS per queste immagini in base alla loro larghezza e altezza. Nel CSS uso le vwunità, o semplicemente vecchie 100%se l'SVG è per riempire lo spazio del blocco. Questo si adatta bene. In questo modo non devi fare confusione sull'impostazione della larghezza e dell'altezza nei CSS per assicurarti che venga visualizzata correttamente.
Ho esaminato ciascun logo e impostato l'altezza su 100pxe lasciato calcolare automaticamente la larghezza in base alle proporzioni. Quindi inserisco la tavola da disegno sul logo per rimuovere qualsiasi spazio inutilizzato.
Ho selezionato un rettangolo e ho disattivato riempimento e tratto e mi sono assicurato che avesse le stesse dimensioni della tavola da disegno. Posiziona questo oggetto vuoto sul retro. Ora, quando esporti, il percorso avrà una base su cui lavorare i calcoli.
Per fare ciò nel codice sembra che tu possa avvolgere i percorsi in a recte impostarne la larghezza e l'altezza, quindi puoi impostare viewBoxlo stesso (mantenere le proporzioni uguali). Come mostrato nell'esempio sopra. In realtà non l'ho testato, ma testerò e aggiornerò.
Sono stato in grado di risolverlo usando Inkscape . Sembra che Illustrator abbia uno scarso supporto per i file SVG.
