Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

SVG Viewport y viewBox (para principiantes absolutos)

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (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á.

The SVG viewport is like a porthole window whose size determines what you can see through it
SVG viewport es como una ventanilla cuyo tamaño determinará lo qué puedas ver a través de ella.

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.

The SVG viewBox is very similar to the viewport but it can also pan and zoom like a telescope
El viewBox de un SVG es muy similar a viewport, pero puede además reducir y aumentar como 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.

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.
  • viewBox es 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 width y height en el elemento SVG.
  • Controla viewBox añadiendo el atributo viewBox al elemento svg. También puedes usarlo en los elementos symbol, marker, pattern y view.
  • El valor del atributo viewBox está compuesto por cuatro parámetros separados.
  • Los dos primeros parámetros de viewBox controlan 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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.