By: Robert Hritz
Level-Intermediate
To close out our three-part series on SVG icons in FileMaker we wanted to give some helpful tips for formatting your SVG icons to ensure they display properly in FileMaker. Some of these tips are straight from the FileMaker website, while others we have figured out on our own. If you don’t know what an SVG icon is or don’t understand how its formatted check out our other blog posts at the bottom of the page.
We know the color of SVG icons can be edited within the Inspector in Layout Mode, and can even have different colors for hover, pressed, focused, active, or inactive states. However, FileMaker will only apply these color changes to parts of the icon that have no color definition in the SVG text via the fill attribute. So if the icon is not displaying the proper color defined in the inspector, removing the fill attribute in the icon text is the fix.
The second tip is in order for an SVG icon to render properly in FileMaker, it needs a width and height. An SVG icon without a width and height specified in its SVG tag will appear disproportionally sized and will not resize properly. To fix this, open the icon in a text editor and add width and height attributes to the SVG tag. It doesn’t really matter what the values are as FileMaker overrides the sizing with its own formatting options in the button setup; it just needs a width and height defined initially.
In addition to this, you might find that the SVG icon you are using is too small relative to the built in sizing features in FileMaker. Although SVG icons are perfectly scalable, the built in sizing features in FileMaker do have a size max and min. So it’s possible for you to max out the icon size using FileMaker’s built in sizing options, and still have an icon that’s too small for what you are trying to do. To fix this you can use the viewBox attribute, which will allow you to add further scaling to the icon that is not affected by the built in FileMaker resizing.
Please take a look at Part 1 and Part 2 of this series via the links below. Happy coding!
https://crossit.wpengine.com/an-intro-to-svg-icons-and-filemaker/
https://crossit.wpengine.com/svg-icons-in-filemaker-part-2-understanding-your-svg-icon/
