Valores SVG y viewBox

Solo tengo curiosidad 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 0, valor horizontal) hacia el lado derecho (es decir 100, valor horizontal) .

Sin embargo, extrañamente, cuando guardo este documento como un archivo SVG simple y luego abro el archivo en un editor de texto, los viewBoxvalores se establecen en viewBox="0 0 26.458333 26.458334"lugar de, digamos, viewBox="0 0 100 100".

¿Alguien sabe cómo se determinan estos valores ( 0 0 26.458333 26.458334) 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 funky.

gracias por esta pregunta y la forma en que lo hizo. Es exactamente lo que me preguntaba, hasta el PS en la parte inferior.
@Corey me alegro de que haya ayudado más que solo a mí

Respuestas (1)

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 del dibujo del mundo real .


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

Esto significa100px = 1.041666667in = 2.645833333cm = 26.45833333mm

Así que de ahí 26.45833333viene.


Si desea que Inkscape almacene todos sus valores en px, puede cambiar las unidades de visualización o las unidades de usuariopx predeterminadas en las propiedades del documento (Archivo > Propiedades del documento > Pestaña: Página > General > Unidades de visualización)

  1. Predeterminado, mm:

Propiedades del documento mm

  1. Cambiado: 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 Inkscape Wiki

Observaciones:

  • Inkscape v0.92 usa una relación de 96px/in, Inkscape v0.91 y versiones anteriores usaban un valor de90px/in
Guau. Muy interesante. Así que había una rima y una razón para ello. ¡Muchas gracias por compartir tus conocimientos!
Voy a recordar la técnica de blanqueamiento que usaste. Normalmente pongo cuadrados rojos alrededor de las partes importantes de las capturas de pantalla, la tuya es mucho mejor.