Resize SVG Online — Width, Height & ViewBox Fixer

Inspect width, height and viewBox, then resize SVG exports without breaking responsive scaling. Useful for tricky design handoff files.

Loading…
Resize SVG — dimensions & viewBox playbook
Fix awkward SVG exports by inspecting width, height and viewBox, then rewriting dimensions with predictable responsive scaling.

Developer notes

• Uses existing viewBox first to preserve aspect ratio. • When viewBox is missing, it can infer one from current dimensions. • Best suited to normal exports with numeric width/height values. • Pair with validate-svg if you also want title/desc guidance.

Options

Width
Target width attribute. Leave empty to keep the current width (or derive from height + aspect ratio).
Height
Target height attribute. Leave empty to keep the current height (or derive from width + aspect ratio).
Keep ratio
When one dimension is set, computes the other from the existing aspect ratio / viewBox.
Ensure viewBox
If viewBox is missing, derives one from current width/height so scaling stays predictable.

When teams pick this route

• Fix SVGs that scale oddly in responsive layouts. • Normalize oversized design exports before shipping. • Add viewBox to old assets that only declare width/height. • Generate a smaller inline badge without re-exporting from Figma.

Worked examples

Marketing badge with metadata

Sample input

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"> <title id="badge-title">Fast delivery badge</title> <desc id="badge-desc">Rounded badge with lightning icon and gradient background.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f97316"/> <stop offset="100%" stop-color="#fb923c"/> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/> </clipPath> </defs> <g clip-path="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)"/> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/> </g> <g font-family="Inter, Arial, sans-serif" fill="#fff"> <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text> <text x="76" y="49" font-size="12" fill-opacity="0.92">Optimized SVG asset</text> </g> </g> </svg>

Output

Set width to 120 and keep aspect ratio enabled to halve the badge while preserving the viewBox.

Preserve the ratio from viewBox

Sample input

<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10"/></svg>

Output

Set width only and keep aspect-ratio mode enabled to infer the matching height automatically.

Navigate related SVG tools

Need encoded CSS output? Try SVG to Data URI. Validate accessibility with validate SVG or browse the SVG tools hub.

Resize SVG FAQ

Dimensions and responsive scaling

Why does viewBox matter?

It defines the internal coordinate system that lets SVG scale predictably in responsive layouts.

Can it infer missing dimensions?

It can infer a missing width or height when a valid ratio already exists.

Will it fix every broken export?

It handles common width/height/viewBox cases, but unusual transforms may still need manual review.

SVG Tools

Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.

Explore other tool categories

Minify

Shrink code and assets for production — minify JavaScript, CSS, HTML, JSON and XML before gzip or CDN deploy.

Beautify

Make code readable with consistent indentation — beautify JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML and more in your browser.

Unminify

Expand minified or compressed code — unminify JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML and other formats when debugging or reviewing.

Conversion

Transform data between JSON, YAML, XML and CSV locally — no server uploads.

CSS preprocessors

Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.

JSON Tools

Validate, format, diff and explore JSON payloads — complementary to minifiers and converters.

DevOps & Infra

Terraform HCL format/validate/minify, Dockerfile format & lint, Docker Compose and .env validation.

CI/CD

GitHub Actions and GitLab CI — format YAML and check workflow/job structure in your browser.

Logs & observability

Line-oriented JSON/NDJSON and Nginx/Apache access logs — format, filter, validate, and CSV/TSV.

Kubernetes

Multi-doc manifests, structural validate, Ingress/Deployment starters, and Helm values formatting.

Networking / IP

CIDR, subnets, and IPv4/IPv6 helpers — in your browser.

Security & tokens

JWKS, X.509 certificates, and secrets scan — browser-local.

API & schemas

OpenAPI tools to format, validate, and lint your specs.

Encoding

Encode or decode Base64, URL components and HTML entities — client-side only.

Developer utilities

Timestamps, UUID, ULID, Nanoid, cron, passwords, regex, slugify, number bases, case, text diff, and chmod — all client-side.

Text & Markdown

Count words, build Markdown TOCs, and clean line lists — all in your browser.

AI & LLM

Token counting, pricing estimates, and context-window fit — 100% browser-local.

Serialization

Serialize and deserialize PHP data structures beside JSON workflows.