SVG image format for button icons

Questions
,
21

Let's take the 96x96 example. I assume this to mean the vector image is optimized to raster at 96 dots x 96 dots, a total of 9216 dots. This means no detail is lost and the image is at its "best".

Imagine the case where the computer must display the same image at 18 dots x 18 dots. There are now only 324 dots to work with. Modern rasterizers don't just throw away over 95% of the image. They attempt to approximate the same image in a smaller size by changing colours to give the illusion of multiple lines, shadows, etc.

Keep in mind there is only so much that can be done with 324 dots. There comes a time when no amount of approximation will give a satisfactory result if the image contains too many details.

The opposite can also be challenging. No detail will be lost during rasterization to a larger size if the vector image is optimized for display at a smaller size, say 18x18. It may look overly simple, however, when rasterized to… say… 128x128.

2 Likes
22

Agree 100%. Designing at 18x18 px is very different from designing at 96x96 px. At 18x18, you can't draw 2 lines inside the same pixel.

23

Designing at 96 is going to be OK unless you have a really important reason to do pixel perfect 24x24 artwork, otherwise, losing at bit of definition at 24 is not the worst thing in the world.

I'm doing some design at the moment and it's 1500x1500. It displays well all the way down to 24.

24

From a technical point of view this makes sense to me. That's why I iterate in the process until the readability is sufficient in between the different scalings. Shapes should work from size 18 - 48 as that is my use case although size 18 is seldom used.

My forms in SVGs don't use any strokes but only fills since that is the only entity to be customized by FileMaker. The rasterizing thus is very simalar to fonts rendering. So sometimes there is need to do two different SVGs for the same purpose the smaller one being the more abstracted.

1 Like
25

I uploaded a little tool for you that I created in FileMaker:

FM SVG Maker.
It converts nearly any SVG to a FileMaker ready SVG.

Follow this Link.

3 Likes
26

with what tool/app do You create the files? I got a license of EazyDraw - but when I try to create an icon that has a circle with an arrow inside, cheesus' tool creates a black circle, arrow not visible..

27

This site that Lui and Todd put up does the same thing. I believe the code is also available on GitHub. It doesn't require a plugin and uses standard web tech. https://www.fmsvg.com/

1 Like
28

I use Inkscape, my colleague uses Illustrator.

1 Like
29

Don’t draw a circle with only one line. Put two circle areas with different sizes one onto the other and cut out the smaller one from the bigger one. So the circle is an area, not a line. Then it will work with cheesus’ tool.

2 Likes
30

I downloaded affinity designer this lunch. Works, I can use saved svg in FimleMaker - but not in cheesus' tool

31

Thank You! Will try that out

32

I have Affinity Designer too. I will try it by myself and then give feedback.

1 Like
33

Nice work @cheesus

The "Starting" script needs to be tweaked:

While ( [ 
plugins = Get ( InstalledFMPlugins ) 
; n = ValueCount ( plugins )
; i = 0
; pluginState = 0
] 

; i ≤ n 

; [ 

  i = i + 1

; pluginState = pluginState + GetAsBoolean ( "MBS" = LeftWords ( GetValue ( plugins ; i ) ; 1 )  )
; pluginState = pluginState + GetAsBoolean ( "MBS" = LeftWords ( GetValue ( plugins ; i ) ; 1 ) and  "Enabled" = RightWords ( GetValue ( plugins ; i ) ; 1 ) )

] 

; pluginState

)

With this you can add an extra check. When $MBSPlugin = 1 tell the user to activate the plugin.

34

I use Affinity Designer.

1 Like
35

That‘s true. But some of my SVGs failed when I used this Site so I started to create my own tool.
I don‘t say that my solution is capable of converting any SVGs but most of the time it works for me.

36

Quite an interesting thread. I am planning to bring a couple of animated SVG to the UI. There is, i.e. a button for a user-triggered refresh of the window. Currently it is a static icon:
Screenshot 2021-02-19 at 06.53.11

Did anyone try out animated SVG in FM?

37

I think animation can only be achieved with a web viewer. Make sure to let us know if I am wrong about that.

38

Correct, and it will not animate while a script is running.

1 Like
39

Now I have tested SVGs coming from Affinity Designer with cheesus’ app and unfortunately I see the same behaviour.

Then I have told Affinity Designer’s settings to copy elements as SVG. I copied such a circle element and pasted it manually in cheesus’ app into the text field and applied the fmfill class myself. Et voilà: The app showed the SVG as it should. I suppose there’s a hidden little bug in the text manipulation of the app or the SVG from Affinity Designer differs when I copy or when I export it.

This weekend I have not the time do dive into. But next weekend I will have a look at it.

[Edit: some typing errors]

2 Likes