SVG Icon Manager

[voltron2112]

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!

[Charity]

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.

[voltron2112]

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!

[Charity]

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. 

[Charity]

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.

[voltron2112]

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, 2015 by voltron2112

[LaRetta]

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, 2015 by LaRetta

[bruceR]

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, 2015 by BruceR

[LaRetta]

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, 2015 by LaRetta

[voltron2112]

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.

[LaRetta]

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, 2015 by LaRetta
copy/paste didn't work so I've attached the png file

[Claus Lavendt]

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.

[voltron2112]

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!

[Claus Lavendt]

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.

[bruceR]

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.

[Claus Lavendt]

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".

[voltron2112]

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.

[bruceR]

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>

[comment]

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

 

[bruceR]

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.

[comment]

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/

[Mark Scott]

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

[HALBURN]

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.

[Claus Lavendt]

"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.

[HALBURN]

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, 2016 by HALBURN

[Claus Lavendt]

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)

[HALBURN]

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.

[ggt667]

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

Edited March 13, 2016 by ggt667

[Claus Lavendt]

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>

[Paul Webb]

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

Click here

Whew!

Edited April 20, 2016 by Paul Webb

[Lee Smith]

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.

[Paul Webb]

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. 

[beverly]

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!

[Claus Lavendt]

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

[carlsson]

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?