viewBox and Responsive SVG

viewBox Attribute

The viewBox defines the internal coordinate space. Omitting width/height lets SVG fill its container responsively.

Example

<!-- Fully responsive SVG -->
<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg"
     style="width:100%; max-width:400px;">
  <circle cx="50" cy="25" r="20" fill="steelblue"/>
  <text x="50" y="30" text-anchor="middle" fill="white" font-size="10">Responsive</text>
</svg>

HTML

Full Editor

Pro Tip

Set only viewBox (not width/height) for a fully responsive SVG that fills its container.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned