SVG Upscaler

A command-line tool for upscaling SVG icons embedded in source files (.tsx, .jsx, .svg, etc.). It automatically detects the current dimensions and scales path coordinates, viewBox, width/height attributes, and stroke widths proportionally.

How It Works

The script performs these transformations:

1. Detects dimensions — reads viewBox, width/height attributes, or JSX default params to determine the original size
2. Scales path data — multiplies all numbers inside d="..." path attributes by the scale factor
3. Updates viewBox — adjusts the viewBox attribute to the new dimensions
4. Updates width/height — scales both attribute values and JSX default parameter values
5. Scales stroke widths — proportionally adjusts strokeWidth / stroke-width values

Note: This tool modifies files in place. Use --dry-run first to preview changes, and make sure your files are committed to version control before running.

Usage

node upscale-icons.js <target> [options]

Argument	Description
<target>	Path to a file or directory containing SVG icon files (required)

Options

Option	Short	Default	Description
--size	-s	64	Target width in pixels
--extensions	-e	tsx,jsx,svg	Comma-separated file extensions to process
--recursive	-r	false	Recursively process subdirectories
--stroke-only	—	false	Only scale stroke widths, skip coordinate scaling
--stroke-scale	—	same as scale	Custom stroke width multiplier
--dry-run	—	false	Preview changes without modifying files
--help	-h	—	Show help message

Examples

Upscale all .tsx icons in a directory to 64px

node upscale-icons.js ./src/icons --size 64

Upscale a single SVG file to 128px wide

node upscale-icons.js ./logo.svg -s 128

Process .svg and .jsx files recursively

node upscale-icons.js ./assets -e svg,jsx -r

Only scale stroke widths (icons already at the right size)

node upscale-icons.js ./src/icons --stroke-only --stroke-scale 2

Preview changes without modifying files

node upscale-icons.js ./src/icons --dry-run

Scale 24×24 icons to 48px with thicker strokes

node upscale-icons.js ./icons -s 48 --stroke-scale 3

Sample Output

SVG Upscaler
──────────────────────────────────────────────────
Target size : 64px (width)
Files found : 13
Mode        : full scale
──────────────────────────────────────────────────

  ✓  src/icons/kid.tsx: 20×20 → 64×64 (×3.20)
  ✓  src/icons/home.tsx: 24×25 → 64×67 (×2.67)
  skip  src/icons/logo.tsx (already 64px wide)
  skip  src/icons/readme.md (could not detect dimensions)

──────────────────────────────────────────────────
Done! 2 processed, 2 skipped, 0 errors.

Supported File Formats

The dimension auto-detection works with:

• Plain SVG — <svg viewBox="0 0 24 24" width="24" height="24">
• React/JSX — function Icon({ width = 24, height = 24 }) { ... }
• Any file containing standard SVG viewBox, width, or height attributes

Tips

• Always use --dry-run first to verify the detected dimensions and scale factor before modifying files.
• Aspect ratio is preserved — height is scaled proportionally based on the width scale factor.
• Non-square icons (e.g., 24×25) are handled correctly — the height scales proportionally.
• If --stroke-scale is not specified, stroke widths scale by the same factor as coordinates.
• The script skips files that are already at the target width.