Fluid svg

Sometimes, you want an SVG to not keep the same aspect ratio all the time!

The original setup

A SVG with a text overlaying. It's positioned on the same position with CSS grid. The issue: The SVG will grow in height when the screen becomes bigger. In the end, the SVG will be too high. How to fix this?

My short title

A bit more info about something can be placed just here!

The solution: Add preserveAspectRatio set to none

preserveAspectRatio in combination with a max-height will ensure the SVG to stretch the full width of the container, but don't grow too high. The lines will skew a bit more, but that's not a problem for this experiment.

My short title

A bit more info about something can be placed just here!

Without preserveAspectRatio set to none

You will see that the ratio of the SVG stays present. Therefore, the SVG will not be as wide as the page.

My short title

A bit more info about something can be placed just here!