1 2 Previous Next 24 Replies Latest reply on Aug 3, 2017 4:59 PM by user19752

    Resources for SVGs

    jbrown

      I recently stumbled on this website:

      https://thenounproject.com/

       

      It is an icon library that one can sign up for to be able to download icons in the form of .svg or .png files. You type in a noun (or verb) and get a plethora of icons to use. Since many designers contribute to this site (you can too, by the way) you get different styles of, say a trashcan. I imagine you can do some filtering by author if you find a designer that you particularly like.

       

      A free account allows one to download icons, but you have to give the designer credit.

       

      A paid account gives you the license to use any icon in here w/o giving credit.

       

      I've spent a good amount of time in the site and have yet to not find at least one icon that doesn't match a noun (or verb) that I typed in.

       

      These .svg files are ready for FM 14. No extra editing needed.

      I've signed up for a free account but will probably go for the paid one. I like to support the designers.

        • 1. Re: Resources for SVGs
          mikebeargie

          I've been almost exclusively using the iOS icons that are free in the IonIcons pack:

          Ionicons: The premium icon font for Ionic Framework

          They're super lightweight and have just about everything you could need, and the entire pack is under MIT open source release, so no crediting or even signing up for an account. There are also a variety of formats like SVG and PNG.

           

          Bonus, since WD also supports mobile android now, you can use the ionicons android icons on custom layouts for android.

          1 of 1 people found this helpful
          • 2. Re: Resources for SVGs
            HammerOz

            Thanks for this.

             

            I tried using their mac app and it it won't copy the svg to finder. I looked at their support page and this is expected behaviour.

             

            A direct download imports into the FM icon list as you say.

             

            There isn't a drag and drop of SVG into FM icons area of the button bar setup that I am missing is there .

             

            I have been using the paid icons8 app, but the svg icons aren't compatible with FM so back to the drawing board

            • 3. Re: Resources for SVGs
              csodemann

              Hi All,

               

              I'd recommend:

               

                   https://icons8.com

               

              They have a massive searchable library and a nifty web app, that allows for easy download of just the SVG's you need. I usually need to remove the color settings manually in a text editor, because Filemaker pro doesn't manage to ignore these.

               

              CHS

              • 4. Re: Resources for SVGs
                mark_scott

                I usually need to remove the color settings manually in a text editor, because Filemaker pro doesn't manage to ignore these.

                 

                I know it's been mentioned elsewhere and you've probably already seen this, but for anyone interested:

                 

                FileMaker Pro 14 SVG Grammar for Button Icons

                • 5. Re: Resources for SVGs
                  mark_scott

                  Not an icon repository, but for those times when you want to design your own vector icons (or tweak others), I can't recommend Bohemian Coding's Sketch highly enough.  It's much more UI design-focused than Adobe Illustrator.

                   

                  If you create a compound shape (one with a donut hole cut in it, so that there is a void space within a filled one), be sure to go to the Fill Inspector's gear menu and choose "Non-Zero" winding, rather than the default "Even-Odd" setting, in order to see how your graphic will appear in FM, which supports only the former winding rule.  You may suddenly see that your donut hole gets filled.  To fix this, select one, but not both, of the two paths that make up the compound shape, let's say the inner one, and choose "Layer > Paths > Reverse Order."  Reversing the path direction for that inner shape will reestablish its transparency.

                   

                  (Illustrator also supports both rules, although I've forgotten exactly where the relevant settings and commands are.)

                   

                  Mark

                  • 6. Re: Resources for SVGs
                    NickLightbody

                    and don't forget that if you add a simple icon style png (i.e. single colour no gradients) to the icons collection in FileMaker it will be automatically converted to svg without any extra effort on your part.

                     

                    Cheers, Nick

                    • 7. Re: Resources for SVGs
                      NickLightbody

                      Mike

                       

                      Thanks, a good recommendation, impressive resource.

                       

                      I "like" it!

                       

                      Cheers, Nick

                      • 8. Re: Resources for SVGs
                        mark_scott

                        Hi Nick,

                         

                        I'm not sure that's correct.  To my understanding and testing, PNGs, whether single color or more complex, can be used, but are applied to buttons as PNGs and not converted to vector artwork by FileMaker.  As such, they will retain the color(s) they had on import and cannot be styled in the Inspector, nor by conditional formatting.  I just tested and confirmed this with a simple, single-color PNG.  So far as I know, only files imported as SVGs are treated as vector artwork and subject to styling through the Inspector or conditional formatting.

                         

                        I may have missed something in my testing, but I've been testing various icon design strategies (SVG and PNG) all morning and cannot reproduce your observation.

                         

                        Mark

                        • 9. Re: Resources for SVGs
                          NickLightbody

                          Hi Mark

                           

                          Yes, I think you are right.

                           

                          I was told by FMI that the the png was converted to svg. That is not in fact strictly correct.

                           

                          Such a converted png does display quickly like a svg but, as you have observed, it does not scale not can its colour be controlled with css like a true svg.

                           

                          So I think that FM is creating an efficient (because speed wise it works very well) pseudo-like-svg which is not actually a svg, perhaps actually a bit mapped glyph?

                           

                          The practical point is that simple monochrome shapes converted by FM for use a glyphs do work well but you can't control the colour with css.

                           

                          Do you agree?

                           

                          Cheers Nick

                          • 10. Re: Resources for SVGs
                            DanielSmith

                            +1 for ionicons. Been using them almost exclusively for 12 months now. Have also made up an inverted version to use on dark button too.


                            Daniel

                            https://databee.com.au

                            • 11. Re: Resources for SVGs
                              mark_scott

                              Thanks for the comments, Nick.  It reminded me to review my DevCon notes from Andrew Phan's session on Button Glyphs and Button Bars.

                               

                              Per Andrew, PNGs actually perform better than SVGs.  PNGs are already rasterized (display-ready), whereas the rendering engine needs to parse the vector instructions in SVGs in order to display them.  Once parsed, however, they attempt to cache the image data from SVG icons for further use. 

                               

                              I'm sure that in most cases the difference is extremely negligible, the dynamic styling capabilities and resolution independence of SVGs far outweighing any performance impact.  The take-home message was not to use PNGs and give up those SVG benefits, but rather to avoid excessively complex SVGs.

                               

                              Best,

                               

                              Mark

                              • 12. Re: Resources for SVGs
                                ariley

                                Brilliant, Mike, thank you so much!

                                • 13. Re: Resources for SVGs
                                  user16691

                                  Is there a way to export the default icons so to make small changes and reload?

                                   

                                  In my case, I often use the "+" icon in "new record" button while I would like to also have a "++" button for "multiple new records" button. Same for pages, and so on. So, if I may export the SVG of the icon I need then I can make the changes, using the same stile of the default icons, and reload.

                                   

                                  Thanks for your support

                                  • 14. Re: Resources for SVGs
                                    beverly

                                    This may help you to see what kind of icon is 'changeable' once you insert the custom icon:

                                    There is no "export", except I seem to recall there was a way with contextual menus in Layout mode. I may be in error on that.

                                    There are many threads on SVG button icons on this forum and elsewhere.

                                    Beverly

                                    1 2 Previous Next