Valori SVG e viewBox


14

Sono solo curioso di sapere se qualcuno sa come vengono determinati i viewBoxvalori (cioè viewBox="a b c d").

Sto cercando di capire la funzionalità SVG di Inkscape, quindi quello che ho fatto è stato creare un documento in Inkscape che è 100pxx 100px, ha tracciato una linea dal lato sinistro del viewport (ovvero 0valore orizzontale) al lato destro (ovvero 100valore orizzontale) .

Stranamente, però, quando ho salvare questo documento come file SVG Pianura, e quindi aprire il file in un editor di testo, i viewBoxvalori sono impostati viewBox="0 0 26.458333 26.458334", invece di, diciamo, viewBox="0 0 100 100".

Qualcuno sa come 0 0 26.458333 26.458334vengono determinati questi valori ( ) e perché apparentemente non esiste alcuna relazione tra loro e le dimensioni del viewport?

PS So che puoi modificare la viewBoxproprietà manualmente nelle opzioni del documento, ma sono ancora curioso di sapere perché Inkscape li imposta su valori funky.

Risposte:


18

Inkscape utilizza mm come unità di visualizzazione predefinita o unità utente per il documento. Le unità utente vengono utilizzate per memorizzare i valori nel file SVG.

<svg width="100" height="100" viewBox="0 0 26.458333 26.458333">

Questo tag descrive una dimensione del disegno di 100px x 100px. L'attributo viewBox definisce che 100px x 100pxè equivalente a 26.458333 x 26.458333 user units.

Il fattore di scala SVG sarebbe 1px / 0.2645 user-unit, che può essere utilizzato da un renderer SVG per convertire tutti i valori memorizzati in user-unità alle reali dimensioni del disegno.


In questo caso, Inkscape vuole archiviare i valori mm, quindi deve sapere come si pxrelaziona mm. La specifica CSS descrive che le unità di lunghezza assoluta sono fisse l'una rispetto all'altra:96px = 1in

Questo significa 100px = 1.041666667in = 2.645833333cm = 26.45833333mm

Ecco da dove 26.45833333viene.


Se desideri che Inkscape memorizzi tutti i tuoi valori px, puoi modificare le unità di visualizzazione predefinite o le unità utente in pxnelle proprietà del documento (File> Proprietà del documento> Scheda: Pagina> Generale> Unità di visualizzazione)

  1. Predefinito, mm:

Proprietà del documento mm

  1. Modificato: px:

Proprietà del documento px

L'esportazione dello stesso documento comporterà il seguente tag SVG:

<svg width="100" height="100" viewBox="0 0 100 100">

Ora il fattore di scala SVG è 1px / 1 user-unit.

Se vuoi saperne di più su questo argomento, c'è una spiegazione più dettagliata nel Wiki di Inkscape

Osservazioni:

  • Inkscape v0.92 utilizza una relazione di 96px/in, Inkscape v0.91 e versioni precedenti utilizzavano un valore di90px/in

Wow. Molto interessante. Quindi c'era una rima e una ragione. Grazie mille per aver condiviso le tue conoscenze!
oldboy

Ricorderò la tecnica del whiteout che hai usato. Io di solito messo quadrati rossi intorno alle parti importanti di screenshot, il vostro è così molto più bello.
aaaaaa,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.