SVG viewBox, Aspect Ratio & Responsive Scaling in CSS

Almost every vector sizing issue in CSS backgrounds and masks traces back to a misunderstanding of how the SVG viewBox attribute coordinates with CSS background-size and preserveAspectRatio.

1. What is viewBox?

The viewBox="min-x min-y width height" defines the virtual camera lens that crops and projects vector coordinates into the browser window. A valid viewBox is essential for responsive scaling; without it, vectors cannot scale proportionally and will clip.

2. Controlling Aspect Ratio

• preserveAspectRatio="xMidYMid meet": Scales proportionally and centers within container (default).
• preserveAspectRatio="xMidYMid slice": Fills the entire box like object-fit: cover.
• preserveAspectRatio="none": Stretches non-proportionally to fill exact container width and height.

3. Responsive CSS Declarations

.icon-responsive {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,...');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}