() translation by (you can also view the original English article)
En este breve consejo vamos a explicar qué son exactamente viewport y viewBox para SVG. Aprenderás lo siguiente:
- La diferencia entre viewport y
viewBox - Los aspectos de tu SVG que puedes controlar con cada uno de ellos
- Cómo se aplica exactamente cada uno de ellos
¡Empecemos!
SVG Viewport
Si separas literalmente la palabra "viewport" te podrás hacer una idea del papel que juega en el elemento SVG; crea un "puerto" a través del cual puedes "ver" una sección de un SVG. Imagínatelo como algo semejante a una ventana a través de la cual puedes ver el mundo que está más allá.
Como ventana, el tamaño del viewport determina cuánto puedes ver, pero no define el tamaño de lo que se pueda ver al otro lado. Lo que está al otro lado podría en teoría tener cualquier tamaño.
Por ejemplo, podrías tener un gráfico con una forma que tiene 100px por 100px, pero si indicas un viewport con un tamaño de 50px por 50px sólo verás una parte del gráfico. El tamaño del viewport se establece añadiendo los atributos width y height al elemento svg, de la siguiente manera:
En el primer SVG vemos todo el círculo de 100px por 100px, pero en el segundo, al haber establecido el tamaño de viewport a 50px por 50px, sólo logramos ver un cuarto de todo el círculo.
SVG viewBox
viewBox es similar a viewport pero con dos características más: puede modificar la panorámica y puede aumentar/reducir. Si usamos la analogía de "mirar a través de un cristal", viewport sería la ventana, viewBox sería un telescopio.
Parámetros de viewBox
Podemos controlar viewBox añadiéndolo como una atributo al elemento svg, indicando un valor definido por cuatro números separados por un espacio.
1 |
viewBox = <min-x> <min-y> <width> <height> |
2 |
Los dos primeros números definen la posición de viewBox, que podemos imaginarnos como "el campo de visión". Los dos últimos números definen las dimensiones del elemento viewBox, concíbelo como el "aumento".
Nota: al igual que sucede con el elemento svg, el atributo viewBox también puede usarse en los elementos symbol, marker, pattern y view.
Aumertar
Empezaremos explicando el aumento, lo podemos conseguir a través de los dos últimos parámetros de viewBox: width y height respectivamente. De momento Mantenemos los dos primeros con valor 0 0.
Si estos dos parámetros tienen las mismas dimensiones que viewport, no habrá aumento ni disminución, es decir no cambiará nada. Echa un vistazo al SVG número 3 de ejemplo:
Pero si hacemos que estos valores sean superiores a las dimensiones del viewport conseguiremos crear el efecto de aumento, y si son inferiores, lo reduciremos.
En el SVG número 4 del ejemplo de arriba hemos establecido la anchura (width) y la altura (height) de viewBox a 100, es decir un tamaño que dobla nuestro viewport. Esto crea un aumento o "zoom out" y muestra el contenido con un tamaño duplicado, mostrando de nuevo todo el círculo.
En el quinto SVG hemos establecido el width y height de viewBox a 25, que es la mitad del tamaño de nuestro viewport. Esto crea un aumento, con lo cual sólo vemos la mitad del contenido.
Panorámica
Los dos primeros parámetros de viewBox te permiten establecer la panorámica indicando dónde debería estar la esquina superior izquierda de viewBox. El primer número controla la posición horizontal, y el segundo controla la posición vertical.
- Para abrir el campo de visión por la derecha, aumenta el primer número.
- Para ampliarlo por la izquierda, disminuye el primer número.
- Para ampliarlo por abajo, aumenta la segunda cifra.
- Para aumentar el campo de visión por arriba, disminuye el valor de la segunda cifra.
Echa un vistazo a cómo funciona esta modficación del campo de visión a través del siguiente ejemplo. Te recuerdo que el SVG número 3 tiene un viewport con valor 50 por 50, hemos añadido también viewBox, pero sin reducción ni ampliación. El ejemplo número 6 es igual, pero hemos ampliado el campo de visión por el lado derecho y por abajo.
Panorámica y zoom funcionando juntos
Puedes, por supuesto, usar ambos al mismo tiempo usando los cuatro parámetros al mismo tiempo, como en el siguiente ejemplo:
Cuando Uses viewBox, Establece Tu Viewport
Siempre que uses el atributo viewBox, recuerda indicar también sus dimensiones. Si no lo haces, se usará por defecto el valor 100% y obtendrás un gráfico aumentado de tamaño.
En Conclusión
Recopilemos todos los puntos importantes en un listado:
- El viewport es como una ventana a través de la que ves el contenido de un SVG.
-
viewBoxes similar a viewport, pero también puedes usarlo para cambiar la panorámica y para hacer "zoom". - Controla el viewport a través de los parámetros
widthyheighten el elementoSVG. - Controla viewBox añadiendo el atributo
viewBoxal elementosvg. También puedes usarlo en los elementossymbol,marker,patternyview. - El valor del atributo
viewBoxestá compuesto por cuatro parámetros separados. - Los dos primeros parámetros de
viewBoxcontrolan el campo de visión y los dos últimos controlan el zoom. - Aumenta el primer parámetro para ampliar el campo de visión por la derecha, y disminúyelo para hacerlo por la izquierda.
- Aumenta el segundo parámetro para reducir el campo de visión, disminúyelo para ampliarlo.
- Haz que las dimensiones de
viewBox, es decir, que los dos últimos parámetros, sean superiores a los del viewport para alejar (zoom out), y más pequeños para acercar (zoom in).
Espero que te ayude a clarificar los conceptos, en ocasiones confusos, relativos a viewport y viewBox del elemento SVG. ¡Disfruta con SVG!
Más fundamentos sobre SVG
-
SVGCómo Codificar a Mano un SVG -
SVGSVG en 60 segundos para Diseñadores Web -
SVGCómo Usar "animateTransform" para una Animación SVG Inline
