SVG y valores de viewBox

14

Tengo curiosidad por saber si alguien sabe cómo se determinan los viewBoxvalores (es decir viewBox="a b c d").

Estoy tratando de entender la funcionalidad SVG de Inkscape, así que lo que hice fue crear un documento en Inkscape que es 100pxx 100px, dibujó una línea desde el lado izquierdo de la ventana gráfica (es decir, el 0valor horizontal) hacia el lado derecho (es decir, el 100valor horizontal) .

Extrañamente, sin embargo, al guardar el documento como un archivo normal SVG, y luego abrir el archivo en un editor de texto, los viewBoxvalores se establecen en viewBox="0 0 26.458333 26.458334"vez de, por ejemplo, viewBox="0 0 100 100".

¿Alguien sabe cómo 0 0 26.458333 26.458334se determinan estos valores ( ) y por qué aparentemente no hay relación entre ellos y las dimensiones de la ventana gráfica?

PD: Sé que puede editar la viewBoxpropiedad manualmente en las opciones del documento, pero todavía tengo curiosidad por saber por qué Inkscape los establece en valores originales.

chico mayor
fuente

Respuestas:

18

Inkscape utiliza mm como unidad de visualización o unidad de usuario predeterminada para su documento. Las unidades de usuario se utilizan para almacenar valores en el archivo SVG.

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

Esta etiqueta describe un tamaño de dibujo de 100px x 100px. El atributo viewBox define que 100px x 100pxes equivalente a 26.458333 x 26.458333 user units.

El factor de escala SVG sería 1px / 0.2645 user-unit, que puede ser utilizado por un renderizador SVG para convertir todos los valores almacenados en unidades de usuario a las dimensiones de dibujo del mundo real .


En este caso, Inkscape quiere almacenar los valores mm, por lo que debe saber cómo se pxrelaciona mm. La especificación CSS describe que las unidades de longitud absoluta se fijan entre sí:96px = 1in

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

Entonces de ahí 26.45833333viene el.


Si quieres Inkscape para almacenar todos sus valores en px, puede cambiar el valor predeterminado de unidades de visualización o usuarios-unidades a pxen las propiedades del documento (Archivo> Propiedades de documento> Pestaña: Página> General> Unidades de visualización)

  1. Por defecto, mm:

Propiedades del documento mm

  1. Modificado: px:

Propiedades del documento px

Exportar el mismo documento dará como resultado la siguiente etiqueta SVG:

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

Ahora el factor de escala SVG es 1px / 1 user-unit.

Si quieres saber más sobre este tema, hay una explicación más detallada en el Wiki de Inkscape

Observaciones:

  • Inkscape v0.92 usa una relación de 96px/in, Inkscape v0.91 y anterior usaba un valor de90px/in
FWrnr
fuente
Guau. Muy interesante. Entonces había una rima y una razón para ello. ¡Muchas gracias por compartir tus conocimientos!
oldboy
Voy a recordar la técnica de blanqueamiento que usaste. Normalmente me pongo cuadrados rojos alrededor de las partes importantes de las capturas, el suyo es tan mucho más agradable.
aaaaaa