SVG Icon Manager

[Lee Smith]

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

[typewriter]

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

[Fitch]

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

 

[typewriter]

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

[HALBURN]

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.

[Fitch]

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

[riadh2002]

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, 2017 by riadh2002

[Claus Lavendt]

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)