SVG Icon hell

Questions
,
1

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

2

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
reverse inside curve1920×1104 196 KB

SCR-20220909-owt
SCR-20220909-owt628×904 131 KB

fmp

2 Likes
3

You're awesome! Thank you!

4

so cool! Thank You so much!

5

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

1 Like
6

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

5 Likes
7

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
Sketch1004×635 81.7 KB

FileMaker

1 Like