3

Introduciéndome en svg me encontré con el atributo viewbox pero no se que hace exactamente

<svg width="500" height="500" viewbox="0 0 50 100" style="background-color: blue" >
      <rect x="0" 
            y="0" 
            width="50" 
            height="50"
            fill="black" 
            class="rectangle"/>
     
      <rect x="0" 
            y="50" 
            width="50" 
            height="50"
            fill="orange"/>
    </svg>

Según lo que leo define la porción de la imagen que se va a mostrar ademas de las coordenadas a partir de donde se tomara esa porción. Pero aun no tengo claro si en el caso del código de arriba, partiendo del punto 0,0 se tomara una porción equivalente al 50% de los 500 de alto y ancho que le di al contenedor o si ese 50 y 100 equivalen al 50% y 100% de la pantalla (el viewport donde se muestra la imagen)

De acuerdo al código de arriba la salida que espero es el primer rectángulo dibujandose en 0,0 tomando un 50% del contenedor, pero no es así porque por la izquierda hay una parte vacía y hasta después se muestra el rectángulo. Si viewbox indica la porción y coordenadas que se mostraran de la imagen entonces el primer rectángulo debería verse justo al comienzo porque su coordenada esta en 0,0.

Alguien podría explicar con claridad lo que viewbox hace y de que manera.

2
  • Bienvenido a Stack Overflow en español. Te invito a leer Cómo preguntar y a realizar el recorrido de bienvenida. Mi recomendación parte de leer la documentación oficial al respecto. Aunque tu duda es genuina, la pregunta (en mi opinión) es amplia. Y de acuerdo a lo que dice el centro de ayuda, tal vez estás pidiendo que te expliquen lo que dice la documentación. Saludos Commented el 6 jul. 2020 a las 7:24
  • Creo que tienes razón, una disculpa, aunque la respuesta me ayudo antes de leer la documentación , ya que no se mucho ingles. No puedo borrar la pregunta, no me sale la opción. Saludos Commented el 10 jul. 2020 a las 2:25

2 respuestas 2

3

La sintaxis del atributo viewBox es:

viewBox = "desdeX desdeY anchura altura"

En el ejemplo de tu pregunta tienes un elemento svg cuyo contenido tiene una anchura de 50 unidades y una altura de 100 unidades (viewBox="0 0 50 100").

Sin embargo el tamaño del elemento svg ( el viewport ) es de 500px / 500px. Como puedes ver no guarda las mismas proporciones.

En SVG hay otro atributo: preserveAspectRatio. Si preserveAspectRatio="none" el contenido del elemento SVG aparece deformado para ocupar toda la superficie del elemento SVG:

<svg width="500" height="500" viewbox="0 0 50 100" style="background-color: blue" preserveAspectRatio ="none"  >
      <rect x="0" 
            y="0" 
            width="50" 
            height="50"
            fill="black" 
            class="rectangle"/>
     
      <rect x="0" 
            y="50" 
            width="50" 
            height="50"
            fill="orange"/>
    </svg>

Si el valor de preserveAspectRatio no es none la sintaxis utilizada es:

preserveAspectRatio ="alineamiento [ meet | slice | none ]"

El valor por defecto de preserveAspectRatio es xMidYMid meet donde

xMidYMid alinea el centro del axis x del viewBox ( el contenido del lienzo SVG ) con el centro del axis x del viewport (el lienzo SVG) y el centro del axis y del viewBox ( el contenido del lienzo SVG ) con el centro del axis y de viewport (el lienzo SVG)

El alineamiento tiene 2 componentes: la primera parte indica como alinear el centro del axis x y el segundo componente indica como alinear el centro del axis y.

Estos son los posibles valores de los controladores de alineamiento:

xMin alinea el valor desdeX con el borde izquierdo del viewport ( el lienzo SVG )

xMid alinea el centro del axis x del viewBox ( el contenido del lienzo SVG ) con el centro del axis x de viewport (el lienzo SVG)

xMax alinea el valor anchura con el borde derecho del viewport ( el lienzo SVG )

YMin alinea el valor desdeY con el borde superior del viewport ( el lienzo SVG )

YMid alinea el centro del axis y del viewBox ( el contenido del lienzo SVG ) con el centro del axis y de viewport (el lienzo SVG)

YMax alinea el valor altura con el borde inferior del viewport ( el lienzo SVG )

El significado del segundo valor del atributo de preserveAspectRatio:

meet: mantiene las proporciones y redimensiona el contenido ( viewBox ) para acomodarlo dentro de viewport.

slice: mantiene las proporciones y corta la parte del contenido ( viewBox ) que no encaja

none: no mantiene las proporciones y la imagen aparece deformada, para que el contenido ( viewBox ) pueda ocupar completamente la caja ( viewport ).

Este es el ejemplo de MDN:

path {
    fill: yellow;
    stroke: black;
    stroke-width: 8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

rect{fill:orange}
<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg">
  <defs>
     <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
  
  <rect x="0" y="0" width="20" height="10">
    <title>xMidYMid meet</title>
  </rect>

  <!-- (width>height) meet -->
    <rect x="0" y="0" width="20" height="10">
    <title>xMidYMid meet</title>
  </rect>
  <svg preserveAspectRatio="xMidYMid meet"  x="0"   y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
  
    <rect x="25" y="0" width="20" height="10">
    <title>xMinYMid meet</title>
    </rect>
  <svg preserveAspectRatio="xMinYMid meet"  x="25"  y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
  
    <rect x="50" y="0" width="20" height="10">
    <title>xMaxYMid meet</title>
    </rect>
  <svg preserveAspectRatio="xMaxYMid meet"  x="50"  y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>

  <!-- (width>height) slice -->
  
    <rect x="0" y="15" width="20" height="10">
    <title>xMidYMin slice</title>
    </rect>  
  <svg preserveAspectRatio="xMidYMin slice" x="0"   y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
  
    <rect x="25" y="15" width="20" height="10">
    <title>xMidYMid slice</title>
    </rect>  
  <svg preserveAspectRatio="xMidYMid slice" x="25"  y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
  
    <rect x="50" y="15" width="20" height="10">
    <title>xMidYMax slice</title>
    </rect>    
  <svg preserveAspectRatio="xMidYMax slice" x="50"  y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>

  <!-- (width<height) meet -->
  
    <rect x="75" y="0" width="10" height="25">
    <title>xMidYMin meet</title>
    </rect>  
  <svg preserveAspectRatio="xMidYMin meet"  x="75"  y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
  
    <rect x="90" y="0" width="10" height="25">
    <title>xMidYMid meet</title>
    </rect> 
  <svg preserveAspectRatio="xMidYMid meet"  x="90"  y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
  
    <rect x="105" y="0" width="10" height="25">
    <title>xMidYMax meet</title>
    </rect> 
  <svg preserveAspectRatio="xMidYMax meet"  x="105" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>

  <!-- (width<height) slice -->
  
    <rect x="120" y="0" width="10" height="25">
    <title>xMinYMid slice</title>
    </rect>   
  <svg preserveAspectRatio="xMinYMid slice" x="120" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
  
    <rect x="135" y="0" width="10" height="25">
    <title>xMidYMid slice</title>
    </rect> 
  <svg preserveAspectRatio="xMidYMid slice" x="135" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
  
    <rect x="150" y="0" width="10" height="25">
    <title>xMaxYMid slice</title>
    </rect>
  <svg preserveAspectRatio="xMaxYMid slice" x="150" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>

  <!-- none -->
  
    <rect x="0" y="30" width="160" height="60">
    <title>none</title>
    </rect>
  <svg preserveAspectRatio="none" x="0"   y="30" viewBox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg>
</svg>

En conclusión:

  1. si es posible guarda las proporciones. Para esto utiliza solo el atributo viewBox y el elemento svg tomara toda la anchura disponible (i.e. la anchura del elemento padre).

  2. si necesitas especificar el tamaño del elemento svg utiliza solo la anchura width. La altura height será calculada guardando las proporciones.

  3. Si necesitas utilizar (como en tu ejemplo) una anchura y una altura que no respecta las proporciones no olvides utilizar el atributo preserveAspectRatio para controlar el alineamiento del viewBox en el viewPort.

0

<svg width="500" height="500" viewbox="0 0 50 100" style="background-color: blue" >
  <rect x="0" 
        y="0" 
        width="50" 
        height="50"
        fill="black" 
        class="rectangle"/>
     
  <rect x="0" 
        y="50" 
        width="50" 
        height="50"
        fill="orange"/>
</svg>

2
  • ¿Qué se supone que es esto? Evita adjuntar información sensible en un sitio público, por favor mira cómo responder, saludos. Commented el 14 abr. 2023 a las 21:32
  • Hola Alejandro, gracias por tu colaboración, las respuesta que son solo código, son consideradas de baja calidad, te sugiero que edites la tuya, y expliques de que forma resuelve el problema planteado, así evitarás que sea cerrada y/o recibir votos negativos, ver como responder. Commented el 14 abr. 2023 a las 21:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.