Cross-browser SVG tips for responsive websites
You may have noticed that the use of SVG images on websites has been increasing across the web. SVG images are quickly becoming the rage, and for good reason. By design, SVGs (scaleable vector graphics) are a vector format, offering infinite scalability in size without sacrifice image quality, and they work especially well on modern, responsive websites. On top of that, SVG file sizes are often much smaller when compared to its equivalent PNG, helping to reduce page bloat and increase the speed of loading a webpage.
However, there are a few things too keep in mind when utilizing SVGs on your website. By default, SVG images do not automatically adjust with responsive websites according to the size of the viewport, and can be difficult to ensure their display correctly cross-browser.
Responsive SVG Images
To ensure a responsive SVG Image is displayed properly across all major browsers, simply add the following inline style to each of your SVG images:
<!-- Add inline style to your SVG: style="width: 100%; height: auto;" -->
<img src="/responsive.svg" alt="Responsive SVG" style="width: 100%; height: auto;">
