All examples By author By category About

pnavarrc

Responsive SVG Image

Responsive SVG Image

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

Whale

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>