How to responsive svg wrapper with correct aspect ratio in html
- Step 1Add your SVG — Drop a
.svgfile onto the upload zone or paste the SVG source into the text box. The tool parses it with the browser DOMParser and rejects anything whose root element is not<svg>, so malformed XML is caught before processing. - Step 2Set the max width (optional) — The
Max widthfield defaults to100%. Type any CSS length —480px,30rem,60vw— to cap the rendered size. The value is dropped verbatim into the outer div'smax-width; the tool does not validate the unit. - Step 3Run the wrapper — The tool reads the four viewBox numbers, removes every
width="…"andheight="…"attribute from the markup, addswidth="100%" height="100%"to the root<svg>, and assembles the nested divs. - Step 4Check the metrics — Output metrics report the computed
Aspect ratioas a percentage (height ÷ width × 100) and theMax widthyou supplied, so you can confirm the box shape before you paste. - Step 5Copy or download the snippet — Copy the generated HTML or download
<file>-responsive.html. It contains the full inline SVG inside the two divs — ready to paste directly into a page or component. - Step 6Paste into your page — Drop the snippet wherever the graphic belongs. The inner div holds the aspect ratio; the outer div caps the width. No additional CSS or wrapper logic is required.
What the tool actually changes
Every transformation the Responsive Wrapper applies to your SVG — and what it leaves alone.
| Step | Action | Notes |
|---|---|---|
| Read viewBox | Matches viewBox="w0 h0 w h" with a regex | Only positive, space-separated, double-quoted numbers match; otherwise it falls back to a 1/1 square |
| Strip dimensions | Removes all width="…" and height="…" | Global — applies to nested elements too, not just the root <svg> |
| Resize root | Adds width="100%" height="100%" to first <svg> | Makes the SVG fill the inner div |
| Wrap | Outer div max-width:<value>;width:100% | Caps growth; default 100% means no cap |
| Reserve box | Inner div aspect-ratio:<w>/<h>;width:100% | Locks the shape; height is derived by the browser |
| Output | <file>-responsive.html, type html | Inline SVG only — no img, object, or picture variant |
Aspect ratio computed from common viewBoxes
The aspect-ratio CSS and reported percentage for typical viewBox values.
| viewBox | aspect-ratio CSS | Reported % | Shape |
|---|---|---|---|
| 0 0 24 24 | 24/24 | 100.00% | Square icon |
| 0 0 1920 1080 | 1920/1080 | 56.25% | 16:9 banner |
| 0 0 400 300 | 400/300 | 75.00% | 4:3 illustration |
| 0 0 100 200 | 100/200 | 200.00% | Tall portrait |
| (none / no match) | 1/1 | 100.00% | Square fallback |
Cookbook
These recipes show the literal markup the wrapper emits for the most common embedding situations. Each assumes you pasted the named SVG and set the Max width field as shown.
A 16:9 hero, capped at full width
A 1920x1080 banner with Max width left at the default 100%. The fixed dimensions are stripped and the box is reserved at 56.25%.
INPUT <svg viewBox="0 0 1920 1080" width="1920" height="1080">...</svg>
MAX WIDTH 100%
OUTPUT
<div style="max-width:100%;width:100%">
<div style="aspect-ratio:1920/1080;width:100%">
<svg viewBox="0 0 1920 1080" width="100%" height="100%">...</svg>
</div>
</div>An icon capped at 480px
A 24x24 icon you do not want stretched across a wide column. Setting Max width to 480px caps the outer div.
INPUT <svg viewBox="0 0 24 24" width="24" height="24">...</svg>
MAX WIDTH 480px
OUTPUT
<div style="max-width:480px;width:100%">
<div style="aspect-ratio:24/24;width:100%">
<svg viewBox="0 0 24 24" width="100%" height="100%">...</svg>
</div>
</div>SVG with no viewBox
When no viewBox matches, the tool cannot infer a ratio and defaults the inner box to a 1/1 square.
INPUT <svg width="300" height="150">...</svg> (no viewBox)
MAX WIDTH 100%
OUTPUT
<div style="max-width:100%;width:100%">
<div style="aspect-ratio:1/1;width:100%">
<svg width="100%" height="100%">...</svg>
</div>
</div>
Note: add a viewBox first (see svg-viewbox-fixer) to get the true ratio.Fixing a layout-shift bug
Before: a raw export reserves no space and the page jumps as the SVG loads. After: the inner div reserves the exact box.
BEFORE (CLS bug)
<svg viewBox="0 0 400 300" width="400" height="300">...</svg>
-> width:400px overflows narrow phones; height collapses to 0 if CSS overrides width
AFTER (wrapper)
<div style="max-width:100%;width:100%">
<div style="aspect-ratio:400/300;width:100%"> <!-- reserves 75% box -->
<svg viewBox="0 0 400 300" width="100%" height="100%">...</svg>
</div>
</div>Keeping CSS control over colours
Because the output is inline, currentColor and CSS variables still work after wrapping. This is why the tool never switches to an img tag.
/* page CSS still reaches inside the wrapped, inline SVG */
.brand-mark { color: #6366f1; }
.brand-mark svg [fill="currentColor"] { /* inherits #6366f1 */ }
<div class="brand-mark" style="max-width:120px;width:100%">
<div style="aspect-ratio:24/24;width:100%">
<svg viewBox="0 0 24 24" width="100%" height="100%"><path fill="currentColor" .../></svg>
</div>
</div>Edge cases and what actually happens
Root element is not <svg>
RejectedInput is parsed with DOMParser; if the root tag is not svg or the parser reports an error, the tool throws "Invalid SVG — could not parse the pasted content as valid SVG XML." Fix the markup before wrapping.
No viewBox present
Square fallbackWith no matching viewBox, the ratio cannot be inferred, so the inner div is set to aspect-ratio:1/1. A non-square graphic will be letterboxed. Run svg-viewbox-fixer first to add a real viewBox.
viewBox uses commas
Square fallbackThe regex only matches space-separated numbers (0 0 24 24). A comma-separated viewBox (0,0,24,24) does not match and falls back to 1/1. Normalise to spaces first.
viewBox has negative offsets
Square fallbackThe pattern accepts only digits and dots, so a viewBox like -10 -10 120 120 does not match and falls back to 1/1. The min-x/min-y do not affect the ratio, but the negative sign breaks the match — strip the offset or re-fit with svg-viewbox-fixer.
Single-quoted attributes
Square fallbackThe viewBox regex looks for double quotes. viewBox='0 0 24 24' is not detected and falls back to 1/1. Convert to double quotes (a minify pass via svg-pro-minifier normalises quoting).
Nested elements had width/height
By designThe strip step is a global replace, so width/height on inner <rect>, <image>, or nested <svg> are removed too. Shapes that relied on those attributes (and lacked a viewBox-relative geometry) may render differently — verify complex documents.
Max width left blank
Defaults to 100%If the field is empty the engine substitutes 100%, so the outer div imposes no cap and the SVG grows to fill its parent.
Invalid Max width value
Passed throughThe value is inserted verbatim into max-width; the tool does not validate units. A typo like 480 px (with a space) produces invalid CSS that browsers ignore — double-check the unit.
Multiple files dropped
First file onlyThis tool processes a single SVG (files[0]). Only svg-sprite-builder accepts multiple inputs. Wrap each SVG in its own run.
Frequently asked questions
What exactly does the wrapper output?
A complete HTML snippet (<file>-responsive.html) containing two nested divs and your inline SVG. The outer div sets max-width and width:100%; the inner div sets aspect-ratio:<w>/<h> and width:100%; the SVG inside has width="100%" height="100%". That is the entire output — no script, no external CSS.
Does it use the padding-bottom trick?
No. The tool emits only the modern CSS aspect-ratio property. There is no padding-bottom fallback in the generated markup. aspect-ratio is supported in every browser since 2021 (Chrome 88+, Firefox 89+, Safari 15+), so the single pattern works essentially everywhere today.
Can it output an img tag or picture element instead?
No. The tool always emits inline SVG. There is no option to switch embedding method. Inline output is deliberate — it keeps currentColor, CSS variables, classes, and animations responsive to your page styles, which img and object embeds cannot do.
Where does the aspect ratio come from?
From your viewBox. The tool reads the third and fourth numbers (width and height) and writes them directly as aspect-ratio:<w>/<h>. The reported percentage metric is height ÷ width × 100.
What happens if my SVG has no viewBox?
The ratio cannot be computed, so the inner div falls back to aspect-ratio:1/1 (a square). A non-square graphic will be letterboxed. Add a viewBox first with svg-viewbox-fixer, then wrap.
Why are the fixed width and height attributes removed?
Fixed pixel dimensions freeze the SVG at one size and cause overflow on small screens. The tool strips every width="…" and height="…" and re-adds width="100%" height="100%" on the root so the SVG fills the aspect-ratio box instead.
Does removing width/height affect nested elements?
Yes — the strip is a global text replace, so width/height on nested elements (inner <rect>, <image>, nested <svg>) are also removed. For most icons this is harmless, but verify complex documents where an inner element depended on those attributes.
What CSS values does the Max width field accept?
Any CSS length string — 100%, 480px, 30rem, 60vw. The value is inserted verbatim into max-width; the tool does not validate the unit, so a malformed value produces CSS the browser silently ignores.
Does it prevent Cumulative Layout Shift?
Yes, by design. The inner div reserves the correct box via aspect-ratio before the SVG paints, so the page does not jump as content loads — the core mechanism browsers reward in CLS scoring.
Will my SVG animations still work?
Yes. The output is inline and the tool does not touch animation markup, so SMIL, CSS, and JavaScript-driven animations continue to work exactly as they did before wrapping.
Is my SVG uploaded to a server?
On the hosted site, processing runs in your browser — the SVG is not sent anywhere. The transform is also server-safe, so the JAD runner can execute it via its text engine without a headless browser if you automate it locally.
How large an SVG can I wrap?
SVG-family limits apply: 5 MB on Free, 50 MB on Pro, 200 MB on Pro Media, 2 GB on Developer, and unlimited on Enterprise. The wrapper is a lightweight text transform, so size is rarely the constraint.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.