Comprender SVG preserveAspectRatio

preserveAspectRatioes el cómplice del SVG viewBox.

Si aún no lo entiendes viewBox, entonces consulta mi otro artículo aquí que lo explica.

preserveAspectRationos da la posibilidad de indicarle a nuestro gráfico cómo escalar cuando la relación de aspecto de viewBoxy viewPortson diferentes. De manera predeterminada, preserveAspectRatiole indicará a nuestra imagen que escale para ajustarse a viewPorty para que esté centrada. Para establecer explícitamente el valor predeterminado preserveAspectRatio, hacemos lo siguiente:

svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"

¡Vamos a desglosarlo un poco para que no parezca tan aterrador!

• xMidYMid– centrar la viewBoxregión dentro de la viewPortregión
• meet– escalar nuestro gráfico hasta que coincida con la altura y el ancho de nuestroviewPort

¡Vaya! Esto sigue siendo bastante confuso, así que usemos un ejemplo para entenderlo. Usaremos el famoso Alligator.iologotipo para ayudarnos a entenderlo.

Profundizando en preserveAspectRatio

El siguiente es el marcado para nuestro SVG:

svg viewBox="0 0 137 137"   g fill="none" fill-rule="evenodd"    path d="M55.56 128.42a3.57 3.57 0 0 1-3.53-4.21c.03-.16 2.81-16.26-1.86-25.98-2.9-6.02-6.09-7.1-11.86-9.07-2.96-1-6.32-2.15-10.16-4.21-6.43-3.46-9.3-9.67-14.62-14.14C6.35 64.78-5.12 58.74 2.7 47.08c3.32-4.95 9.79-7.45 14.39-7.68a15 15 0 0 1 .73-.02c3.46 0 6.3 1.23 8.58 2.21 1.24.54 2.41 1.04 3.3 1.17.26.04.55.06.86.06.75 0 1.58-.1 2.46-.22 1.05-.14 2.22-.29 3.47-.29.88 0 1.7.07 2.5.23 1.25.23 2.54.47 3.65.47.46 0 .85-.04 1.18-.13.71-.17 1.46-.4 2.19-.64 1.35-.42 2.74-.85 4.29-1.12a11.69 11.69 0 0 1 3.67-.04c-3.42-2.46-6.18-5.5-5.1-9.09 1.29-4.32 6.91-4.82 11.04-4.82 2.1 0 4.53.15 7.23.46.52-4.97.67-13.19.67-13.27a3.6 3.6 0 0 1 2.13-3.21c.47-.21 4.91-2.08 13.6-2.08l2 .03c9.94.32 16.55 2.3 17.27 2.52.68.2 7.3 2.18 15.78 7.36 8.52 5.22 11.6 9.78 11.91 10.28.75 1.16.76 2.67.02 3.84-.5.79-4.58 7.32-6.75 11.51a53.62 53.62 0 0 1 8.14 4.94c1.42 1.09 5.74 4.4 4.49 8.61-1.06 3.55-5.04 4.52-8.7 4.76 1.75 4.74 1.65 9.3-.34 13.36l-.28.55c-1.01 2.05-1.12 2.26-.76 3.83.3 1.33.78 2.68 1.28 4.1.54 1.56 1.1 3.16 1.5 4.89l.26.95.02.08c.3 1.06.81 2.85 1.19 4.4.6 2.4 1.2 4.9-.94 6.5-.4.3-10.27 7.5-32.83 10.21-20.61 2.48-38.93 15.8-39.11 15.93-.63.46-1.36.7-2.13.7" fill="#FFFFFE"/    path d="M94.06 39.45c9.6 2.86 18.12 6.08 24.27 9a32.64 32.64 0 0 1 1.86-4.69c2.25-4.54 7.3-12.57 7.3-12.57s-2.72-4.23-10.77-9.16c-8.39-5.12-14.96-6.98-14.96-6.98s-6.51-2.06-16.34-2.37c-9.43-.3-14.03 1.74-14.03 1.74s-.17 9.48-.8 14.52c-.21 1.77-.59 3.42-.98 4.82 6.65.98 15.23 2.93 24.45 5.69" fill="#322549"/    path d="M132.97 57.14c-1.28 4.27-20.38 2.33-42.65-4.33-22.28-6.66-39.3-15.52-38.02-19.8 1.27-4.27 20.37-2.33 42.65 4.33 22.27 6.66 39.3 15.52 38.02 19.8" fill="#322549"/    path d="M121.36 54.91c-.72 2.42-14.43.45-30.6-4.4-16.19-4.83-28.72-10.7-28-13.11.71-2.41 14.42-.45 30.6 4.39s28.72 10.71 28 13.12" fill="#322549"/    path d="M64.58 37.85c-.54.23-1.06.49-1.56.8-2.73 1.72-4.12 4.6-5.8 7.22-2.09-.94-4.01-1.62-6.32-1.22-2.14.37-4.15 1.19-6.2 1.7-2.03.52-4.28.1-6.37-.3-3.2-.6-6.07.7-9.15.25-3.44-.49-7.02-3.57-11.9-3.33-4.15.22-9.23 2.57-11.6 6.1-2.28 3.4-2.18 11.1 2.82 12.21 2.2.5 3.8-.16 5.23 1.92 4.73 6.83 8.68 14.6 16.12 18.6 10.94 5.87 18.27 3.94 23.54 14.88 5.27 10.95 2.17 28.16 2.17 28.16s18.92-13.97 40.81-16.6c21.9-2.64 31.12-9.53 31.12-9.53.47-.35-1.73-7.56-1.88-8.26-.7-3.06-2.08-5.92-2.78-8.99-.7-3.04.02-4.12 1.31-6.76 2.28-4.64 1.09-9.59-1.4-13.89-2.25-3.9-5.7-7.3-9.94-8.94-7.53-2.9-10.14-3.41-10.14-3.41s-1.22-8.75-15.81-10.57c-5.42-.68-10.78-1.8-16.27-1.3-2 .18-4.11.48-6 1.26" fill="#322549"/    path d="M10.3 60.03s1.22 6.5 2.43 6.5c1.22 0 1.9-6.5 1.9-6.5H10.3" fill="#322549"/    path d="M17.03 49.9c-2.1.63-3.98.5-4.22-.3-.24-.8 1.26-1.96 3.35-2.59 2.1-.63 3.98-.5 4.22.3.24.8-1.26 1.96-3.35 2.59zm70.02 45.77c6.56-2.9 13.2-5.78 19.42-9.36 4.75-2.74 10.49-6.25 13.05-11.3 5.3-10.41-6.67-18.76-15.53-20.42-1.5-.28-12.81-1.72-13.23.85.41-2.54 3.22-3.68 4.56-5.64 2.12-3.07-.87-3.64-3.26-4.67-4.12-1.78-8.4-3.1-12.92-3.19-4.66-.08-8.55.45-12.05 3.88-.62.6-1.43 1.5-1.55 2.35-.35 2.51 4.67 3.29 6.1 2.4a28.4 28.4 0 0 1 10.78-3.73c2.48-.31 5.05-.44 7.46.32.65.21 1.35.46 1.91.85.06.04.48.45.52.45h-4.05s-2.43 3.82-8.1 5.44c-5.68 1.63-13.3-1.62-13.3-1.62s-5.56-2.64-10.58-1.99c-5.03.65-6.13 0-6.13 0v2.4s-2.43-1.63-5.27-2.4c-2.84-.77-6.9-2.67-11.96-1.84-5.07.84-6.09.18-10.75-1.84-4.66-2.01-9.68-1.43-12.57 3.68-2.89 5.12.81 8.4.81 8.4l4.22.11c.92-.06 1.84-.11 2.7-.1.29-1.77 1.12-5.6 3.08-6.55 2.56-1.24 1.36 3 1.63 5 .12.9.31 1.79.48 2.5 3.39 1.27 6.67 3.24 11.2 2.57 5.48-.82 11.36-4.61 16.63-1.7l.22.12c.51-1.15 1.76-3.67 3.03-4 1.66-.44.14 2.27-.13 3.7-.12.63-.2 1.26-.25 1.77.56.31 1.12.62 1.68.9.36-1.35 1.03-3.39 2.04-3.88 1.54-.74.57 2.21.59 3.66 0 .53.03 1.06.07 1.51 2.66 1.14 5.28 1.79 7.96 1.36 5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.5.2 5.88-.06 5.73-2.37.07 1.04.85 1.45.28 2.62-.43.9-1.45 1.45-2.35 1.75-2.72.94-4.85-.69-7.31-1.6-2.72-1.02-5.74-2.78-8.67-3.07-3.65-.37-8.52 2.06-13.38 1.25-4.87-.81-8.92-6.7-15.61-5.88-6.7.81-9.13 4.06-15 2.43-.91-.25-1.73-.52-2.49-.8-.05.2-.1.44-.14.72-.2 1.55.72 4.82-1.26 3.86-1.56-.76-2.2-4.6-2.4-6.2-2.23-1.01-4.22-1.83-7-1.83-.44 0-.85.02-1.25.05 1.63 2.74 5.84 9.4 10.89 14.15C32.7 80.27 39 80.46 39 80.46s-2.03-1.62-3.85-3.04c-1.83-1.42-4.46-5.92-4.46-5.92a64 64 0 0 0 10.94 7.34 501.7 501.7 0 0 0 13.59 6.9s-1.02-.2-3.45-.62c-2.43-.4-7.1-2.22-7.1-2.22s6.29 5.47 12.57 9.53c6.29 4.05 17.64 8.3 17.64 8.3s2.38-.74 12.17-5.06z" fill="#F5EA3C"/    path d="M72.96 31.3l-.12.62c6.56 1.51 13.7 3.4 21.13 5.65a324.6 324.6 0 0 1 22.61 7.71l.27-.63c-6.13-2.82-13.79-8.7-22-11.18-7.98-2.4-15.38-1.11-21.9-2.17M75.52 50.67s2.3 1.77 5.24 1.11c2.95-.64 5.25-2.82 5.25-2.82s-1.73-.32-3.92-.17c-.1.37-.21.78-.36 1.12-.35.78-1.2 1.19-1.2 1.19s-.24-.37-.41-1.34a2.78 2.78 0 0 1-.04-.7c-2.56.53-4.56 1.6-4.56 1.6M119.74 81.8s-5.31 4.91-17.9 10.61c-13.44 6.1-27.48 10.92-41.07 16.7l-.79 7.28s10.23-5.9 24.97-9.23c14.74-3.35 24.76-5.37 29.67-6.42a32.9 32.9 0 0 0 8.66-3.22l-3.54-15.72" fill="#FFFFFE"/path d="M17.03 49.9c-2.1.63-3.98.5-4.22-.3-.24-.8 1.26-1.96 3.35-2.59 2.1-.63 3.98-.5 4.22.3.24.8-1.26 1.96-3.35 2.59zm89.44 36.4c4.75-2.73 10.49-6.24 13.05-11.29 5.3-10.41-6.67-18.76-15.53-20.42-1.5-.28-12.81-1.72-13.23.85.41-2.54 3.22-3.68 4.56-5.64 2.12-3.07-.87-3.64-3.26-4.67-4.12-1.78-8.4-3.1-12.92-3.19-4.66-.08-8.55.45-12.05 3.88-.62.6-1.43 1.5-1.55 2.35-.35 2.51 4.67 3.29 6.1 2.4a28.4 28.4 0 0 1 10.78-3.73c2.48-.31 5.05-.44 7.46.32.65.21 1.35.46 1.91.85.06.04.48.45.52.45h-4.05s-2.43 3.82-8.1 5.44c-5.68 1.63-13.3-1.62-13.3-1.62s-5.56-2.64-10.58-1.99c-5.03.65-6.13 0-6.13 0v2.4s-2.43-1.63-5.27-2.4c-2.84-.77-6.9-2.67-11.96-1.84-5.07.84-6.09.18-10.75-1.84-4.66-2.01-9.68-1.43-12.57 3.68-2.89 5.12.81 8.4.81 8.4l4.22.11c.92-.06 1.84-.11 2.7-.1.29-1.77 1.12-5.6 3.08-6.55 2.56-1.24 1.36 3 1.63 5 .12.9.31 1.79.48 2.5 3.39 1.27 6.67 3.24 11.2 2.57 5.48-.82 11.36-4.61 16.63-1.7l.22.12c.51-1.15 1.76-3.67 3.03-4 1.66-.44.14 2.27-.13 3.7-.12.63-.2 1.26-.25 1.77.56.31 1.12.62 1.68.9.36-1.35 1.03-3.39 2.04-3.88 1.54-.74.57 2.21.59 3.66 0 .53.03 1.06.07 1.51 2.66 1.14 5.28 1.79 7.96 1.36 5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.22.17 2.86.12 4-.4 1.71-.79.68-1.98-.89-1.89a3.02 3.02 0 0 1 2.4-1.4c3.41-.23 4.58 4.4 5.71 6.81 1.7 3.61 1.35 7.59-.5 11.07-5.6 10.49-22.03 17.44-22.03 17.44s2.38-.75 12.17-5.07c6.56-2.9 13.2-5.78 19.42-9.36z" fill="#409144"/    path d="M65.56 65.66c5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.02.14 3.38.06 4.73-.74l.44-.82c-1.63.37-5.75 1.02-7.92-1.01-2.75-2.58-4.64-4.2-11.54-3.26-5.73.8-9.33 1.01-14.3-1.4-.05.33-.08.65-.07.9 0 .54.03 1.07.07 1.52 2.66 1.14 5.28 1.79 7.96 1.36zm-9.92-4.83c-.43-.24-.87-.5-1.33-.8l-.66-.4a6.3 6.3 0 0 0-.18.7c-.12.64-.2 1.27-.25 1.78.56.31 1.12.62 1.68.9.17-.65.42-1.46.74-2.18zm-38.3-2.14c.09-.6.25-1.44.5-2.32-3.7-.64-7.19-.61-9.1-.53.5 1.81 1.67 2.85 1.67 2.85l4.22.11c.92-.06 1.84-.11 2.7-.1zm33.01 1.83l.22.12c.23-.52.62-1.33 1.1-2.09-5.17-2.49-8.23-1.34-12.39.25-4.82 1.86-8.34 2.23-15.58-.8a22 22 0 0 0-1.62-.6c.12.81.29 1.6.45 2.25 3.38 1.27 6.66 3.24 11.2 2.57 5.47-.82 11.35-4.61 16.62-1.7zM104 54.59c-1.25-.23-9.27-1.26-12.18-.13l-.18.07-.73.56a.92.92 0 0 0-.14.35c.01-.1.04-.19.06-.28L87.12 58s17.72-2.29 22.27 8.54c4.56 10.82-7.95 21.33-17.19 26.85 4.85-2.17 9.68-4.43 14.27-7.08 4.75-2.74 10.49-6.25 13.05-11.3 5.3-10.41-6.67-18.76-15.53-20.42zM69.9 50.92l-2.5-.45c.77.3 1.7.45 2.5.45zm.58 5.63c-2.59-1.2-5.03-3.69-6.46-5.33 1.7.52 2.83 1.06 2.83 1.06s7.63 3.24 13.3 1.62a16 16 0 0 0 1.97-.7l.05-.01c.16-.07.31-.13.48-.22l.06-.03c3.86-1.83 5.56-4.48 5.56-4.48h4.04s-1.34 4.69-7.24 7.48c-5.9 2.8-10.54 2.5-14.59.61z" fill="#317F3F"/    path d="M85.43 96.38l.15-.07-.15.07M75 100.7l-.05.01.04-.01M75.14 100.65c-.02 0-.03 0-.04.02l.04-.02M75.36 100.57l-.07.02.07-.02M30 65.52c8.31.75 12.91-1.93 16.1-1.68 3.2.26 3.72 3.2 12.15 4.6 8.44 1.41 11.8-2.17 16.2.13 3.34 1.75 6.7 3.77 10.4 4.72 1.1.28 2.71.5 4.23.35 2-.19 3.86-.99 4.19-3.06.26-1.7-.93-2.5-1.35-3.77.19.89.73 1.63.28 2.55-.43.9-1.45 1.45-2.35 1.75-2.72.94-4.85-.69-7.31-1.6-2.72-1.02-5.74-2.78-8.67-3.07-3.65-.37-8.52 2.06-13.38 1.25-4.87-.81-8.92-6.7-15.61-5.88-6.7.81-9.13 4.06-15 2.43-.91-.25-1.73-.52-2.49-.8a6.51 6.51 0 0 0-.16 1.8c.9.1 1.82.2 2.77.28M23.6 61.82c-2.24-1.01-4.23-1.83-7-1.83-.45 0-.86.02-1.26.05.53.9 1.34 2.2 2.36 3.73 1.53.3 3.77.7 6.47 1.08-.3-1.14-.48-2.31-.57-3.03" fill="#E8B63D"/    path d="M33 75.01c.5 1.28.6 2.5-.79 2.58-2.93.18-14.5-13.82-14.52-13.83a61.82 61.82 0 0 0 8.54 10.43C32.7 80.27 39 80.46 39 80.46s-2.03-1.62-3.85-3.04a13.13 13.13 0 0 1-2.15-2.4M41.63 78.84l1.31.69c-6.04-3.58-11.5-7.41-11.54-7.44a65.6 65.6 0 0 0 10.23 6.75M93.45 88.1a33.72 33.72 0 0 1-11.38 2.54c-9.15.3-20.75-2.87-28.85-5.89l2 .98s-1.02-.2-3.45-.6c-2.43-.4-7.1-2.23-7.1-2.23s6.29 5.47 12.57 9.53c6.29 4.05 17.64 8.3 17.64 8.3s11.54-4.88 18.57-12.64M76.52 100.13l-.15.06.15-.06M81.73 97.98l-.45.2.45-.2M76.05 100.31l-.12.05.11-.05M80.53 98.48l-.36.16.36-.16M84.72 96.7l-.82.35.82-.36M83.11 97.39l-.59.25.59-.25M77.1 99.9l-.18.07.17-.07M78.56 99.31l-.24.1.24-.1M79.49 98.92l-.31.14.3-.14" fill="#E8B63D"/    path d="M66.83 52.6c-.07-2.58 1.23-4.7 2.92-4.76 1.7-.04 3.12 2 3.19 4.58.07 2.58-1.24 4.7-2.92 4.75-1.7.05-3.12-2-3.19-4.58zm17.56 45.22c-5.62-2.47-12.84-7.58-13.06-15.43-.2-6.76.32-19.85.48-23.37 1.88-.93 3.2-3.56 3.11-6.61-.1-3.79-2.31-6.8-4.93-6.72-2.62.07-4.66 3.2-4.55 6.98.1 3.73 2.25 6.7 4.81 6.71-.25 3.67-.84 17.21-.51 23.54.38 7.3 7.66 15.72 18.12 17.27 10.32 1.51 29.54 1.09 29.54 1.09l1.71-1.24S90 100.3 84.4 97.82z" fill="#322549"/  /g/svg

Como puedes ver, no hemos definido un preserveAspectRatiopara nuestro SVG, por lo que el valor predeterminado será preserveAspectRatio="xMidYMid meet".

La relación de escala de nuestra imagen es 1:1tal que cuando la altura y el ancho de nuestra imagen viewPortcoincidan, no tendremos que preocuparnos por nuestrapreserveAspectRatio

¿Qué pasará cuando la relación de aspecto de nuestros viewPorty viewBoxsean diferentes?

Veamos algunos ejemplos:

En el ejemplo anterior, nuestro viewPorttiene las dimensiones, 100x100por lo que nuestro preserveAspectRationo importa aquí.

Ahora nuestras dimensiones son 500x100, como puedes ver la imagen ahora está centrada y la relación de aspecto permanece igual.

Si configuráramos preserveAspectRatio="none", nuestra imagen se estiraría para ajustarse viewPortcomo una imagen rasterizada:

¡Creo que ahora puedes ver por qué preserveAspectRatioes tan útil!

Conocer vs. Slice

Hasta ahora solo hemos utilizado el meetvalor , que indica que nuestra imagen debe estar contenida dentro de viewPort, de forma similar a background-size: contain. ¿Qué sucedería si lo cambiáramos por slice?

Mmm, ¿qué ha sucedido exactamente? sliceSe comporta de manera similar a background-size:cover, nuestra imagen se escalará básicamente a las dimensiones de viewPorty cortará cualquier exceso. Esto puede ser bastante útil para imágenes de fondo o un fondo en un banner.

Medio/Mín/Máx

Arriba hemos utilizado xMidYMid, que es lo que utilizarás la mayoría de las veces, pero también podemos utilizar Miny Max.

Tomemos lo siguiente:

Nuestro caimán está centrado aquí debido a xMidYMid, si quisiéramos alinear nuestro caimán hacia la izquierda, simplemente haríamos xMinYMid.

A modo de pequeña prueba, pregúntate: ¿cómo alinearías el caimán hacia la derecha?

Tomemos ahora las siguientes dimensiones:

Si en este ejemplo quisiéramos alinear nuestro caimán hacia arriba lo haríamos xMidYMiny nos daría lo siguiente:

Pregúntese nuevamente: ¿cómo alinearía esto con la parte inferior?

Conclusión

Esto debería brindarte una comprensión sólida de preserveAspectRatiocómo escalar tus gráficos. ¡Gracias por leer!