Hey everyone, I love how open the Filemaker Community is, and how much is shared freely, so I wanted to contribute. I created a database to manage SVG icons. The icons are all royalty free provided by Syncfusion and there are about 4,000 icons, all with search tags to make finding them super easy. 

You can find out more about the file, and download it here: http://www.indats.com/2015/06/15/indats-icon-manager/ 

Please let me know any feedback you have on the file, thanks!

Completely ultimately utterly sick, Voltron. 

Is Voltron your real name?  I ask because I like it.  It sounds like you should be a leader from a galaxy far away.

question coming: when I add one of your 'svg' icons it shows and stays even after I close the file but when I open the file again, it has turned into a solid block and does not get added so I can select it again later.  This is on Mac.  Do you know why this happens and how to make it stay along with the original icons there?  regardless it seems to stick in the button bar where I use it so that is good.

Hey Charity glad you like it! Voltron is unfortunately not my real name, If it were I assure you I would definitely be a leader from a galaxy far far away! 

I just tried what you described on a Mac and PC, and they both show up fine after closing and reopening. I even tried deleting the SVG from it's folder and it still showed up in the icon picker. I'll see if I can think of any reason why this might be happening on yours, thanks for the feedback!

Some of them appeared later.  Not sure why.  I would not waste your time on me.  It is probably me.  I am still pretty clueless in everything.  Also do you know how to create an empty one?  I mean, if I want a gap in the button bar then it seems i need to make an invisible icon to take up the space.  

Your file absolutely is the bomb.  It is amazing you shared this.  I plan to add pictures once I figure out how to do it.  "svg" is strange and not like regular png pictures. 

I read somewhere but not sure where now that if you add an icon while served they will not stay.  I do not remember now whether I was accessing my test served version or the local one because I jump around a lot but I suspect that is why some would not stay when told.

I am still searching for method of creating an empty transparent icon so I can create a spacer in the button bar.  If I try to make that strange block icon transparent, they all go transparent and that is not what I want so I am pretty sure I need to create a special icon to maintain that space.

Your file rocks my universe and you did it on a weekend.  blimey.

Oh that might be it. I haven't really tested adding svg's to already hosted files. Honestly I'm finding Filemaker 14 pretty buggy so I haven't been using it a ton, hopefully they fix a lot of the bugs soon. I don't know if anyone else is having problems with random scripts jumping around in the script workspace but it has been the bane of my existence! 

I figured out how to get a transparent svg icon for you. Not sure if it is the correct way to do it or anything but it seems to work for me. If you want to have the blank icon available in the icon manager you can just manually go to the "Utility_Icon" layout and adding a new record and setting the fields like the attached image shows. The only really import fields to set are highlighted. 

And if you just want the svg file I've attached that as well.

Hopefully that helps! Thanks again for the kind words.

 

Blank.svg

Edited June 19, 201510 yr by voltron2112

I had actually created a blank spacer icon by accident by inserting an invalid image of some sort and I had begun to use the invalid icon as a spacer which allowed grouping of similar icons, appearing as separate bars (but still allowing full resizing.  But in a new file, I was unable to replicate my blunder and custom icons are file-specific.  

Thank you for providing me the answer!  Blimey is right!

Edited June 20, 201510 yr by LaRetta

I am finding that when one of your custom icon svg files is imported into another file, the button does show up in the button setup palette; and remains there. But it shows black against the very dark grey of the button setup tool, so it is very hard to see the icon. Do you know why that is?

 

Edited June 24, 201510 yr by BruceR

Yes, custom icons are black so you can tell the custom from the standard.  You can't delete the standard.  I sure wish they would have taken this a single step forward and provided us a way to establish Favorite sets or otherwise organize them though.

And YIKES!  That looks terrible!  I'm on Mavericks and I can see them clearly, unlike that screenshot you provided!

Edited June 24, 201510 yr by LaRetta

They show up as black on windows too, but windows has a white background so they're really easy to see. I think it's probably just another quirk with FMP 14 that they hopefully fix soon.

Also If you add them to the DefaultGlyphs folder in Filemakers system folders they show up as just another icon in all files, and they show up as grey just like a default, but it's probably not the best idea to mess with system folders.

On Mavericks they are black also but the background is light grey.

I was worried about using the custom icons in different files - it seemed we would need to import them into each new file where we wished to use them but I found out that I can load a button bar with my custom icons (and keep it on Admin layout) and then copy/paste the button bar into the new file and the new file inherits the custom icons brought in that way.

Edited June 25, 201510 yr by LaRetta
copy/paste didn't work so I've attached the png file

I did a video with Richard Carlton http://filemakervideos.com/filemaker-14-svg-icon-helper-tool-filemaker-14-training/

about SVG files and created a small helper tool. In that video, I explain why I set the fill color to white, so that the icons appear nicely in the FM icon palette. You can see in the helper tool, how I did it and change to whatever you like, since it is completely free and unlocked.

Hey LaRetta I really love that idea of using a button bar to import icons from solution to solution. That is a much better way to transfer an icon library from one project to another! Thanks for sharing.

Clause thanks for the tip about changing the fill color but still making the icons color changeable in FM I didn't know you could do that, but you might want to reconsider choosing white as the default fill. I know that the overwhelming majority of FM Developers use Mac, but on a Windows PC white is invisible as you can see in my screenshot. But like you said I'm sure I could manually change the fill to whatever color I want. Thanks!

Yeah, my tool for converting SVG files is totally free and open and you should go into the simple script that modify the SVG files. Here you can easily select another fill color that suits you.

Must admit that I have not checked this on windows yet, but from your screenshot, I can see that white is not the best windows fill color...

Regarding glyphs, like LaRetta have already discovered, as soon as you paste a button/buttonbar into a file, the SVG files, that is contained within that/these objects, will be copied to the file itself, from where it will show up in your icon palette.

So, you can create e.g. buttoners with all your favourite icons and then paste a buttonbar into new files. Just delete it again and the icons stays within the FileMaker file.

I note that Voltron's Icon Manager outputs files with no fill property at all. And therefore Claus's SVG Helper displays an error because it looks for the fill tag and doesn't find one.

Hi Bruce

You are absolutely right. My tool assumes that the SVG files do have a fill property. That is why I did put a big warning that you need to edit the script, that process the SVG files and make a test. The tool works on the icon set, that we included in the helper file. But SVG is or can be many things, so it is not a "one fits all".

I note that Voltron's Icon Manager outputs files with no fill property at all. And therefore Claus's SVG Helper displays an error because it looks for the fill tag and doesn't find one.

Hey Bruce, this should help you out. 

Replace the calculated text field Icon::Generated_SVG with the calculation below. Then you need to replace field contents of the same field with the same calculation below, and all of the icons in my program will turn red, but still be able to be styled by Filemaker.

"<?xml version=\"1.0\" encoding=\"utf-8\"?>
¶<svg version=\"1.2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"
¶	 x=\"0px\" y=\"0px\" width=\"50px\" height=\"50px\" viewBox=\"" & X & " " & Y & " " & Width & " " & Height & "\">
¶<path fill=\"#FF0000\" class=\"fm_fill\" d=\"" & PathData & "\"/>
¶</svg>"

You can replace #FF0000 with any color you want (Also works if you just type in css name colors like "blue"), but If you did white they wouldn't show up in my programs web viewer, and if you did black obviously they won't show up well in your button icon picker, so red is a good all around color that should work well for everything. I'll think about adding this by default if I ever get around to updating the file.

Claus: actually, the icons included in your SVG Helper do not have a fill property.

Thought they have a fill-rule property. Here is the XML from one icon:

(we'll see if it survives when I submit this reply)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" overflow="visible" enable-background="new 0 0 40 40"
     xml:space="preserve">
<defs>
</defs>
<polygon fill-rule="evenodd" clip-rule="evenodd" points="33,18 15,18 23,10 17,10 7,20 17,30 23,30 15,22 33,22 "/>
</svg>

FYI, an SVG shape that has no fill attribute is black:
http://www.w3.org/TR/SVG/painting.html#FillProperties

 

No fill = black.

Yes; but... scripts in the SVG Helper Tool file being discussed REQUIRE a fill attribute.

And the icons distributed with that file are claimed to be compatible with the scripts.

No fill = black.

Yes; but... scripts in the SVG Helper Tool file being discussed REQUIRE a fill attribute.

Sorry for not making that clear - I was referring only to the SVG standard.

BTW, Filemaker only implements a part of the standard. For example, fill-rule="evenodd" will be ignored and the default fill-rule="nonzero" will be applied:
https://fmhelp.filemaker.com/docs/14/en/svg/

For example, fill-rule="evenodd" will be ignored and the default fill-rule="nonzero" will be applied:
https://fmhelp.filemaker.com/docs/14/en/svg/

This becomes more important when designing your own icons in Illustrator, Bohemian Coding's Sketch, or the like.  (Most commercial icons probably were designed to render properly with non-zero winding, although that's a bit of a guess on my part.)

If a custom-designed icon that looked fine in your vector illustration program seems to lose its hollow areas (i.e. "donut hole" portions of the glyph become filled), it probably is because of the non-zero winding rule being used. You can preview how an icon will look in FileMaker before you export it from your drawing application by making sure that you specify non-zero winding rather than even-odd in the application's inspector (or somewhere else in the respective app'n).  If the holes appear filled, then select one, but not both, of the paths that make up the compound shape and reverse its path direction (again, either in the inspector or via a menu item, depending on the application).  That should fix it, and remove the issue when imported into FM.  The even-odd rule, in contrast, doesn't depend on path direction, hence a compound-path icon that may look fine in, say, Illustrator, but not in FileMaker until the path directions are fixed.

BTW, thanks Voltron and Claus for the wonderful tools!!!

Mark

I am trying to use the SVG Helper Tool. I have imported my icons and selected the ones that I want to use in my gallery. I am on the last step which is supposed to create a button bar with my selected icons. When I paste the contents of the clipboard into my layout I get a rectangle that says "unknown object". When I create a button I am not seeing any of the new icons for me to choose from.

 

Any help would be greatly appreciated.

 

Thanks.

"unknown object" is shown, if you are trying to paste objects from later versions into previous version.

In this case, make sure you are pasting into a solution, that is open in FileMaker 14 - as the object you are trying to paste from the SVG Gallery Helper tool is a buttonbar object.

When I suggest the above, it is due to the fact that you could easily mix up the versions of FM, if you, like me, are working with multiply FM versions.

If you are trying to paste into a solution, open in FM14, it sounds like there is something wrong with the format of your SVG icons. First try to only find a single icon and try to see if that works. Some SVG icons are very complex and they can fail to be used by this technique.

I am using FileMaker Pro Advanced 14.0.3.

I just did a test with a single icon and I am getting the same error.

Edited March 13, 20169 yr by HALBURN

Ok, then it must be a problem with your SVG icons. (as I assume that you have installed the BaseElements plugin correctly)

There should be an icon package within the SVG Gallery Tool, that you can test with. Try to follow the instructions to import those into the gallery part and test with an icon from that set. If a single icon from that package work as expected, try to look at the code and compare to your own icons.

The tool is working correctly for a lot of other developers in our community, so the tool itself should be working. Therefore, I am convinced that it is a problem with your icons. However, SVG can be complex and the format can contain several things, so it is not easy to just point directly to what the issue could be. (other than what I have suggested already)

Hi Claus,

I tried another set of icons and it worked.

Any idea why the attached icon will not work?

Thanks.

 

custom-5.svg

The "custom-5.svg" icon is part of a icon font set that I am currently using in a FileMaker solution.

Your file "custom-5.svg" opens fine in my web browser; FireFox DevEd

Edited March 13, 20169 yr by ggt667

Can't pinpoint your problem, but try to read up on FileMaker's document on supported elements in the SVG format;

 

https://fmhelp.filemaker.com/docs/14/en/svg/#FileMakerPro14SVGGrammarforButtonIcons-<path>

The link in the initial post for the solution location changed but I found it here...

Click here

Whew!

Edited April 20, 20169 yr by Paul Webb

Hello Paul,

 there are about 13 links on this page, you should let people know what link was broken so I can be fixed.

 So that others will know this for the link to the original file.

33 minutes ago, Lee Smith said:

Hello Paul,

 there are about 13 links on this page, you should let people know what link was broken so I can be fixed.

 So that others will know this for the link to the original file.

Sorry about that. Post updated. 

So this IS an old thread, but still valuable! Is there a way to IMPORT the SVG files (a folder) that we can find "out there", so we can study them and verify that they are FMP-icon-ready?

Thanks!

http://thebrainbasket.com/?p=404

I don't get it; How do you import the icons to your own solution?

Do I really need to edit them all one by one?

Hi Carlsson,

The video by Claus and Richard is very helpful, at least is was for me.

4 hours ago, carlsson said:

I don't get it; How do you import the icons to your own solution?

Do I really need to edit them all one by one?

No, you don't. The tool creates files on your hard drive, you can select one from that folder.

I usually do it a different way because I convert the images or import them.

I import a qualifying image.

There are several sites you can find ready to use icons, and most are free, including inDats and Noun Project.

When you find the image you like, download it on your hard drive.

Open your file, double click the target button, then click on the + plus button. find your image, select it, it will add it to your button and the Button  Setup Icon list. 

HTH

Lee

Still not decided whether I should use these SVG buttons at all, although I am a strong supporter of SVG in other areas (such as the webviewer). Has anyone found a way to REPLACE an SVG graphic with another one, so that all the buttons with that icon in my solution will change automatically? 

AFAIK, the SVG is copied to each and every object that uses it and has no 'link' to the repository, does it? So, suppose I have developed a big solution with a particular button appearing at 300+ places and my customer prefers a different graphic, guess what? I'll have to change these 300+ buttons one by one. Well done, FMI.

HE

https://community.filemaker.com/community/discussions/product-ideas

 

6 minutes ago, Fitch said:

https://community.filemaker.com/community/discussions/product-ideas

 

If they only would add SVG support for the 'background graphic' for buttons and other layout objects, that would solve everything. To me it seems that the button palette was developed by a different department than the one that worked on the tool palette! Perhaps they should meet at some time...

I wish FileMaker would get out of the dark ages. It's crazy that in 2017 we are still dealing with these issues. The ability to embed fonts would solve all of these interface/icon/button problems.

I'd be happy to vote up either of those ideas, assuming they haven't already been proposed. Feel free to post links.

For anyone who have pale icons in filemaker after importing here is how to change the colour to red 
Many thanks to Claus Lavendt, of DataMani for providing the tool for free
Using SVG icon Helper, can be downloaded here for free: http://www.filemakervideos.com/filemaker-14-svg-icon-helper-tool-filemaker-14-training/

And this code takes into account all shape elements of SVG such as circle, rectangle, polygon,,,etc. and Works Great with IonIcons.com Library

It removes existing fills and fm_fill class and substitutes with new values so it works with SVG with or without fill attribute.

You can also change the color at the top of the code

1. Open SVG icon Helper FM database and open Script Workspace
2. Go to Script “Edit SVG files - mini icons….”
3. Go to the comment “#make changes”
4. Open the Set variable script step just below 
5. replace the existing code by the following:
6. save and go back to the main layout and click the button with the blue pen, select folder and validate

You’re done :-), now you can re import the icons into filemaker

Let ( [

~content = $content;
~color = "#FF0000";

// We need to search for all existing fills and remove them
~content=If (
	PatternCount ( ~content ; "fill=\"" ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "fill=\"" ; 1 ; 1 ) ; 14 ) ; "" ) ;
~content
);
 
// We need to search for all existing fm_fill and remove them class=\"fm_fill\"
~content=If (
	PatternCount ( ~content ; "class=\"fm_fill\"" ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "class=\"fm_fill\"" ; 1 ; 1 ) ; 15 ) ; "" ) ;
~content
);

// Then add the fills in the appropriate positions covering all possible SVG elements

//<path 
~content=If (PatternCount ( ~content ; "<path " ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "<path " ; 1 ; 1 ) ; 6 ) ; "<path fill=\""&~color&"\" class=\"fm_fill\" " ) ;
~content
);
//<rect 
~content=If (PatternCount ( ~content ; "<rect " ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "<rect " ; 1 ; 1 ) ; 6 ) ; "<rect fill=\""&~color&"\" class=\"fm_fill\" " ) ;
~content
);
//<circle 
~content=If (PatternCount ( ~content ; "<circle " ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "<circle " ; 1 ; 1 ) ; 8 ) ; "<circle fill=\""&~color&"\" class=\"fm_fill\" " ) ;
~content
);
//<ellipse 
~content=If (PatternCount ( ~content ; "<ellipse " ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "<ellipse " ; 1 ; 1 ) ; 9 ) ; "<ellipse fill=\""&~color&"\" class=\"fm_fill\" " ) ;
~content
);
//<line 
~content=If (PatternCount ( ~content ; "<line " ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "<line " ; 1 ; 1 ) ; 6 ) ; "<line fill=\""&~color&"\" class=\"fm_fill\" " ) ;
~content
);
//<polygon 
~content=If (PatternCount ( ~content ; "<polygon " ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "<polygon " ; 1 ; 1 ) ; 9 ) ; "<polygon fill=\""&~color&"\" class=\"fm_fill\" " ) ;
~content
);
//<polyline 
~content=If (PatternCount ( ~content ; "<polyline " ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "<polyline " ; 1 ; 1 ) ; 10 ) ; "<polyline fill=\""&~color&"\" class=\"fm_fill\" " ) ;
~content
);
//<text 
~content=If (PatternCount ( ~content ; "<text " ) > 0 ;
Substitute ( ~content ; Middle ( ~content ; Position ( ~content ; "<text " ; 1 ; 1 ) ; 6 ) ; "<text fill=\""&~color&"\" class=\"fm_fill\" " ) ;
~content
)

];

~content

)

 

Edited August 21, 20178 yr by riadh2002

Hi riadh2002

Thanks fo posting this mod. I love it, when someone can extend on what I start.
Really glad that my tool seems to have been helpful to you and others.

In case someone has only had their hands on the first version, I released, the most recent version of the tool, let's you both import, "make FM ready" SVG - but the most useful feature of the newest version, is that you can take a found set, press the button to "copy" all found icons and paste them into your solution all at once.
So say you have a standard collection of SVG icons, that you normally want to use. Find these icons in the tool. Copy them. And then you use the paste shortcut, which will insert a button bar object, that you can delete immediately after you pasted it.
Now, all your icons appear in the tools palette of your file.

Newest version can be found here: http://thebrainbasket.com/?p=404  (completely free and open)