How do I snap SVG to a pixel grid?

Set Step (default 1) and click Snap to grid. Path commands, x/y/cx/cy/width/height, polygon points, and viewBox round to the nearest multiple of Step.

How is snapping different from Round SVG Path Decimals?

Round decimals only rewrites numbers inside d to N fractional digits (default 2). Snap uses a grid step and also hits shape attributes and viewBox, which is what you want for blurry 1px icons.

Does snap rewrite stroke-width and colors?

No. Paints, opacity, and stroke-width stay. Reduce Path Nodes if you want fewer points instead of rounding existing ones.

What does the Step value mean?

1 snaps to whole user units (typical CSS pixel grid). 0.5 is a half-pixel grid for 2× assets. Values already on the grid are left as-is.

Snap SVG to Pixel Grid — Free Tool

FAQ

Quick answers

How do I snap SVG to a pixel grid?: Set Step (default 1) and click Snap to grid. Path commands, x/y/cx/cy/width/height, polygon points, and viewBox round to the nearest multiple of Step.
How is snapping different from Round SVG Path Decimals?: Round decimals only rewrites numbers inside d to N fractional digits (default 2). Snap uses a grid step and also hits shape attributes and viewBox, which is what you want for blurry 1px icons.
Does snap rewrite stroke-width and colors?: No. Paints, opacity, and stroke-width stay. Reduce Path Nodes if you want fewer points instead of rounding existing ones.
What does the Step value mean?: 1 snaps to whole user units (typical CSS pixel grid). 0.5 is a half-pixel grid for 2× assets. Values already on the grid are left as-is.

Round path decimals → Reduce path nodes → Pad viewBox → Crop SVG →

Privacy Terms

Source

Step

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Snap SVG to Pixel Grid

Live preview