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.