Guardar las proporciones en 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.
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 puede 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 anchura altura"
Ahora veamos los posibles valores de los controladores de alineamiento:
xMin | alinea el valor desdeX con el borde izquierdo del viewport ( el lienzo SVG ) |
xMid | alinea 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 anchura 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 altura con el borde inferior del viewport ( el lienzo SVG ) |
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.
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.
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.