SVG Icon Manipulation
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.
Comments
export
Matt
take a look at this to solve the export issue
http://radicalappdev.com/blog_02/
john
That's an awesome "Workaround Pro" technique!
Ah, thanks for sharing! Yep, there it is, hidden down in some little crevice of FileMaker's innards.
If only they would address some of theses type of issues. We did just get confirmation that FileMaker is going more "dev" oriented because of the Script Workspace, hopefully they'll continue and give us encodings and line endings.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Missing Page
Would love to see the implementation of the export you pointed to here but it looks like the blog is gone. Possible redirect anyone?
Simpleton
SVG processing
This was timely as I am presenting at our UK devcon next week on button bars and SVG
What I have discovered is that the wisdom of just adding class="fm-fill" to the file is in fact not all the story
By scraping the XML and then doing Hex2Text on the 3rd $/Stream/Hex - when you copy a button with a 'fm-filled' attribute you have added, then FIleMaker also does some things to the file, like adding an outer <g class="fm-fill"> to some files where there was none.
That caught me out when trying to replicate Claus' technique of building a button bar to paste from a set of stored SVG text fields.