@Torsten asked about SF Symbols in a recent post.
With over 3,300 symbols, SF Symbols is a library of iconography designed to integrate seamlessly with San Francisco, the system font for Apple platforms. Symbols come in nine weights and three scales, and automatically align with text labels. They can be exported and edited in vector graphics editing tools to create custom symbols with shared design characteristics and accessibility features. SF Symbols 3 features over 600 new symbols, enhanced color customization, a new inspector, and improved support for custom symbols.
The SF Symbols app is a fantastic tool from Apple. SF Symbols 3, and older versions, are downloadable for free. Their primary target audience are Apple Developers but FileMaker users can take advantage of the resources too.
This small sample shows the style of symbols, basically what you see on all modern Macs and iOS devices.
A great feature of the app is that it allows you to configure the colour palette, line rendering, size, and other elements. This gives you the controls you need to integrate the symbols with your backgrounds and themes.
Here's how to use the app to get PNG and SVG icons into FileMaker.
After downloading via the link above, open the app and use the filtering tools to locate the symbol you want to use. From the "Edit" menu you have the option to "Copy image as..." and the options are PNG or SVG.
If you choose PNG, you can paste into a graphics program or you can use Preview.app to generate a PNG file from the clipboard. In Preview.app you simply select File->New from Clipboard, or use the keyboard shortcut ⌘-N. That generate a file from whatever image file format was on the clipboard which you can then export to disk in whatever image file format you prefer.
If you choose to copy the images as SVG you take a slightly different path. You can handle SVG in a text editor, rather than a graphics program. Just as before, you generate a new document and paste the clipboard into it and save the file.
That produces an SVG which renders perfectly - with one caution for FileMaker users. The code produced includes bounding rectangle that has to be deleted for use in FileMaker. If you do not delete the rect FileMaker will display a solid rectangle. Delete the rect and you get a perfect rendering of the icon, including the colours if you have opted to select a multicolour version.
The code below is the SVG output for the symbol Person with a Minus Badge. Which looks like this as a PNG.
Person with a Minus Badge
To have it display that way as an SVG in a Button Bar we have to edit the code. The first element of the <g> block is a <rect>. That <rect> has to be deleted.
Without any modifications the SVG will import into FileMaker and it often displays correctly in the button bar icon picker. However, the button itself will not display the image correctly. It typically displays as a solid rectangle or solid square. Multicolour icons may display an icon with the coloured badge sitting over the square.
Removing the <rect> fixes the problem.
SVG are light-weight images formats that scale gracefully to any size. Using them as your button icons gives your solution professional polish.
<?xml version="1.0" encoding="UTF-8"?>
<!--Generator: Apple Native CoreSVG 175-->
<!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.8164" height="24.9121">
<g>
<rect height="24.9121" opacity="0" width="21.8164" x="0" y="0"/> <!-- Delete this rect before importing to FileMaker -->
<path d="M11.0059 21.6602L19.4238 21.6602Q21.8164 21.6602 21.8164 20.0977Q21.8164 19.1406 21.2354 18.0566Q20.6543 16.9727 19.5459 16.0107Q18.4375 15.0488 16.8555 14.4434Q15.2734 13.8379 13.291 13.8379Q11.9629 13.8379 10.8154 14.126Q9.66797 14.4141 8.73047 14.9121Q9.0332 15.1562 9.31152 15.4346Q9.58984 15.7129 9.83398 16.0352Q10.5469 15.7031 11.416 15.5078Q12.2852 15.3125 13.291 15.3125Q14.9707 15.3125 16.2646 15.7959Q17.5586 16.2793 18.4473 17.0117Q19.3359 17.7441 19.79 18.5303Q20.2441 19.3164 20.2441 19.9121Q20.2441 20.0684 20.1611 20.127Q20.0781 20.1855 19.8926 20.1855L11.25 20.1855Q11.2402 20.5664 11.1816 20.9375Q11.123 21.3086 11.0059 21.6602ZM13.291 12.627Q14.4531 12.627 15.4102 12.002Q16.3672 11.377 16.9385 10.3369Q17.5098 9.29688 17.5098 8.03711Q17.5098 6.78711 16.9434 5.77637Q16.377 4.76562 15.4199 4.16992Q14.4629 3.57422 13.291 3.57422Q12.1387 3.57422 11.1768 4.17969Q10.2148 4.78516 9.64355 5.80078Q9.07227 6.81641 9.07227 8.05664Q9.08203 9.30664 9.65332 10.3467Q10.2246 11.3867 11.1816 12.0068Q12.1387 12.627 13.291 12.627ZM13.291 11.1523Q12.5781 11.1523 11.9775 10.7373Q11.377 10.3223 11.0107 9.61914Q10.6445 8.91602 10.6445 8.05664Q10.6445 7.20703 11.0059 6.52832Q11.3672 5.84961 11.9678 5.44922Q12.5684 5.04883 13.291 5.04883Q14.0234 5.04883 14.624 5.43945Q15.2246 5.83008 15.5811 6.50879Q15.9375 7.1875 15.9375 8.03711Q15.9375 8.89648 15.5762 9.60449Q15.2148 10.3125 14.6143 10.7324Q14.0137 11.1523 13.291 11.1523Z" fill="rgba(0,0,0,0.85)"/>
<path d="M4.96094 24.9121Q5.9668 24.9121 6.86523 24.5215Q7.76367 24.1309 8.45215 23.4473Q9.14062 22.7637 9.53125 21.8652Q9.92188 20.9668 9.92188 19.9512Q9.92188 18.9258 9.53613 18.0273Q9.15039 17.1289 8.4668 16.4453Q7.7832 15.7617 6.88477 15.376Q5.98633 14.9902 4.96094 14.9902Q3.94531 14.9902 3.04688 15.376Q2.14844 15.7617 1.46484 16.4502Q0.78125 17.1387 0.390625 18.0322Q0 18.9258 0 19.9512Q0 20.9766 0.390625 21.875Q0.78125 22.7734 1.46484 23.457Q2.14844 24.1406 3.04688 24.5264Q3.94531 24.9121 4.96094 24.9121Z" fill="#ff3b30"/>
<path d="M2.44141 20.5469Q2.19727 20.5469 2.02148 20.3662Q1.8457 20.1855 1.8457 19.9512Q1.8457 19.7168 2.02148 19.5361Q2.19727 19.3555 2.44141 19.3555L7.46094 19.3555Q7.70508 19.3555 7.88574 19.5361Q8.06641 19.7168 8.06641 19.9512Q8.06641 20.1855 7.88574 20.3662Q7.70508 20.5469 7.46094 20.5469Z" fill="#ffffff"/>
</g>
</svg>