AnsweredAssumed Answered

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

Question asked by chivalry on May 30, 2017
Latest reply on May 31, 2017 by user19752

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.

Outcomes