We have reset all users FileMaker related profile fields. Please take the opportunity to update your information,  this will provide background to members whom read your posts. Click here.

Jump to content

Recommended Posts

voltron2112    13

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!

Categoryview.PNG

Search.PNG

  • Like 3

Share this post


Link to post
Share on other sites
Charity    16

Completely ultimately utterly sick, Voltron. :banana:

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.

Share this post


Link to post
Share on other sites
voltron2112    13

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!

Share this post


Link to post
Share on other sites
Charity    16

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. 

Share this post


Link to post
Share on other sites
Charity    16

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.

  • Like 1

Share this post


Link to post
Share on other sites
voltron2112    13

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.

 

Capture.PNG

Blank.svg

Edited by voltron2112
  • Like 1

Share this post


Link to post
Share on other sites
LaRetta    470

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

Share this post


Link to post
Share on other sites
BruceR    151

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?

 

button_setup.png

Edited by BruceR

Share this post


Link to post
Share on other sites
LaRetta    470

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

Share this post


Link to post
Share on other sites
voltron2112    13

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.

  • Like 1

Share this post


Link to post
Share on other sites
LaRetta    470

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.

custom_icons.png

Edited by LaRetta
copy/paste didn't work so I've attached the png file

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites
voltron2112    13

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!

Screenshot.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
BruceR    151

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
voltron2112    13

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.

  • Like 1

Share this post


Link to post
Share on other sites
BruceR    151

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>

Share this post


Link to post
Share on other sites
BruceR    151

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.

Share this post


Link to post
Share on other sites
comment    1,356

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/

Share this post


Link to post
Share on other sites
Mark Scott    60

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

Share this post


Link to post
Share on other sites
HALBURN    7

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
HALBURN    7

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites
HALBURN    7

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.

Share this post


Link to post
Share on other sites
ggt667    6

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

Edited by ggt667

Share this post


Link to post
Share on other sites
Lee Smith    141

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.

Share this post


Link to post
Share on other sites
Paul Webb    0
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. 

Share this post


Link to post
Share on other sites
beverly    22

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • By typewriter
      Hi
      I am experimenting with Treemaps using the D3.js and D3plus.js libraries in FMPro Advanced 15 and the Webviewer (OSX 10.11). D3plus.js is really nice as it makes it much much easier to implement a Treemap using a simple JSON object containing your data. But sometimes thing don't work as expected and I don't fully understand why:
      - I invoke D3plus code in a FileMaker global text field, as a data:url, iincluding the D3 and D3plus libs in an external reference (I don't include the complete code in the text field). So these are loaded at runtime.
      - this works fine, but sometimes the treemap hich is a complex SVG graphics generated by D3) defaults to a 200x200 px area.  
      Reloading the webviewer usually fixes the problem (or manually changing the HTML body, by adding a space, wihich forces the webviewer to refresh its contents). But my question remains: why and when does this happen? My guess is that at times the Javascript code is not loaded in the proper order, but I can't figure out how to influence this.
      The D3.js is invoked prior to D3plus.js, and all D3plus code is executed after these libraries are invoked.
      Anyone with similar issues?
    • By Ron911
      I'm creating a script where I login with SFTP into an Asterisk/LInux PC to download voice files and voice mails and import them into a FileMaker solution.
      Use the FTPeek plugin. Login goes fine, collect filepath from the cdr table, download file with SetField  and FTPeek_DownloadFileToContainer( filepath )
      Everything works fine, accept instead of an interactive container, I get only the icon. When I drag the file out and in the container again, everything works fine.
      I can't think of anything I did wrong but can't solve this issue and yes I set the container field to "interactive container" in the Instpector/Data/Data formatting :-)
      I did read the documentation and searched the forum, saw one other posting on this issue, but no solution.
      Thanks for your effort!
      Ron
    • By voltron2112


      View File Indats Icon Manager
      Indats Icon Manager is an SVG Icon viewer and manager, that makes it easy to view, edit, and export SVG's that play nice with Filemaker 14 buttons, and button bars. The tool is free to use, and all icons are provided royalty free by Metro Studio's Syncfusion. There are about 4,000 icons, and 26 different categories. That should be more icons than anyone could ever want!
      For more information you can check out my blog post here: http://www.indats.com/2015/06/15/indats-icon-manager/
      File Requires Filemaker Pro 14
       
      Submitter voltron2112 Submitted 06/15/2015 Category Solutions FM Version 14
×