About Responsive SVG Images

Make an SVG image responsive by adding the viewBox attribute to it:

1
2
3
<svg viewBox="0 0 1280 720">
    ...
</svg>

Then set the width or height for the image via CSS.

Here, viewBox="0 0 1280 720" takes into account the 1280pt width and 720pt height, considering that all vector image content fits into this box. Moreover, with viewBox="-10 -10 1300 740", you would have 10pt padding around the content.

Tips and Tricks Development SVG