SVG Icons in FileMaker – “An Introduction”
By: Robert Hritz
Level: Beginner
Whether back button arrows, refresh buttons, or a thumbs up: icons are a powerful force in today’s software solutions. FileMaker solutions are no different in the variety of display options for your specific needs. This article is going to focus on the newest addition: SVG Icons.
SVG Icons, aka Scalable Vector Graphics, were first introduced as a supported format for use in the button and button bar objects in FileMaker 14. Developers will find two major benefits using SVG over other image formats. SVG icons are defined by vectors and geometric shapes opposed to being mapped bit by bit like other image formats such as .jpeg, .png, or .gif. This means SVG icons will never lose detail when resized as opposed to other formats that may become pixelated if stretched. This is particularly pertinent as developers have to contend with a variety of screen sizes. Instead of having to keep and manage multiple versions of the same icon for different resolutions, you can have one icon to rule them all.
The other major benefit is that since SVG’s are defined as an XML object, different color states can be applied to the icon using built in FileMaker features. This means you can edit the color of the icons within FileMaker! Different colors can even be applied to the pressed, hover, focused, active and inactive states for a specific icon that is independent of the text and button colors. This opens the door for new types of aesthetics and visualizations in your FileMaker solution. FileMaker also offers an easy interface for including these icons and they even provide a starter library of SVG icons to choose from. This interface is not only fast and convenient, but also provides a simple way of adding and manage new icons to your solution; so you can import and easily manage icons from different sources throughout your solution. By replacing old buttons and icons with SVG icons you can provide your solutions with a fresh look and feel that users have come to expect!
