Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

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">

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.