Recent Articles
Article #137 Download sample file
   Sample file includes multi-color Halloween SVG examples
Custom SVG Graphics in FileMaker

If you are creating your own SVG graphics for use with native FileMaker buttons, these tips will help.

The SVG graphics in this example were first created in Adobe Illustrator as SVG files, and then the files were opened in a text editor and the XML was modified manually.

Use these tips to accomplish the following:

  • Keep the default gray color in the Button Setup dialog
  • Make the icon color customizable in the Appearance Inspector
  • Make the icon scalable in the Button Setup dialog

Grammar matters

See the example XML below, which is code for a simple rectangle graphic. Note that there is no color style inside the <rect> tag, and that the <g> (group) tag includes the fm_fill class with a fill color specified. This fill color, #9c9c9c, matches the gray fill color of the graphics in the Button Setup dialog in FileMaker.

The width, height, and viewBox attributes are important. The Illustrator artboard doesn't get converted properly when saving in SVG format. Copy the entire svg tag in the example exactly, and then modify width, height, and viewbox to fit your SVG graphic dimensions.

<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="">
<g class="fm_fill" fill="#9c9c9c">
  <rect x="-8" y="9" width="17" height="17" transform="rotate(-45)"/>

View SVG file

This next example is more complex, but the concept is the same. Illustrator created the XML code for me, but I modified it by removing any color styling and updating the <g> tag.

View SVG file

Also note that stroke tags aren't supported in native FileMaker SVG buttons, so you'll want to convert stroke objects to fill objects in Illustrator before saving in SVG format.

Hope this helps!

Tom  Aug 09, 2019
Thanks for your description!