# SVG Icon hell **URL:** \ **Category:** Questions\ **Tags:** svg, icons\ **Created:** [September 9, 2022, 9:58pm UTC](https://the.fmsoup.org/t/svg-icon-hell/3080 "2022-09-09T21:58:10Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![JasonMark](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@JasonMark](https://the.fmsoup.org/u/JasonMark)\ **Post date:** [September 9, 2022, 9:58pm UTC](https://the.fmsoup.org/t/svg-icon-hell/3080/1 "2022-09-09T21:58:10Z")
Once, long ago, I made an SVG Icon that worked, but many times since then I've spent hours failing. The shape I want is a speech bubble with a butterfly in it I usually use Affinity Designer on the Mac and it took me about 3 minutes to make it... but it doesn't import into Filemaker. The shapes are started with are from [www.indats.com](http://www.indats.com) Icon Manager (their website seems to be down, but it was a Filemaker file with a bunch of "Filemaker safe" SVGs (source attached). Both work fine in FIlemaker alone. [source icons from inDats.zip](https://the.fmsoup.org/uploads/short-url/xW2tRy9ZClueehMhQOH49ko8VdR.zip) (2.5 KB) I tried manually adding some code I found online to make it Filemaker-friendly, but no dice. I tried Vectornator, but it crashes. I tried Sketch.app but it crashed, and also didn't seem to be able to subtract one shape from another for me. I tried using Geist's SVG converter, with no luck [https://fmsvg.proofgeist.com](https://fmsvg.proofgeist.com) I tried SVG Minimizer [https://www.svgminify.com](https://www.svgminify.com) in the hopes that it would streamline my SVGs. I tried the Filemaker exporter by @cheesus and it shows up correctly in the web view, but the exported shape doesn't include the cut out butterfly. I tried exporting as PDF, and converting _that_ to an SVG and also exporting as an EPS and converting _that_ into an SVG... no joy... butterfly goes away. When I import into Filemaker sometimes I get a speech bubble that's the right size. Other times the wrong size. But never a cut out butterfly. Any thoughts? I was wondering if it has to do with the "cutout", but the other shapes I started with had cutouts. Here's the file I ended up with that doesn't work. [result.svg.zip](https://the.fmsoup.org/uploads/short-url/t7aG79OtB2mj11zKkDwVfZPykdm.zip) (1.9 KB) ---
**Author:** ![rivet](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/rivet/32/1727_2.png) [@rivet](https://the.fmsoup.org/u/rivet)\ **Post date:** [September 10, 2022, 1:04am UTC](https://the.fmsoup.org/t/svg-icon-hell/3080/2 "2022-09-10T01:04:41Z")
in Affinity Designer 1. under layers; remove any crops and groupings 2. switch to node tool 3. select the inside object 4. reverse curves Then under export SVG; 1. click more 2. uncheck; Set viewBox 3. Save as a custom preset for future exports ![reverse inside curve](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/6/6ee30f4b1f1732af44da0c88b95cb078038e51dd.jpeg) ![SCR-20220909-owt](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/0/0ab942184825acc76c70a1e7e3ec7f9cfc02deaf.png) ![fmp](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/5/5c42c4fadba9d17761879756a07d558eceb3d398.jpeg) ---
**Author:** ![JasonMark](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@JasonMark](https://the.fmsoup.org/u/JasonMark)\ **Post date:** [September 10, 2022, 1:31am UTC](https://the.fmsoup.org/t/svg-icon-hell/3080/3 "2022-09-10T01:31:55Z")
You're awesome! Thank you! ---
**Author:** ![Markus](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@Markus](https://the.fmsoup.org/u/Markus)\ **Post date:** [September 10, 2022, 3:29pm UTC](https://the.fmsoup.org/t/svg-icon-hell/3080/4 "2022-09-10T15:29:21Z")
so cool! Thank You so much! ---
**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:** [September 11, 2022, 4:52pm UTC](https://the.fmsoup.org/t/svg-icon-hell/3080/5 "2022-09-11T16:52:26Z")
Now I'm curious to know what kind of app needs a butterfly in a speech bubble... ---
**Author:** ![JasonMark](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@JasonMark](https://the.fmsoup.org/u/JasonMark)\ **Post date:** [September 11, 2022, 10:31pm UTC](https://the.fmsoup.org/t/svg-icon-hell/3080/6 "2022-09-11T22:31:18Z")
The real question is what app _doesn't_ need a butterfly in a speech bubble. (It's a school and we flag students who need counseling sessions with a butterfly, the speech bubble means "this is where the team meets to talk about the list of counseling students") ---
**Author:** ![pixi](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/pixi/32/1929_2.png) [@pixi](https://the.fmsoup.org/u/pixi)\ **Post date:** [September 26, 2022, 8:06am UTC](https://the.fmsoup.org/t/svg-icon-hell/3080/7 "2022-09-26T08:06:50Z")
Sketch crashing is not their expected behaviour. If you select the upper layer and click "Subtract" (top right) it will cut out the butterfly and when you export the "Shape" group it will give you a nicely cut out icon. ![Sketch](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/1/1baf0e4d739c9e1be00e2c832697d3b861a84066.png) ![FileMaker](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/8/873a65c4deb388d7b3129c5cf9ebfdaf93159813.png)