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" else 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) else 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
- Set the script to
LC ("DrawSVGPath"; SVG Path; Width; Height; Color)
- Set the `Calculation result is` option to `Container`
- Click `Storage Options...`
- Check the `Do not store calculation results` box and click `OK`.
- 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.
- SVG Path = thumbs up
- Width = 80
- Height = 80
- Color = black
- SVG Path = star
- Width = 80
- Height = 80
- Color = red