Fill color styles

In an SVG image, a color can be applied to the fill property for the following SVG shape elements: rect, circle, ellipse, polygon, and path. As a result, SVG image icons can be saved to FileMaker Pro themes and their appearance can be dynamically updated. To apply color to an SVG element, ensure that the fill color is not explicitly set on the element in the SVG image file.

FileMaker Pro adds a top-level <g class="fm_fill"> element to the SVG image before the image is saved in the FileMaker Pro file. The fm_fill property indicates that the SVG element's default fill color property is specified by FileMaker Pro, either by the layout theme (through the Inspector in Layout mode) or as a result of conditional formatting. Because an element's fill property is inherited from its parent, all descendent elements of <g class="fm_fill"> will automatically inherit the default fill color.

Example:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" 
    height="200">
  <!-- NOTE: The fill color for the rectangle is not explicitly specified. -->
  <rect x="50" 
      y="25" 
      rx="5" 
      ry="5" 
      width="100" 
      height="125" />
</svg>

FileMaker Pro then generates this SVG image before saving to disk:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" 
    height="200">
  <!-- NOTE: The top-level group will have the default color fm_fill (from the layout theme, the Inspector, or conditional formatting). -->
  <!-- All descendent elements of the top-level group will use this default fill color, unless explicitly overridden. -->
  <g class="fm_fill">
    <!-- NOTE: No fill style color was specified; the rectangle has a fill color. -->
    <rect x="50" 
        y="25" 
        rx="5" 
        ry="5" 
        width="100" 
        height="125" />
  </g>
</svg>