LiveCode for FM Manual FunctionsHow do I draw SVG paths to an image?

How do I draw SVG paths to an image?

The SVG Path widget in LiveCode draws SVG paths into a widget canvas. It can also draw a named path from the SVG Icon Library.

It is helpful to be able to display different images in FileMaker depending on the current state of a record. For example, displaying an open lock to users that have higher levels of access. This lesson will create a function that dynamically generates images from SVG paths which can be easily used in calculated container fields.

Creating the function

Open the LiveCode for FM solution and click on the `Functions` button.

Click on the `+` icon (1) and name the new function `DrawSVGPath`. Enter a description (2) and copy the script below to the script editor.

This script creates a stack and an SVG path widget, then sets the path, width, height and color for the path to be drawn in. It then exports a snapshot of the widget to return as a PNG image.

if there is no stack "DrawSVGPathTemporary" then
   create invisible stack "DrawSVGPathTemporary"
   set the defaultStack to "DrawSVGPathTemporary"
   create widget "SVG" as "com.livecode.widget.svgpath"
   set the defaultStack to "DrawSVGPathTemporary"
end if

if fmParam(1) is among the lines of iconNames() then
   set the iconPresetName of widget "SVG" to fmParam(1)
   set the iconPath of widget "SVG" to fmParam(1)
end if

if fmParam(2) is an integer then
   set the width of widget "SVG" to fmParam(2)
end if

if fmParam(3) is an integer then
   set the height of widget "SVG" to fmParam(3)
end if

if fmParam(4) is a color then
   set the foregroundColor of widget "SVG" to fmParam(4)
end if

put "binary" into tData["type"]
put "PNGf" into tData["main"]
put "svg.png" into tData["filename"]
put the width of widget "SVG" into tData["width"]
put the height of widget "SVG" into tData["height"]
export snapshot from widget "SVG" to tData["value"]["PNGf"] as PNG

return tData

Click the 'Save' button to save the function and then click the 'Close' button to close the Workspace and return to FileMaker.


Open an existing solution or create a new solution by selecting `File > New Solution...` from the menubar then choose `File > Manage > Database...` from the menubar to open the `Manage Database` dialog.

Create 4 fields as below

SVG Path - Text

Width - Number

Height - Number

Color - Text

Then create a `Drawn Path` calculation field

In the `Specify Calculation` dialog

  1. Set the script to LC ("DrawSVGPath"; SVG Path; Width; Height; Color)
  2. Set the `Calculation result is` option to `Container`
  3. Click `Storage Options...`
  4. Check the `Do not store calculation results` box and click `OK`.
  5. Click Ok again twice, until you return to your solution screen.

In layout mode use the `Field Picker` and drag the controls to the layout.

Leave Layout Mode and Create a new record by clicking the `New Record` button.

As you fill in the fields the drawn SVG path will show.

Try setting

  • SVG Path = thumbs up
  • Width = 80
  • Height = 80
  • Color = black

Then try

  • SVG Path = star
  • Width = 80
  • Height = 80
  • Color = red


Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.