11 Replies Latest reply on May 31, 2017 7:39 PM by user19752

    How must this SVG change to allow FileMaker to alter it's color?

    chivalry

      I have an SVG file generated by Sketch that looks like this:

       

      <?xml version="1.0" encoding="UTF-8"?>

      <svg width="72px" height="47px" viewBox="0 0 72 47" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

          <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->

          <title>Group</title>

          <desc>Created with Sketch.</desc>

          <defs></defs>

          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">

              <g id="Group" transform="translate(4.000000, 3.000000)" stroke="#000000" stroke-width="9">

                  <path d="M0.5,39.5 L63.5,39.5" id="Line"></path>

                  <path d="M0.5,20.5 L63.5,20.5" id="Line-Copy"></path>

                  <path d="M0.5,1.5 L63.5,1.5" id="Line-Copy-2"></path>

              </g>

          </g>

      </svg>

       

      I'm trying to edit it in a text editor so that when I import it as an icon button, it can be colored by FileMaker.

       

      I have repeatedly read that adding `class="fm_fill"` is what's required. I've tried adding this to the outside `<g>` tag, the inside `<g>` tag and to each of the `<path>` tags. I've tried removing superfluous attributes, such as the outside `<g>` tag's `stroke` and `stroke-width` attributes. I've tried consolidating the `<g>` tags and changing the `fill` attribute in the outside `<g>` tag. I've also tried removing the `<path>` `id` attributes and using self-closing `<path>` tags.

       

      My test is a simple button with an icon that I first color. Then I add the edited SVG and see if it retains the color. So far I haven't been able to get it to do so.