Responsive SVG

With a viewBox and width: 100%; height: auto, any SVG scales with its container (Front-End Web Development, SVG in Responsive Design covers responsive images in general). SVG goes further: media queries in a <style> inside a file loaded as an image measure the image's own size, so one file can drop fine detail when it is drawn small.

The BookNest mark as an image that simplifies itself below 48 pixelsHTMLLive

<script>
  const colors = ['#1f5f8b', '#5b3f99', '#e09a10', '#3f7d3a', '#b5452f', '#2a9d8f'];
  const spines = [42, 13, 56, 70, 34, 76].map((top, i) => `<path d="M120 150V${top}"
    stroke="${colors[i]}" transform="rotate(${-25 + 10 * i} 120 240)"/>`).join('');
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 0 190 190">
    <style>@media (max-width:48px) { .weave { display:none } path { stroke-width:34 } }</style>
    <g stroke-width="22">${spines}</g>
    <path d="M36 118 Q120 142 204 118 Q196 182 120 184 Q44 182 36 118 Z" fill="#263238"/>
    <path class="weave" d="M50 138 Q120 156 190 138 M62 158 Q120 172 178 158" fill="none"
      stroke="#fff3e0" stroke-width="3" stroke-linecap="round"/></svg>`;
  const url = 'data:image/svg+xml,' + encodeURIComponent(svg);
  for (const w of [96, 64, 32, 24]) document.write(`<img src="${url}" width="${w}"> `);
</script>

Browser output of 15

All four images are one file. At 32 and 24 pixels the query matches: the weave goes and the spines thicken, the favicon version. Inline SVG's media queries see the window instead; a CSS container query on a wrapper (container-type: inline-size) gives it the same per-size control.

MENU