Viewbox attribute
The SVG viewBox attribute defines the origin and dimensions of an internal coordinate system and maps it to the viewport.
D3.js in Action, Third Edition
The viewBox attribute defines the coordinate-system origin, width, and height used to map SVG content into its viewport.
- How it is used
- Makes SVG charts responsive while preserving the intended aspect ratio inside a constrained container.
- How deep it goes
- Defines all four values and demonstrates setting the attribute in HTML and with D3, without further rendering internals.
- Examples
- Uses a 900-by-300 SVG shapes gallery and a 1200-by-1600 responsive bar-chart container.
- What you can do after
- Apply it via D3’s attr() method or SVG markup to create a responsive, proportionally scaled drawing area.
Read how D3.js in Action, Third Edition explains viewbox attribute →
Tiny CSS Projects
The SVG viewBox attribute defines the position and dimensions of an SVG graphic's internal coordinate system and maps it to the viewport.
- How it is used
- Uses the viewBox to make an SVG loading graphic scale with its responsive container.
- How deep it goes
- Explains syntax, coordinate positioning, dimension calculations, zoom behavior, and responsive resizing through a worked loader.
- Examples
- Demonstrates an animated loading screen containing eleven evenly spaced SVG rectangles.
- What you can do after
- Build a responsive SVG graphic by choosing coordinate-space dimensions and applying a viewBox attribute.
Related concepts
- responsive SVGconfigures · A responsive SVG is an SVG graphic whose rendered size adapts to its containing element while preserving its intended coordinate relationships and aspect ratio.
- SVGconfigures · SVG, or Scalable Vector Graphics, is an XML-based standard and file format for describing scalable, resolution-independent two-dimensional vector graphics.
- viewportconfigures · A viewport is the visible region through which a browser or graphical interface displays a document or content.
- responsive data visualizationconfigures · A responsive data visualization adapts its layout or presentation to different screen sizes and interaction contexts.
- loading indicatorconfigures · A loading indicator is a user-interface element that signals an ongoing operation, such as loading, initialization, or data retrieval.
- Rectangleused by · A rectangle is a planar quadrilateral with four right angles and opposite sides of equal length.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.