I'd recommend looking at this site: Create Your Own FileMaker 14 Icons - FileMaker Examples
I don't think the size is that much of an issue, because the size gets re-set in FMP.
The important bit is taking out the colour fill value: http://filemakerexamples.co.uk/wp-content/uploads/2015/05/clip_8.png
This way FMP can put in the specified colour depending on the values set in the inspector.
I think this was an oversight. Like you I've tried a few changes to get them to show in preview.
Thanks for the links.
I've tried numerous SVG editors and I've found that it is usually necessary to tweak the svg code in a text editor. Removing any fill attributes does ensure that you are able to manipulate the colour of the icon. However, the thumbnails displayed in the icon picker for the inbuilt icons are easy to see. Any icons that I load appear as black on a charcoal black background. There's not enough contrast for me to see the icon.
I suspect that there is a problem here because I have copied some of the inbuilt icons onto my desktop, renamed them and tried importing them. They suffer the same fate - an indiscernable icon.
This is how my svg icons appear.
I'm using FMP14A on Windows 7.
The first 3 in black are the ones I had inserted.
This is the code I used for the first image:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="imgView" x="0px" y="0px" width="256px" height="256px" viewBox="0 0 75.936 75.936" style="display: block;" xml:space="preserve" class="detail convertSvgInline replaced-svg" data-id="48555" data-kw="ranking" fill="#000000">
<path d="M62.271,38.306H50.4v-5.153h-8.961V17.249h-3.135l-4.257,2.017l0.672,2.688l2.912-1.345l0,0v12.544h-12.77v10.083H17.92 v-2.912h-6.049l0,0l1.567-1.121c2.24-2.016,4.256-4.255,4.256-6.72c0-2.912-2.016-4.928-5.6-4.928 c-2.24,0-4.032,0.672-5.152,1.567l1.12,2.688c0.896-0.672,2.017-1.345,3.36-1.345c1.792,0,2.688,1.12,2.688,2.24 c0,1.792-1.792,3.584-5.15,6.719l-2.018,1.793v2.24H0v15.23h25.312h25.312h25.312V38.531 C75.711,38.306,62.271,38.306,62.271,38.306z" style="" fill=""></path>
<path d="M68.768,33.826c0-2.017-1.567-3.584-3.359-3.809l0,0c2.018-0.672,2.912-2.017,2.912-3.584c0-2.24-1.793-4.032-5.15-4.032 c-2.018,0-4.033,0.673-4.93,1.12l0.673,2.688c0.673-0.447,2.017-0.896,3.358-0.896c1.568,0,2.24,0.672,2.24,1.567 c0,1.345-1.568,1.792-2.912,1.792h-1.344v2.688h1.566c1.568,0,3.137,0.673,3.137,2.24c0,1.12-0.896,2.017-2.912,2.017 c-1.566,0-2.912-0.672-3.584-0.896l-0.672,2.688c0.896,0.672,2.688,1.121,4.704,1.121C66.305,38.753,68.768,36.738,68.768,33.826 z" style="" fill=""></path>
I think for now we are stuck with the dark grey on charcoal appearance of imported icons in the icon chooser (on Mac OS X at least - it looks like it's different on Windows). I guess it's so we can differentiate between the built in icons and our imported ones, though I agree the dark grey on charcoal perhaps isn't the best choice... Screenshot from FMPA14 on El Capitan attached...
Nope... not correct Sky
if you include
fill = "#E6E6E6" class = "fm-fill" in the top level group object, or at the end of the SVG tag that will work
The icon will then be grey in the picker, and grey by default on the button, but can then be styled by selecting a colour for it on the inspector tab.
Malcolm, the image doesn't have to be 24 * 24 all
SVG is a vector format so it could be a 300*300 pcx canvas and it would scale perfectly to whatever size you choose to display it in the button
Nice one... thank you... I didn't know about that... Actually I never really knew anything much about SVG before using it in FM14...
I had a go adding your code to the export icon I copied from FM's built in library, and changing the colour value a couple of times and now see different colours showing up in the icon picker... Of course, not really relevant to their use in buttons etc, as the colours get defined in the inspector as appropriate for normal, hover, pressed states etc.... But at least does make them easier to see in the icon selector...
The new SVG code looks like:
<?xml version="1.0" encoding="utf-8"?>
x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill = "#E6E6E6" class = "fm-fill">
<polygon points="24,23.998 0,24 0,13.953 3.6,13.949 3.6,20.4 20.438,20.418 20.438,13.953 24,13.951 "/>
<polygon points="9.656,9.025 9.656,15.576 14.168,15.576 14.168,9.025 19.124,9.025 12,0 4.877,9.025 "/>
You're right, the SVG doesn't need to be 24x24. I've just tried it a large size and I do get an icon.
I was having trouble getting an icon to appear in the icon picker. The first time that I saw anything in the icon picker was after I resized the artwork to 24x24. I did that because I was copying the bulit-in set and they are all at that size. Anyway, the coincidence fooled me.
There's much to take into consideration
The SVG will have a 'canvas' size
But also a view box size, which hopefully is the same dimensions but not neccessarily
And then the SVG may be drawn outside of the background meaning that it will not be visible in the icon finder, and possibly offset in the button