Responsive SVG Image

This gist shows how to include an SVG image that adapts to the size of its container.

For this technique to work, the SVG element should have the attribute viewBox set with the image dimensions, and the attribute preserveAspectRatio="xMinYMin meet", and it shouldn’t have the attributes width and height.

The container should have a width defined, as a percent or as a size in pixels.

<style>
    .img-container {
        width: 50%;
    }
</style>

The image can be wrapped in the container, preserving its aspect ratio and the container’s width.

<div class="img-container">
    <img src="whale.svg" alt="whale">
</div>