Container-Based SVG Sizing
Container query units let SVG scale relative to its actual parent container, not just the viewport — here's how to use them correctly.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Container Query Units for SVG
CSS container query units (`cqw`, `cqh`, `cqi`, `cqb`) size an SVG relative to its nearest queried container rather than the viewport — essential for component-based design systems where the same icon or illustration might sit in a small sidebar or a large hero section with genuinely different available space.
- cqw/cqh units size SVG relative to container, not viewport
- Requires container-type: inline-size (or similar) on an ancestor
- Enables truly reusable components that adapt to their placement
Practical Setup and Fallbacks
Declare `container-type: inline-size` on the wrapping element, then size the SVG with a `cqw`-based width (e.g., `width: 50cqw`) — for browsers without container query support, provide a `vw`-based or fixed fallback using `@supports` feature detection to avoid a broken layout in older browsers.
- container-type: inline-size on the parent enables cqw units to work
- @supports (container-type: inline-size) gates modern behavior safely
- Provide a vw or fixed-size fallback for unsupported browsers
Frequently Asked Questions
What's the difference between cqw and vw units?
vw sizes relative to the full viewport width regardless of nesting; cqw sizes relative to the nearest ancestor with container-type set, letting the same component behave differently depending on where it's placed in the layout.
Do container query units work in all modern browsers?
Support is strong in current Chrome, Firefox, and Safari versions, but always check current caniuse data and provide a graceful fallback for any browsers your analytics show still lacking support.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG