# SVG image format for button icons **URL:** \ **Category:** Questions\ **Tags:** button-display, svg\ **Created:** [February 16, 2021, 3:27pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698 "2021-02-16T15:27:26Z")\ **Posts on this page:** 19\ **Page:** 2
**Author:** ![bdbd](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/bdbd/32/620_2.png) [@bdbd](https://the.fmsoup.org/u/bdbd)\ **Post date:** [February 17, 2021, 6:37pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/21 "2021-02-17T18:37:22Z")
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. ---
**Author:** ![jormond](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@jormond](https://the.fmsoup.org/u/jormond)\ **Post date:** [February 17, 2021, 8:13pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/22 "2021-02-17T20:13:13Z")
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. ---
**Author:** ![Malcolm](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/malcolm/32/196_2.png) [@Malcolm](https://the.fmsoup.org/u/Malcolm)\ **Post date:** [February 17, 2021, 9:21pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/23 "2021-02-17T21:21:05Z")
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. ---
**Author:** ![harvest](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/harvest/32/231_2.png) [@harvest](https://the.fmsoup.org/u/harvest)\ **Post date:** [February 17, 2021, 9:24pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/24 "2021-02-17T21:24:26Z")
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. ---
**Author:** ![cheesus](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/cheesus/32/182_2.png) [@cheesus](https://the.fmsoup.org/u/cheesus)\ **Post date:** [February 17, 2021, 9:41pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/25 "2021-02-17T21:41:27Z")
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.](https://the.fmsoup.org/t/fm-svg-maker-a-filemaker-based-svg-converter-for-filemaker-buttons/1716) ---
**Author:** ![Markus](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@Markus](https://the.fmsoup.org/u/Markus)\ **Post date:** [February 18, 2021, 2:36pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/26 "2021-02-18T14:36:51Z")
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.. ---
**Author:** ![jormond](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@jormond](https://the.fmsoup.org/u/jormond)\ **Post date:** [February 18, 2021, 3:23pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/27 "2021-02-18T15:23:24Z")
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/](https://www.fmsvg.com/) ---
**Author:** ![Malcolm](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/malcolm/32/196_2.png) [@Malcolm](https://the.fmsoup.org/u/Malcolm)\ **Post date:** [February 18, 2021, 4:36pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/28 "2021-02-18T16:36:59Z")
I use Inkscape, my colleague uses Illustrator. ---
**Author:** ![mipiano](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/mipiano/32/1074_2.png) [@mipiano](https://the.fmsoup.org/u/mipiano)\ **Post date:** [February 18, 2021, 5:42pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/29 "2021-02-18T17:42:17Z")
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. ---
**Author:** ![Markus](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@Markus](https://the.fmsoup.org/u/Markus)\ **Post date:** [February 18, 2021, 5:43pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/30 "2021-02-18T17:43:59Z")
I downloaded affinity designer this lunch. Works, I can use saved svg in FimleMaker - but not in cheesus' tool ---
**Author:** ![Markus](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@Markus](https://the.fmsoup.org/u/Markus)\ **Post date:** [February 18, 2021, 5:44pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/31 "2021-02-18T17:44:40Z")
Thank You! Will try that out ---
**Author:** ![mipiano](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/mipiano/32/1074_2.png) [@mipiano](https://the.fmsoup.org/u/mipiano)\ **Post date:** [February 18, 2021, 5:45pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/32 "2021-02-18T17:45:02Z")
I have Affinity Designer too. I will try it by myself and then give feedback. ---
**Author:** ![Malcolm](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/malcolm/32/196_2.png) [@Malcolm](https://the.fmsoup.org/u/Malcolm)\ **Post date:** [February 18, 2021, 8:56pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/33 "2021-02-18T20:56:16Z")
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. ---
**Author:** ![cheesus](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/cheesus/32/182_2.png) [@cheesus](https://the.fmsoup.org/u/cheesus)\ **Post date:** [February 18, 2021, 9:58pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/34 "2021-02-18T21:58:19Z")
I use Affinity Designer. ---
**Author:** ![cheesus](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/cheesus/32/182_2.png) [@cheesus](https://the.fmsoup.org/u/cheesus)\ **Post date:** [February 18, 2021, 10:03pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/35 "2021-02-18T22:03:23Z")
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. ---
**Author:** ![Torsten](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/torsten/32/1574_2.png) [@Torsten](https://the.fmsoup.org/u/Torsten)\ **Post date:** [February 19, 2021, 5:59am UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/36 "2021-02-19T05:59:15Z")
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](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/8/8ed273241072250d55a7b65c808b09407cbe631a.png) Did anyone try out animated SVG in FM? ---
**Author:** ![Bobino](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/bobino/32/194_2.png) [@Bobino](https://the.fmsoup.org/u/Bobino)\ **Post date:** [February 19, 2021, 4:24pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/37 "2021-02-19T16:24:40Z")
I think animation can only be achieved with a web viewer. Make sure to let us know if I am wrong about that. ---
**Author:** ![jormond](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@jormond](https://the.fmsoup.org/u/jormond)\ **Post date:** [February 19, 2021, 5:30pm UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/38 "2021-02-19T17:30:49Z")
Correct, and it will not animate while a script is running. ---
**Author:** ![mipiano](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/mipiano/32/1074_2.png) [@mipiano](https://the.fmsoup.org/u/mipiano)\ **Post date:** [February 20, 2021, 10:04am UTC](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698/39 "2021-02-20T10:04:23Z")
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] [Previous page](https://the.fmsoup.org/t/svg-image-format-for-button-icons/1698.md?page=1)