Guardar las proporciones en SVG

facebook-svg gplus-svg twitter-svg

A veces queremos que los gráficos SVG aparezcan deformados, otras veces queremos que aparezcan más grandes o más pequeños de cómo fueron dibujados. En estos casos, además de viewBox necesitamos otro atributo: preserveAspectRatio.

El atributo preserveAspectRatio

preserveAspectRatio ="alineamiento [ meet | slice | none ] "

El atributo preserveAspectRatio toma dos valores separadas por un espacio. El primer valor: alineamiento ( the align parameter ) controla como viewBox se alinea con viewPort. El segundo valor ( [ meet | slice | none ] ) controla si hay que mantener y cómo hay que mantener las proporciones.
En el siguiente ejemplo la altura de la caja SVG height = 200, mientras que la altura de viewBox es de 300.

<svg width="400" height="200" viewBox="0 0 400 300" preserveAspectRatio="none" ></svg>

Por de otra parte preserveAspectRatio ="none" y por lo tanto no se mantienen las proporciones. Como consecuencia la regla vertical aparece redimensionada para que pueda encajar en la caja SVG.


100200300400500600700800900100200300400500600700800900

NOTA: Las reglas no pertenecen al código. Están dibujadas para mayor claridad.

Alineamiento

El primer valor del atributo preserveAspectRatio ( alineamiento ) controla como viewBox se alinea con viewPort y su valor puede ser "none", como en el ejemplo anterior, o tener este aspecto:

xMinYMin

La primera parte de este valor ( xMinYMin ) controla el alineamiento de la axis x del viewBox con la axis x del viewPort, mientras que la segunda parte de este valor ( xMinYMin ) controla el alineamiento de la axis y del viewBox con la axis y del viewPort.

Recordemos primero la sintaxis de viewBox

viewBox = "desdeX desdeY hastaX hastaY"

Ahora veamos los posibles valores de los controladores de alineamiento:

xMin alinea el valor desdeX con el borde izquierdo del viewport ( el lienzo SVG )
xMidalinea el centro del axis x del viewBox ( el contenido del lienzo SVG ) con el centro del axis x de viewport (el lienzo SVG)
xMax alinea el valor hastaX con el borde derecho del viewport ( el lienzo SVG )
YMin alinea el valor desdeY con el borde superior del viewport ( el lienzo SVG )
YMid alinea el centro del axis y del viewBox ( el contenido del lienzo SVG ) con el centro del axis y de viewport (el lienzo SVG)
YMax alinea el valor hastaY con el borde inferior del viewport ( el lienzo SVG )

100200300400500600700800900100200300400500600700800900
Redimensionar o cortar ( meet  or slice )

El significado del segundo valor del atributo de preserveAspectRatio:

meet: mantiene las proporciones y redimensiona el contenido ( viewBox ) para acomodarlo dentro de viewport.
slice: mantiene las proporciones y corta la parte del contenido ( viewBox ) que no encaja
none: no mantiene las proporciones y la imagen aparece deformada, para que el contenido ( viewBox ) pueda ocupar completamente la caja ( viewport ).

En el siguiente ejemplo la anchura del lienzo SVG, ( viewport ) es de 400, y la altura del mismo es de 200.

width="400" height="200"

Por de otra parte la anchura del contenido ( viewBox ) es de 400 y su altura es de 300.

viewBox ="0 0 400 300"

Es obvio que el contenido ( viewBox ) es más grande que el llienzo que lo contiene ( viewport )

El primer parámetro del atributo preserveAspectRatio es xMaxYMax, lo que indica al SVG que

hay que guardar las proporciones
el valor máxim del eje x  del viewBox ( 400 ) tiene que tocar el borde derecho del lienzo. ( xMaxYMax )
el valor máxim del eje y  del viewBox ( 300 ) tiene que tocar el borde inferior del lienzo. ( xMaxYMax )

meet

El segundo parámetro del atributo preserveAspectRatio es meet lo que indica al SVG que tiene que redimensionar el contenido para acomodarlo dentro de viewport.


100200300400500600700800900100200300400500600700800900

NOTA: Las reglas no pertenecen al código. Están dibujadas para claridad.

slice

Este segundo ejemplo es igual al anterior con la única diferencia que el segundo parámetro del atributo preserveAspectRatio es slice o que indica al SVG que tiene que recortar el contenido para acomodarlo dentro de viewport.
La regla horizontal es ahora invisible, ya que pertenece a la zona recortada.


100200300400500600700800900100200300400500600700800900

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

Esta aplicación le ayudará a entender mejor como funciona viewbox y preserveAspectRatio.

See the Pen preserveAspectRatio by Gabi (@enxaneta) on CodePen.