SVG createSVGPoint() Method
createSVGPoint() creates a mutable point object, the starting point for converting mouse coordinates into SVG user space.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Creating a Point for Coordinate Work
Calling createSVGPoint() on the root SVG element creates a fresh SVGPoint object whose x and y properties you can set to any coordinate values, providing the mutable point object needed as the input for coordinate transformation via matrixTransform() or for hit-testing methods like isPointInFill().
- createSVGPoint() creates a fresh, mutable SVGPoint on the root SVG element
- Set its x and y properties to any coordinate values you need
- Provides the input point for matrixTransform() and hit-testing methods
The Standard Mouse-to-SVG Conversion Pattern
The canonical interactive-SVG pattern creates a point with createSVGPoint(), assigns the mouse event's clientX and clientY to its x and y, then calls matrixTransform() with the inverse of getScreenCTM() to convert those screen coordinates into the SVG's user coordinate space for accurate interaction handling.
- Create the point, then assign mouse clientX and clientY to its coordinates
- Apply matrixTransform() with the inverse getScreenCTM() to convert to user space
- Produces accurate SVG-space coordinates for interaction handling
Frequently Asked Questions
Is createSVGPoint() being deprecated in favor of DOMPoint?
The modern DOMPoint interface is increasingly used as a standard alternative, and some browsers favor it, so for new code it's worth checking whether DOMPoint with an SVG matrix achieves the same result more consistently.
Why do I need to create a point instead of just using two number variables?
The transformation methods like matrixTransform() operate on point objects, not loose numbers, so you need an actual SVGPoint (or DOMPoint) object to apply the coordinate-space conversion to.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG