SVGSketch Learn

How to Make an SVG Responsive

Three attributes - viewBox, preserveAspectRatio, and a CSS-driven width - are all responsive SVG ever needs.

Open SVGSketch

Quick answer

Set the SVG's viewBox to the natural coordinate bounds, remove the explicit width and height attributes (or set width="100%"), and set preserveAspectRatio to "xMidYMid meet" so the artwork scales fluidly while keeping its aspect ratio.

Steps at a glance

  1. Set the viewBox

    Confirm the viewBox covers the artwork in the Geometry panel Document section; copy the selection bounds in if it does not.

  2. Drop width/height

    Set width="100%" in the exported markup, or use the HTML export's "Make SVG responsive" option.

  3. Pick preserveAspectRatio

    xMidYMid meet for icons, slice for hero images, none to stretch.

  4. Constrain with CSS

    svg { width: 100%; height: auto; max-width: 800px; }

  5. Export and embed

    Inline for CSS control, <img> for static use.

Step 1: Set the viewBox

Deselect everything and open the Geometry panel - the Document section shows the viewBox. Confirm it covers the visible artwork. ViewBox is the coordinate system the SVG draws into - everything inside is relative to it. Without a viewBox, the browser cannot scale the SVG fluidly.

If the imported SVG has a viewBox that does not match its bounds, select all (Ctrl+A), read the content bounds from the Geometry panel, and type them into the ViewBox X/Y/W/H fields.

Step 2: Drop or fluid-ize width/height

The editor keeps numeric width and height on the document, so make the embed fluid where it ships: either edit the attributes in the exported markup (set width="100%" and drop height, or remove both), or export as HTML with the "Make SVG responsive" option enabled and SVGSketch writes the fluid sizing for you.

With a viewBox set and no fixed pixel dimensions, the SVG fills its container and the browser scales accordingly. Some browsers default a missing width/height to 300x150 - if that is a concern, set width="100%" explicitly.

Step 3: Pick preserveAspectRatio

preserveAspectRatio controls what happens when the container aspect ratio differs from the viewBox aspect ratio. "xMidYMid meet" (the default) scales the artwork to fit fully and centers any leftover space. "xMidYMid slice" scales to fill and crops the overflow. "none" stretches to fit, distorting the image.

For most icons and illustrations, leave it on the default. Use "slice" for hero images that should fill regardless of crop.

Step 4: Constrain with CSS

Add CSS in the host page: svg { width: 100%; height: auto; max-width: 800px; }. The SVG now flexes with its container, capped at the max-width, and the height auto-derives from the viewBox aspect ratio.

Step 5: Export and embed

Save the SVG. Embed it inline (<svg>...</svg>) or as <img src="icon.svg">. Inline embedding gives full CSS control over individual paths; <img> is fine for static SVGs that do not need theming.

Related SVGSketch resources

How to embed SVG in HTMLRead more How to resize an SVGRead more How to optimize SVGRead more

FAQ

Why does my SVG render at 300x150?

The browser falls back to that default when there is no viewBox and no explicit width/height. Set the viewBox.

What is the difference between meet and slice?

meet scales to fit fully (letterboxing if needed); slice scales to fill (cropping if needed).

Should I use width="100%" or omit it?

width="100%" is more predictable across browsers. Omitting both width and height works in modern browsers but hits the 300x150 fallback in older ones.

Can the SVG be different sizes on mobile vs desktop?

Yes - that is what responsive means. CSS media queries and container width control the rendered size; the SVG itself scales fluidly.

Does this work in <img>?

Yes for sizing. CSS theming via currentColor only works when the SVG is inlined or referenced via <object>.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch