SVG Sizing with container-type
container-type enables container queries, letting SVG icon sizing respond to its actual parent container size instead of the viewport.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why Container Queries Matter for Reusable SVG Components
Traditional media queries respond only to viewport width, which breaks down for a reusable SVG icon component placed inside differently sized containers (a narrow sidebar versus a wide main content area) on the same page — setting container-type: inline-size on the parent enables container queries that respond to that specific container's own width instead.
- Media queries only respond to viewport width, not a specific container's size
- container-type: inline-size enables queries scoped to the parent container itself
- Solves sizing for reusable SVG components placed in differently sized containers
Writing a Container Query for SVG Icon Size
Once a container has container-type set, a rule like @container (min-width: 300px) { svg { width: 48px; } } adjusts the SVG's size specifically based on that container's width, letting the same icon component render appropriately whether it's placed in a cramped sidebar widget or a spacious dashboard panel.
- @container queries adjust SVG sizing based on the specific parent's width
- Same icon component adapts correctly across differently sized layout contexts
- Avoids needing separate icon size variants manually chosen per placement
Frequently Asked Questions
Do I need to name my container for container queries to work?
Naming a container with container-name is optional but becomes useful when nested containers exist, letting a query target a specific named ancestor container rather than just the nearest one.
Is container-type support solid enough for production SVG sizing today?
Yes, container query support has become solid across current major browsers, making it a reliable technique for responsive component sizing including SVG icons.
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