Valores SVG e viewBox

13

Só estou curioso se alguém sabe como os viewBoxvalores (ie viewBox="a b c d") são determinados.

Estou tentando entender a funcionalidade SVG do Inkscape, então o que eu fiz foi criar um documento no Inkscape que é 100pxx 100px, desenhar uma linha do lado esquerdo da janela de exibição (ou seja, 0valor horizontal) para o lado direito (ou seja, 100valor horizontal) .

Estranhamente, no entanto, quando eu salvo este documento como um arquivo SVG simples e, em seguida, abro o arquivo em um editor de texto, os viewBoxvalores são definidos como em viewBox="0 0 26.458333 26.458334"vez de, digamos viewBox="0 0 100 100",.

Alguém sabe como esses valores ( 0 0 26.458333 26.458334) são determinados e por que aparentemente não há relação entre eles e as dimensões da janela de visualização?

PS: Eu sei que você pode editar a viewBoxpropriedade manualmente nas opções do documento, mas ainda estou curioso para saber por que o Inkscape os define com valores descolados.

inkscape svg xml oldboy
fonte

Respostas:

17

O Inkscape usa mm como a unidade de exibição ou unidade de usuário padrão para o seu documento. As unidades de usuário são usadas para armazenar valores no arquivo SVG.

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

Essa tag descreve um tamanho de desenho de 100px x 100px. O atributo viewBox define que 100px x 100pxé equivalente a 26.458333 x 26.458333 user units.

O fator de escala SVG seria 1px / 0.2645 user-unit, que pode ser usado por um renderizador de SVG para converter todos os valores que são armazenados no usuário-unidades para as reais dimensões do desenho.

Nesse caso, o Inkscape deseja armazenar os valores mm, portanto, ele deve saber como pxse relaciona mm. A especificação CSS descreve que unidades de comprimento absoluto são fixadas uma em relação à outra:96px = 1in

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

Então é daí que 26.45833333vem.

Se você deseja que o Inkscape armazene todos os seus valores px, é possível alterar as unidades ou unidades de usuário padrão para pxas propriedades do documento (Arquivo> Propriedades do documento> Guia: Página> Geral> Unidades de exibição)

  1. Padrão, mm:

Propriedades do documento mm

  1. Alterado: px:

Px de propriedades do documento

A exportação do mesmo documento resultará na seguinte tag SVG:

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

Agora, o fator de escala SVG é 1px / 1 user-unit.

Se você quiser saber mais sobre este assunto, há uma explicação mais detalhada no Inkscape Wiki

Observações:

  • O Inkscape v0.92 usa uma relação de 96px/in, Inkscape v0.91 e anteriormente usou um valor de90px/in
FWrnr
fonte
Uau. Muito interessante. Então havia uma rima e uma razão para isso. Muito obrigado por compartilhar seu conhecimento!
Oldboy
Vou me lembrar da técnica de apagão que você usou. I normalmente colocar quadrados vermelhos em torno das partes importantes de imagens, o seu é assim muito mais agradável.
precisa