SVG Path Scaler

Vector precision. Paste your SVG path data (the d attribute) and multiply all coordinates by a scale factor to resize your graphics manually.

Scaled Path Data

Live Preview (80x80 container)

The Math of Vector Graphics

I genuinely believe that SVG is the most powerful graphic format on the web because it's essentially just code. Each path is a series of commands: `M` means move to a coordinate, `L` means draw a line, and `C` means draw a curve. By multiplying the numbers after these commands, we can scale the entire shape without losing the mathematical relationships between points.

Absolute vs Relative: Most modern SVGs use absolute coordinates (capital letters). Scaling relative coordinates (lowercase letters) is slightly different as they represent a distance from the previous point rather than an absolute position on the grid. Our tool handles standard coordinate sets by multiplying all numerical values found in the string.

SVG Best Practices:

  • ViewBox: Instead of scaling the path data, you should usually use the `viewBox` attribute in your `` tag. This tool is intended for cases where you need to modify the raw coordinates for use in symbols or combined paths.
  • Minification: After scaling your SVG, use a tool like SVGO to remove unnecessary metadata and round off decimal places to save file size.
  • Accessibility: Always include a `` tag inside your SVG for screen readers if the graphic is meaningful content.</li> </ul> </div> </div> </div> </main> <script src="../shared/header.js" defer></script> <script src="../shared/footer.js" defer></script> <script> (function() { const pathI = document.getElementById('path-in'); const scaleI = document.getElementById('scale'); const resP = document.getElementById('res-path'); const previewP = document.getElementById('preview-path'); const copyBtn = document.getElementById('copy-btn'); function update() { const rawPath = pathI.value.trim(); const scale = parseFloat(scaleI.value) || 1; // Regex to find numbers (including negatives and decimals) const regex = /(-?\d*\.?\d+)/g; const scaledPath = rawPath.replace(regex, (match) => { const val = parseFloat(match); const scaled = val * scale; // Round to 3 decimal places to keep it clean return Math.round(scaled * 1000) / 1000; }); resP.textContent = scaledPath; previewP.setAttribute('d', scaledPath); } [pathI, scaleI].forEach(i => i.addEventListener('input', update)); copyBtn.addEventListener('click', function() { navigator.clipboard.writeText(resP.textContent).then(() => { const old = copyBtn.textContent; copyBtn.textContent = 'Copied!'; setTimeout(() => copyBtn.textContent = old, 2000); }); }); update(); })(); </script> </body> </html>