FileMaker Pro 14 SVG Grammar for Button Icons

[Ocean West]

Helpful information for adding your own SGV icons 

https://fmhelp.filemaker.com/docs/14/en/svg/

[comment]

That is remarkably well-written document. I wish the help were written at that level.

Edited May 13, 2015 by comment

[pixi]

At least there is hope! :o)

[voltron2112]

Hey all, thanks for the info. It was helpful for setting up a little SVG Icon manager that I think a lot of people might find super helpful. If you want to check it out, the file contains around 4,000 icons and could be a very useful tool for developing I hope!

You can get more info and download the file from here: http://www.indats.com/2015/06/15/indats-icon-manager/

 

[LaRetta]

Wow.  Much appreciated!   

[pixi]

 

Hey all, thanks for the info. It was helpful for setting up a little SVG Icon manager that I think a lot of people might find super helpful. If you want to check it out, the file contains around 4,000 icons and could be a very useful tool for developing I hope!

You can get more info and download the file from here: http://www.indats.com/2015/06/15/indats-icon-manager/

 

Hi voltron2112

thanks for sharing your file. Some thoughts I'd like to share here:

- Why are there sometimes "Single Step" and not "Perform Script" only? I would help much to find all actions in the Script Workspace

- While the Tooltips are self-explanatory I guess it may help to get more info somewhere what the button does (e.g. why becomes a SVG kind of reset when it has grown a certain size)

- Displaying some informations about the icons itself (current size etc.) might be a good idea.

- Adding tags in an easier fashion would certainly help to better handle the icons.

- Importing own SVG icons is definitely a plus.

 

Just my 2 Cents

:o)

Edited June 15, 2015 by pixi

[voltron2112]

Hey Pixi, thanks for the suggestions.

I thought I had all the buttons tied to "Perform Script" and not Single Steps. The only one I can find is setting a favorite, which your correct I should change it. 

I'm not sure what you mean by the SVG resetting if it is grown to a certain size? It might be a Mac bug or something. I'm mostly developing on a PC. I'll have to pull out my Mac and test it a bit more on it as windows explorer and safari render very differently.

I originally was going to show the icon sizes, but they don't really mean anything. Some have huge numbers, and some have tiny numbers but they all display exactly the same in filemaker, so it was kind of confusing to show the numbers. The only important thing was how much padding they have, and generally you don't have to edit them at all. 

I really like the idea of adding new Icons, it honestly didn't even cross my mind, but that would be very useful. Thanks again for your suggestions!

[Art Carter]

I can't get FM to accept a .svg file to place in a button. Selecting a button, in the Inspection Mgr -> Appearance -> Graphic -> Fill -> Image all the files are grayed out. I even downloaded inDats Icon Manager and exported a couple icons and tried them without luck. Am I doing something wrong?

Thanks

[voltron2112]

Hey Art, svg's are a new feature to Filemaker 14, so if you are using Filemaker 14, then to add svg's you need to go through the button setup dialog and then clicking the plus button to add new icons to the list.

[Art Carter]

Thanks

[Dr. Evil]

Would anyone like to shed some light on how to create custom icons that are FileMaker friendly?

I work with Adobe Illustrator, and can save file as .svg, but when I import to FM's button setup the icon does not behave properly. Scaling, centering, etc.. does not work.

Thank you

[Dr. Evil]

Ok... dug and dug, tested and tested... finally got the winning combination.

When saving .svg from Adobe Illustrator, uncheck "Responsive"!

The biggest mistake I was making was when saving Adobe Illustrator (.ai) file as a (.svg) file, I was leaving the dialogue option "Responsive" checked. It was checked by default on my system... sounded like a good thing, so I left it. But it causes very weird behavior when brought into FM.

By digging around looking how to solve this weird behavior I had also learned (from this forum) how to properly colorize .svg file for FM.

Then you have to edit .svg file code to give FM control over the color. Replace [fill="#FFFFFF], or whatever Hex Color you worked icon in, with [class="fm_fill"] using a Code Editor, I use a free program called "Atom" https://atom.io

Note, imported custom icons will show up black in FM button set up dialogue.

See attachments for a clear picture of the above.

Hope this is a one stop fix for anyone with the same problem I had!

 

Edited July 27, 2015 by Dr. Evil
Corrected after Comment's notes.

[comment]

Then in order to give FM control over the color you have to add [class="fm_fill"] in the code

The document referenced in the OP explains that an element should have either a fill attribute or a class="fm_fill" attribute - not both as shown in your code for the path element.

[Mark Scott]

The document referenced in the OP explains that an element should have either a fill attribute or a class="fm_fill" attribute - not both as shown in your code for the path element.

Hello comment,

I agree that the "SVG Grammar" white paper recommends "ensure that the fill color is not explicitly set on the element in the SVG image file" and that "FileMaker Pro adds a top-level <g class="fm_fill"> element to the SVG image before the image is saved in the FileMaker Pro file."  (That is, FileMaker will not automatically add the class="fm_fill" property if the fill="#XXXXXX" property is not first removed, as confirmed in my testing.)

If, however, upon opening the SVG file in a text editor (which you'll need to do to remove the fill color anyway*), you leave the fill color property in place and simply add the class="fm_fill" property immediately after, then the icon will display white (assuming a fill color of #FFFFFF), rather than black, in the Button Setup HUD (similar to the built-in icons) and still be able to be styled through the Inspector or conditional formatting.  Emory Brown, over at dbservices, has a nice writeup on this topic.

(*DataManix's SVG Gallery Tool automates the task of inserting the class="fm_fill" property into the correct position, obviating the need to open the SVG file(s) in a text editor.  It can process entire folders of icons in one fell swoop.  Thanks to Claus Lavendt for this tool, and, of course, to voltron2112 for his Indats Icon Manager file as well.)

[Dr. Evil]

Interesting, thanks for the links, Mark!

On side note: I'm not an expert at all, but in some testing I've done with custom .svg icons I have found that icons render cleaner if you build them and use them at a divisible size. ex. an icon built at 20px can be used at 10px, 20px, 30px and so on. So if used at 22px edges will fuzz a bit.

On another note, an icon that looks good at 10px does not necessarily look good at 40px and visa versa, particularly when both occur on a single layout. I mean, obviously the same icon sized at 10px and sized at 40px will be scaled perfectly, but in my opinion you loose a bit of refinement. Being when an icon is simply scaled up or down, the gaps and weight of the design change and loose cohesion.

Also, positioning the icon and text in a button seems to be a bit awkward, but maybe just because its new to me and I have not worked it enough.

These are just a few of the challenges that have kept me from fully converting my solutions to use the new .svg icon feature.

From what I understand the .svg route is very small in code weight and also is very remote/mobile device friendly. I'm currently just using native fm shapes grouped together for my icons/buttons which is a bit unwieldy to say the least.

Edited August 11, 2015 by Dr. Evil
additional thoughts

[Mark Scott]

Interesting, thanks for the links, Mark!

On side note: I'm not an expert at all, but in some testing I've done with custom .svg icons I have found that icons render cleaner if you build them and use them at a divisible size. ex. an icon built at 20px can be used at 10px, 20px, 30px and so on. So if used at 22px edges will fuzz a bit.

Great tip!  Vectors scale fine, but if there are horizontal or vertical edges in the design, those may fall between whole pixels upon scaling and thus get antialiased.  It's not really visible on a retina display, but can be noticeable on a non-retina device.  For the same reason, I find that it's also worth turning on "pixel view" in my illustration app to make sure edges fall cleanly on the grid (irrespective of whether I'm exporting as PNG or SVG).

 

Also, positioning the icon and text in a button seems to be a bit awkward, but maybe just because its new to me and I have not worked it enough.

One thing that'a a bit hidden is that, in addition to being able to control overall padding around text and icon by selecting the "Button Bar: Segment" component, you can control the padding between text and icon by selecting the "Button Bar: Icon" component.  Not sure if that helps, but worth remembering.

From what I understand the .svg route is very small in code weight and also is very remote/mobile device friendly.

Indeed!  But somewhat counterintuitively, the rendering performance is actually better for PNGs, as they are already rasterized, whereas the rendering engine has to parse the vector data in SVGs in order to rasterize it for display.  That point was made by Andrew Phan in his DevCon session, not to discourage using SVGs (and thus losing the dynamic styling capabilities and resolution independence of the SVG format) so much as to discourage designing overly complex SVG icons.  (Surely it's a minuscule performance hit in most cases, anyway.)  Once FileMaker rasterizes a given SVG, however, they attempt to cache the image data for further use and optimal performance.  All in all, SVGs are clearly the way to go, from 14 on.

[Dr. Evil]

Mr. Scott!.. I'm armed and dangerous with this great info. Thanks again!