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:
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.
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.
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!