Viewbox es un atributo comúnmente usado cuando se crean formas SVG. Si piensa en el documento como un lienzo, el cuadro de vista es parte del lienzo que desea que el espectador vea. A pesar de que la página puede cubrir toda la pantalla del ordenador, la cifra sólo puede existir en un tercio del total.

Viewbox le permite decirle al analizador que haga zoom en ese tercio. Elimina el espacio en blanco adicional. Piense en viewbox como un enfoque virtual para recortar una imagen. Sin él, su gráfico aparecerá un tercio de su tamaño real.

Valores de Viewbox

Para recortar una imagen, debe crear puntos en la imagen para realizar los cortes. Lo mismo ocurre cuando se utiliza el atributo view box. La configuración de valores para el Viewbox incluye:

• minx

  la coordenada x de inicio

• miny

  la coordenada y de inicio

• width

  -width of the viewbox

• height

  -height of the viewbox

La sintaxis de los valores de la caja de visualización es:

viewBox=»0 0 0 200 150″

No confunda la anchura y la altura del cuadro de vista con la anchura y la altura establecidas para el documento SVG. Cuando crea un archivo SVG, uno de los primeros valores que establece es el ancho y el alto del documento. El documento es un lienzo. La caja de vista puede cubrir todo el lienzo o sólo una parte del mismo.

Este cuadro de vista cubre toda la página.

Este cuadro de vista cubre la mitad de la página que comienza en la esquina superior derecha.

Su forma también tiene asignaciones de altura y anchura.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.

Es un documento que cubre 800 x 400 px con una caja de visualización que comienza en la esquina superior derecha y expande la mitad de la página. La forma es un rectángulo que comienza en la esquina superior derecha de la caja de visualización y se mueve 100 px a la izquierda y 50 px hacia abajo.

¿Por qué configurar un Viewbox?

SVG hace mucho más que simplemente dibujar una forma. SVG puede ser utilizado en el diseño web. Puede crear una figura sobre otra para un efecto de sombra. Puede transformar una forma para que se incline en una dirección. Para los filtros avanzados, necesitará entender y usar el atributo viewbox.