SVG viewBox and Responsive Scaling
Make SVGs scale correctly on any screen size.
width and height vs viewBox
SVG width and height set the rendered size in the DOM. The viewBox attribute defines the internal coordinate space. These are independent: a viewBox of "0 0 100 100" with width="200" height="200" scales the coordinate space 2x.
viewBox Syntax
viewBox="min-x min-y width height". Most commonly: viewBox="0 0 100 100" defines a 100x100 coordinate space starting at origin. Coordinate values in the SVG refer to this space, not pixels.
All lessons in this course
- Inline SVG vs img and object
- Basic SVG Shapes rect circle path
- SVG viewBox and Responsive Scaling
- Animating SVG with CSS and SMIL