How do I offset an SVG path online?

Click Offset path. The path is scaled out from its bounding-box center — a simple outset, not a full parallel-curve engine.

Is offset the same as stroke-to-path?

No. Offset grows the centerline. Stroke-to-path builds a ribbon of stroke width.

This outset preserves the command types. True parallel offsets of sharp corners need a dedicated CAD offset.

Edit the factor in Source after a bake, or scale down. This button applies a positive outset.

FAQ

Quick answers

How do I offset an SVG path online?: Click Offset path. The path is scaled out from its bounding-box center — a simple outset, not a full parallel-curve engine.
Is offset the same as stroke-to-path?: No. Offset grows the centerline. Stroke-to-path builds a ribbon of stroke width.
Will a sharp corner stay sharp after offset?: This outset preserves the command types. True parallel offsets of sharp corners need a dedicated CAD offset.
Can I inset instead of outset?: Edit the factor in Source after a bake, or scale down. This button applies a positive outset.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B