Optimizing Responsive SVG and Container Scaling Without JavaScript in HTML and CSS

In certain web development scenarios—such as building assets for a wiki platform—developers may face restrictions that limit the use of JavaScript and restrict the HTML tags allowed. This often leads to challenges in achieving desired responsive behaviors, particularly when working with inline SVGs and container elements that need to resize dynamically, especially when zooming in and out via mouse gestures.

Overview of the Challenge

The core issue arises when attempting to synchronize the resizing of a container <div> and an inline SVG with user-initiated zoom actions, such as mouse control + scroll, within a platform that prohibits JavaScript enhancements. The goal is to make both the container and the embedded SVG scale proportionally, mimicking native responsiveness during zoom, without explicit scripting.

Case Analysis and CSS Strategies

Case 1: Using Relative Width Units (%) or VW

Setting the container’s width using relative units like % or vw (viewport width) ensures that on window resize, the container adjusts accordingly. For example:

“`html

“`

css
.header {
border: 1px solid red;
width: 100%; /* or vw units like 100vw */
}

However, when the user zooms in or out with the mouse wheel, most browsers scale the entire viewport visually, but CSS container widths often remain fixed at the specified units. This results in the container maintaining its 100% width relative to the viewport, but its actual pixel dimensions do not scale with the zoom, meaning the inline SVG inside may not resize as desired.

Case 2: Fixed Width with Pixels or REM Units

Using fixed units (e.g., 1920px or 10rem) creates a container that scales visually with zoom, because zooming the page enlarges or shrinks all content proportionally:

css
.header {
border: 1px solid red;
width: 1920px; /* fixed width */
}

This approach makes the container and SVG scale together during zoom operations. However, it hampers responsiveness—if the user resizes the browser window or views on smaller screens, the fixed width can cause overflow or underutilization of available space.

Alternative: Using REM units can offer some flexibility, especially when combined with dynamic font sizing, but aligning the base font size with