En este breve tutorial 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> |
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.
Deja una respuesta