Capture hand-drawn strokes on a canvas and save them as SVG (Scalable Vector Graphics) files.
It generates a lot of nodes—something I'll be fixing later on.
The main reason for creating this extension was this:
- Digital signatures that can be stored as vectors instead of raster images.
But of course, much more can be done:
- Handwritten notes or sketches that need to be preserved with scalable quality.
- Diagrams or simple drawings exportable to SVG format for printing, editing in vector software, or displaying on screens of any resolution without loss of sharpness.
- Forms with signature fields where it is necessary to save, list, and delete signatures from different users.
When saved as an SVG, the result is infinitely scalable without pixelation, takes up much less space than an equivalent raster image, and can be edited later using any vector tool (Inkscape, Illustrator, etc.), since each stroke is recorded as an independent path with its own color and thickness attributes.
CanvasWidth
Sets the width of the SVG canvas in pixels. Only positive values are accepted; anything else is ignored.
CanvasHeight
Sets the height of the SVG canvas in pixels. Only positive values are accepted; anything else is ignored.
StrokeWidth
Sets the thickness of the stroke used for new paths. Only positive values are accepted; anything else is ignored.
StrokeColor
Sets the stroke color for new paths. Accepts hex strings, App Inventor's color blocks or the color names: black, white, red, green, blue, yellow, cyan, magenta, gray/grey. Any unrecognized value falls back to black.
FileName
Sets the name of the SVG file to be saved. If the name does not end with .svg, the extension appends it automatically. Empty or null values are ignored.
TouchDown
Starts a new path at the given point (x, y). Call this from the Canvas TouchDown or Dragged event when the user begins a stroke.
TouchMove
Adds a smooth Bézier curve segment from the last point to the new point (x, y). Call this from the Canvas Dragged event as the user moves their finger.
TouchUp
Ends the current stroke and stores it as a finished path. Call this from the Canvas TouchUp event when the user lifts their finger.
Clear
Removes all recorded strokes and resets the current path, starting a fresh drawing.
GetSvgString
Returns the complete SVG document as an XML string, including all recorded paths, with the canvas dimensions and a padding margin applied to the output size.
SaveToFile
Saves the current SVG to the app's private external files directory using the configured file name. Triggers the AfterSaveToFile event with the resulting file path, a success flag, and an error message.
ListFiles
Returns a list containing the names of all .svg files stored in the app default directory.
DeleteFile
Deletes the SVG file with the given name from the app default directory. Triggers the AfterDeleteFile event with the file name, a success flag, and an error message.
AfterSaveToFile
triggered after a save operation finishes. Provides the absolute path of the saved file, a boolean indicating whether the save succeeded, and an error message (empty when the operation was successful).
AfterDeleteFile
triggered after a delete operation finishes. Provides the name of the file that was targeted, a boolean indicating whether the deletion succeeded, and an error message (empty when the operation was successful).
v1.0 September 10, 2026.
SvgRecorder.aia (29.3 KB)
joejsanz.joedevsvgrecorder.aix (12.9 KB)
JDK: 17
Minimum API Level: 14
Updated On: 2026-09-10T07:00:00Z
Built using: FAST-CLI v7.0.0-premium
Support free development
- This extension is and will remain free. If you have found it useful and wish to support my work so I can continue creating and updating components like this one, any voluntary contribution is greatly appreciated:
Thanks.