SVG Icon hell

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 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 (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 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
I tried SVG Minimizer 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. (1.9 KB)

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



You're awesome! Thank you!

so cool! Thank You so much!

Now I'm curious to know what kind of app needs a butterfly in a speech bubble...

1 Like

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")


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.


1 Like