Search code examples
svgfilemaker

How must this SVG file change to allow FileMaker to alter its color?

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.

Solution

  • Assuming you want the horizontal bars to be colored in FileMaker, you need to convert the stroke to a filled path or a rect.

    Something like this:

        <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="72px" height="47px" viewBox="0 0 72 47" overflow="inherit" xml:space="preserve">
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="Page-1">
    <g id="Group" transform="translate(4.000000, 3.000000)">
        <rect x="-4" y="35" width="72" height="9"/>
        <rect x="-4" y="16" width="72" height="9"/>
        <rect x="-4" y="-3" width="72" height="9"/>
    </g>
</g>
</svg>

    You dont "need" to add the class="fm_fill" per se, but adding a raw SVG does not show the icon in the icon selector, just a blank entry. If you add the class="fm_fill" and a default fill color, you will see the icon in the icon selector in the default fill color, making it much easier to work with.

    Like this:

    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="72px" height="47px" viewBox="0 0 72 47" overflow="inherit" xml:space="preserve">
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="Page-1">
    <g id="Group" class="fm_fill" fill="grey" transform="translate(4.000000, 3.000000)">
        <rect x="-4" y="35" width="72" height="9"/>
        <rect x="-4" y="16" width="72" height="9"/>
        <rect x="-4" y="-3" width="72" height="9"/>
    </g>
</g>
</svg>

    In the following screenshot, you can see both variants. The left blue icon is just your raw converted icon, then colored blue in FileMaker. It is not visible in the icon selector, it is the blank entry next to the selected icon. The selected red button's icon is colored red in FileMaker and has the class and default fill applied and thus is visible in the icon selector.

    Hope this helps.

    enter image description here