Ultima revisión 30/10/2012

Comprender el atributo viewBox de SVG

Viewbox es un atributo que se utiliza cuando creamos formas SVG. Si piensamos en un documento como un lienzo, el viewBox (o área de visión) es la parte del lienzo que deseamos que el espectador vea. A pesar de que la página puede cubrir la pantalla completa del equipo, la figura sólo puede existir dentro de esa área de visión que hemos definido. Viewbox indicar al parser que debe hacer un zoom sobre esa zona. Esto elimina el espacio en blanco extra.

El atributo viewBox actúa como una lente que disminuye o aumenta el punto o la zona enfocada.

Sintaxis

Para recortar una imagen, se deben indicar los puntos en la imagen dónde se harán los cortes. Lo mismo pasa cuando usamos el atributo viewBox.

• x: El comienzo de coordenadas x.
• y: El principio coordenada y.
• width: Anchura del área de visión.
• height: Altura del área de visión.

viewBox="x y width height"

No hay que confundir la anchura y la altura del área de vista con la anchura y la altura definida para el documento SVG. Cuando se crea un archivo SVG, uno de los primeros valores que establezca el ancho y altura del documento o tapiz. El área de visión puede cubrir todo el tapiz o sólo una parte.

Ejemplos

Supongamos el siguiente código:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="1" y="1" width="98" height="98" fill="none" stroke="black" stroke-width="1" />
    <g stroke="red" >
        <line x1="10" y1="10" x2="90" y2="90" stroke-width="5" />
        <line x1="8" y1="8" x2="91" y2="91" stroke-width="10" stroke="rgba(255,0,0,0.5)" />
    </g>
</svg>

Si queremos que se vea todo el tapiz, en proporción 100% o aspecto 1:1, el siguiente viewBox:

<svg width="800" height="400" viewBox="0 0 100 100">

Si queremos que se vea todo el tapiz, en proporción 200% o al doble de su tamaño, el siguiente viewBox:

<svg width="800" height="400" viewBox="0 0 50 50">

Si queremos que se vea todo el tapiz, en proporción 50% o a la mitad de su tamaño, el siguiente viewBox:

<svg width="800" height="400" viewBox="0 0 200 200">