SVG Icon Manipulation

Download Video

Creating a user interface, which looks good at any resolution, was never a concern before there were smartphones. It was when they started packing more and more pixels within the same area that graphics started having issues. With the popular formats of PNG and JPEG, you’re limited in terms of displaying them. The limit is the maximum size/resolution at which the file is exported at. From there, you can only go down, scaling up will cause the obvious pixelation we’re familiar with. So it’s always been a fine balance between the size of the file and the resolution desired.

With FileMaker 14 and higher, they added support for the popular SVG file format. It’s actually not a file format as much as it is a text format. You see, SVG is just XML which can be parsed and rendered as needed. With FileMaker adding support for SVG within buttons, we can now take advantage of this very slim format.

The benefits of understanding how FileMaker has implemented support for SVG allows for all kinds of creative tricks. With the right settings, you can optionally change the color of an SVG icon programmatically. If you know you can hide parts of that icon then you can do even more UI trickery.

This video is all about understanding how you can manipulate and change the text content of an SVG file. It requires some confidence with text parsing, but once you get the file into a FileMaker field, you can manipulate to your heart’s content.