SVG in Responsive Design

One SVG stays sharp at any size and pixel density, replacing 1x/2x/3x PNG icon sets. To make it fluid, keep its viewBox, drop fixed width and height (or set width: 100%; height: auto), and let preserveAspectRatio fit the drawing. Inline SVG with fill="currentColor" follows the text color, including in dark mode.

An SVG loaded as an image is a separate document, so media queries inside it test the image's width, not the page's. This logo drops its wordmark when small:

One SVG logo with an internal media query, drawn 110px and 330px wideHTMLLive

<div style="display: flex; align-items: center; gap: 16px">
  <img width="110" alt="Acme"><img width="330" alt="Acme"></div>
<script>
  const logo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
    <style>text { font: bold 58px Arial, sans-serif; fill: #1565c0; }
      @media (width &lt; 200px) { text { display: none; } }</style>
    <circle cx="50" cy="50" r="38" fill="#ef6c00"/><text x="104" y="71">Acme</text></svg>`;
  for (const img of document.images) img.src = 'data:image/svg+xml,' + encodeURIComponent(logo);
</script>

Browser output of Listing 4.74 — Browser output of 74

In production the markup lives in logo.svg; the data URL only keeps the example self-contained. Optimize icons with SVGO 22,703 (github.com/svg/svgo (https://github.com/svg/svgo 22,703 ), npx svgo icon.svg), but keep its removeViewBox plugin disabled so graphics can still scale.

MENU

SVG in Responsive Design