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:
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).
si necesitas especificar el tamaño del elemento svg utiliza solo la anchura width. La altura height será calculada guardando las proporciones.
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.