SVG viewBox and Responsive Scaling
Make SVGs scale correctly on any screen size.
SVG viewBox and Responsive Scaling is a free HTML Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
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.
Responsive SVG
For a responsive SVG, omit width and height attributes (or set them to 100%) and let the viewBox define proportions. Add CSS: svg { width: 100%; height: auto; }. The SVG scales to fit its container while maintaining aspect ratio.
preserveAspectRatio
preserveAspectRatio controls how the viewBox fits the SVG viewport when aspect ratios differ. Values: "xMidYMid meet" (default — letterbox), "xMidYMid slice" (crop to fill), "none" (stretch to fit without maintaining aspect ratio).
min-x and min-y for Panning
Changing min-x and min-y pans the visible portion of the SVG coordinate space. viewBox="50 50 100 100" shows the region from (50,50) to (150,150). This enables interactive panning by updating viewBox values with JavaScript.
Zooming with viewBox
Reduce viewBox dimensions to zoom in: viewBox="25 25 50 50" shows a smaller region, magnified to fill the SVG element. Increase dimensions to zoom out. Update viewBox on wheel events for interactive zoom without scaling the SVG element.
SVG in img vs inline
SVG in an img tag: scales responsively with object-fit but cannot be styled with CSS or scripted. Inline SVG: fully accessible to CSS and JavaScript, but adds HTML size. Choose based on interactivity needs.
Icon SVG Pattern
Icon SVGs use a fixed viewBox (e.g., "0 0 24 24") and no width/height, letting CSS size them: .icon { width: 1.5rem; height: 1.5rem; }. The viewBox ensures icons scale correctly at any size while maintaining crisp vector rendering.
Symbol for Icon Sprites
Define icons in <symbol viewBox="0 0 24 24"> elements inside a hidden SVG. Reference them: <use href="#icon-name">. Each use element can have its own width, height, fill, and color — one sprite file for all icons.
currentColor for Theming
SVG fill="currentColor" inherits the CSS color property from the element or its parent. Set color: red on the SVG or a parent and the icon fills red automatically. This enables single-color icons to follow text color without SVG-specific styling.
Debugging viewBox
If SVG content appears clipped or positioned unexpectedly, log or inspect the viewBox value. A common mistake: setting viewBox to pixel dimensions of the source art without adjusting for the rendered size, causing scaling issues. Verify viewBox matches the actual content bounds of the SVG art.
Knowledge Check
How do you make an SVG scale responsively to fit any container width?
Summary
The SVG viewBox defines an internal coordinate space independent of rendered pixel size, enabling responsive scaling. Setting width:100%; height:auto with a viewBox makes SVGs adapt to any container. The symbol+use sprite pattern, currentColor theming, and preserveAspectRatio control complete a toolkit for flexible, themeable SVG usage.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “SVG viewBox and Responsive Scaling” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “SVG viewBox and Responsive Scaling”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “SVG viewBox and Responsive Scaling”?
Make SVGs scale correctly on any screen size. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “SVG viewBox and Responsive Scaling” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
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