Responsive SVG

Make SVGs adapt to any screen size.

The Key: viewBox

The viewBox attribute is essential for responsive SVGs:

<svg viewBox="0 0 100 100">
  <!-- Content scales to any size -->
</svg>

Making SVG Responsive

Method 1: Fluid Width

<svg viewBox="0 0 100 100" width="100%">

Method 2: CSS Control

svg {
  width: 100%;
  height: auto;
}

<svg viewBox="0 0 100 100">

Method 3: Container-Based

.svg-container {
  width: 100%;
  max-width: 500px;
}

.svg-container svg {
  width: 100%;
  height: auto;
}

preserveAspectRatio

Control how SVG scales within its container:

preserveAspectRatio="xMidYMid meet"

// Values:
// xMinYMin, xMidYMin, xMaxYMin
// xMinYMid, xMidYMid, xMaxYMid
// xMinYMax, xMidYMax, xMaxYMax

// meet: Scale to fit (default)
// slice: Scale to fill, crop overflow
// none: Stretch to fit

Common Patterns

Full-Width Hero

<svg viewBox="0 0 1200 400"
     preserveAspectRatio="xMidYMid slice"
     style="width: 100%; height: 300px;">

Icon (Fixed Aspect)

<svg viewBox="0 0 24 24" width="24" height="24">

Background Pattern

<svg viewBox="0 0 100 100"
     preserveAspectRatio="none"
     style="width: 100%; height: 100%;">

Aspect Ratio with CSS

.svg-wrapper {
  aspect-ratio: 16 / 9;
}

.svg-wrapper svg {
  width: 100%;
  height: 100%;
}
Tip: Always include viewBox on SVGs intended to be responsive. It defines the internal coordinate system.
💡

Responsive SVG Explained Simply

Think of a responsive SVG like water filling a glass. No matter the size or shape of the glass, the water adapts perfectly to fill the available space. Similarly, a responsive SVG adapts to whatever container you place it in, whether that's a tiny mobile screen or a massive desktop monitor. Unlike regular images that become blurry when stretched, SVGs remain crystal clear at any size because they're made of mathematical instructions rather than fixed pixels.

The magic behind this flexibility is the viewBox attribute. Imagine you're looking through a window at a painting. The viewBox defines what portion of the painting you can see through that window and at what scale. When you specify viewBox="0 0 100 100", you're telling the browser: "Consider this SVG to be 100 units wide and 100 units tall internally." No matter how large or small you display the SVG, those internal coordinates stay consistent, and everything scales proportionally.

Sometimes you need more control over how your SVG behaves when the container's shape doesn't match the graphic's natural proportions. That's where preserveAspectRatio comes in. Think of it like framing a photo that doesn't quite fit the frame. You can choose to show the entire photo with borders around it (meet), zoom in and crop the edges to fill the frame completely (slice), or stretch the image to fit exactly (none). Most of the time, "meet" is what you want because it keeps everything visible without distortion.

For practical implementation, making an SVG responsive typically involves three simple steps: include a viewBox attribute, remove any fixed width and height values from the SVG tag, and let CSS handle the sizing. Setting width: 100% and height: auto on your SVG allows it to fill its container while maintaining its proportions. This approach gives you an elastic image that gracefully adapts to any screen size, from smartwatches to 4K displays.

Frequently Asked Questions

What makes an SVG responsive?
An SVG becomes responsive when it includes a viewBox attribute and uses flexible sizing (like width="100%" or CSS-based sizing). The viewBox defines the internal coordinate system, allowing the graphic to scale proportionally to any container size while maintaining its aspect ratio and visual quality.
What is the viewBox attribute and why is it essential?
The viewBox attribute defines the internal coordinate system of an SVG using four values: min-x, min-y, width, and height (e.g., viewBox="0 0 100 100"). It acts as a virtual canvas that your SVG content is drawn on, enabling the graphic to scale smoothly to any size without losing quality or changing proportions.
How do I make an inline SVG scale with its container?
To make an inline SVG scale with its container, ensure it has a viewBox attribute and remove fixed width/height attributes (or set width="100%"). Then use CSS to control sizing: set width: 100% and height: auto on the SVG element, or wrap it in a container with defined dimensions.
What does preserveAspectRatio do in SVG?
The preserveAspectRatio attribute controls how an SVG scales when the aspect ratio of its container differs from the viewBox. It specifies alignment (like xMidYMid for center) and scaling behavior: "meet" scales to fit entirely within the container, "slice" scales to fill and crops overflow, and "none" stretches to fill without maintaining proportions.
Why does my SVG look blurry when scaled up?
If your SVG looks blurry when scaled, it may contain embedded raster images (PNG, JPEG) rather than pure vector paths. Also check if the SVG has fixed pixel dimensions without a viewBox. True vector elements in SVG will always remain crisp at any size because they're mathematically defined shapes, not pixels.
Should I use width and height attributes or CSS for SVG sizing?
For responsive SVGs, CSS is generally preferred as it offers more flexibility and can adapt to different screen sizes using media queries. However, setting width and height attributes prevents layout shifts during page load. The best practice is to include both: use attributes as fallback defaults and CSS for responsive behavior.
How do I maintain aspect ratio for responsive SVGs?
To maintain aspect ratio, always include a viewBox attribute on your SVG. For CSS-based sizing, use the aspect-ratio property on the container (e.g., aspect-ratio: 16/9) or the padding-bottom hack for older browser support. The SVG will automatically maintain its internal proportions defined by the viewBox.
What is the difference between meet and slice in preserveAspectRatio?
The "meet" value (default) scales the SVG to fit entirely within the container while preserving aspect ratio, similar to CSS background-size: contain. The "slice" value scales the SVG to completely cover the container, cropping any overflow, similar to background-size: cover. Use "meet" when you need to see the entire graphic, and "slice" for full-bleed backgrounds.
How do I make an SVG background responsive?
For responsive SVG backgrounds, you have several options: use the SVG as a CSS background-image with background-size: cover or contain; embed the SVG inline with preserveAspectRatio="xMidYMid slice" and width/height set to 100%; or use the SVG in a container with position: absolute and full dimensions. Each method offers different control over scaling behavior.
Can I use media queries inside SVG for responsive design?
Yes, you can embed CSS media queries directly inside SVG files within a <style> element. These queries respond to the SVG's own dimensions, not the browser viewport, making them powerful for component-level responsiveness. You can show/hide elements, change colors, or adjust layouts based on the SVG's rendered size.