w3.unpo<code>todo

Viewport y viewBox

Viewport

El área del lienzo SVG que aparece en el documento se llama viewport. Establecemos el tamaño del viewport mediante los atributos width y height del elemento <svg>

<svg width="400" height="200" ></svg>

El valor que pueden tomar estos atributos puede ser sencillamente un número, como en el ejemplo anterior, y en tal caso el tamaño es interpretado en pixeles. También podemos especificar un identificador de unidades, por ejemplo em.

<svg width="25em" height="12.5em" ></svg>

Identificadores de unidades utilizadas en el SVG

em1em es equivalente al tamaño de fuente por defecto
exla altura de la letra x
pxpixeles
ptpuntos (points): 1 / 72 de pulgada.
pcpicas: 1 / 6 de pulgada.
cmcentímetros
mmmilímetros
inpulgadas

Identificadores de unidades utilizadas en el SVG. La especificación w3.org: Units

viewBox

Si el viewport controla el tamaño del lienzo SVG, el atributo viewBox controla el tamaño del contenido de este. Si el atributo viewBox no esta especificado el tamaño contenido es igual al tamaño del viewport. Pero el tamaño del lienzo <svg> ( viewport ) no coincide siempre con el tamaño del contenido ( viewBox )
La sintaxis del atributo viewBox es:

Normalmente desdeX = 0 y desdeY = 0, ya que queremos que el origen coincida con la esquina izquierda arriba del lienzo SVG. Si anchura = width y altura = height el tamaño contenido ( viewBox ) es de nuevo igual al tamaño del lienzo SVG ( viewport )

NOTA: En el siguiente ejemplo las reglas no pertenecen al código. Están dibujadas para mayor claridad.

Pero ¿que pasa si no es así? En el siguiente ejemplo:
desdeX = 0 y desdeY = 0 mientras que
anchura = 1.5 * width ( o sea 600px ) y
altura = 1.5 * height ( o sea 400px )

NOTA: Las reglas no pertenecen al código. Están dibujadas para claridad. Por favor compare con el ejemplo anterior.

En el ejemplo anterior hemos mantenido las proporciones. Pero esto no tiene que ser así.
A veces queremos que los gráficos aparezcan deformados, y en este caso además de viewBox necesitamos otro atributo: preserveAspectRatio. El atributo preserveAspectRatio controla si se mantienen o no las proporciones, y como se mantienen.