<svg> Attributes

A standalone .svg file needs xmlns="http://www.w3.org/2000/svg 189 "; inline SVG gets the namespace from the HTML parser. Besides viewBox and preserveAspectRatio, <svg> takes width, height and the core id, class, style and lang; SVG 2 dropped version and baseProfile. Unsized inline SVG is 300 by 150 pixels; with only a viewBox, it fills its container's width and takes its height from the viewBox's aspect ratio.

How width, height, viewBox and preserveAspectRatio size an inline SVGHTMLLive

<!doctype html>
<style>
  body { margin: 0; padding: 8px; font: 13px system-ui, sans-serif; background: #fafaf7; color: #222; max-width: 600px; }
  .row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
  .box { border: 1px dashed #b5ae9e; background: #fff; }
  code { background: #eee9dc; padding: 1px 4px; border-radius: 3px; }
  p { margin: 4px 0; }
  select { font: inherit; }
</style>

<div class="row">
  <div>
    <p>1. No size, no viewBox → <code>300×150</code></p>
    <svg class="box" id="a"></svg>
  </div>
  <div>
    <p>2. Only <code>viewBox="0 0 100 120"</code></p>
    <!-- the container is 130px wide, so the SVG is 130px wide and 156px tall -->
    <div style="width:130px"><svg class="box" id="b" viewBox="0 0 100 120"></svg></div>
  </div>
</div>
<p>3. <code>width="560" height="110" viewBox="0 0 100 120"</code>
  preserveAspectRatio:
  <select id="par">
    <option>xMidYMid meet</option><option>xMinYMid meet</option><option>xMaxYMid meet</option>
    <option>xMidYMid slice</option><option>none</option>
  </select></p>
<svg class="box" id="c" width="560" height="110" viewBox="0 0 100 120"></svg>
<p id="size"></p>

<script>
  // The same book drawing, placed into all three <svg> elements
  const book = `
    <rect x="10" y="10" width="80" height="100" rx="4" fill="#3d5a80"/>
    <rect x="10" y="10" width="10" height="100" fill="#293f5c"/>
    <text x="55" y="58" font-size="12" fill="#fff" text-anchor="middle" font-family="Georgia">The Quiet</text>
    <text x="55" y="74" font-size="12" fill="#fff" text-anchor="middle" font-family="Georgia">Harbor</text>`;
  for (const id of ['a', 'b', 'c']) document.getElementById(id).innerHTML = book;

  const c = document.getElementById('c');
  document.getElementById('par').addEventListener('change', e => {
    c.setAttribute('preserveAspectRatio', e.target.value);
  });

  // Report the sizes the browser actually gave each <svg> (border included)
  const sizes = ['a', 'b', 'c'].map(id => {
    const r = document.getElementById(id).getBoundingClientRect();
    return `${id}: ${Math.round(r.width)}×${Math.round(r.height)}`;
  });
  document.getElementById('size').textContent = 'Rendered sizes → ' + sizes.join(', ');
</script>

MENU