# Issues rendering SVG Icons

**URL:** <https://the.fmsoup.org/t/issues-rendering-svg-icons/3520>\
**Category:** Questions\
**Tags:** svg, icons\
**Created:** [April 22, 2023, 12:14am UTC](https://the.fmsoup.org/t/issues-rendering-svg-icons/3520 "2023-04-22T00:14:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![eric.ha](https://avatars.discourse-cdn.com/v4/letter/e/919ad9/32.png) [@eric.ha](https://the.fmsoup.org/u/eric.ha)\
**Post date:** [April 22, 2023, 12:14am UTC](https://the.fmsoup.org/t/issues-rendering-svg-icons/3520/1 "2023-04-22T00:14:08Z")

</div>

Hey All,

Having some trouble getting FileMaker to render an .svg file properly. I got it off of Google's resource page along with a slew of others that have been working great. The issue with this one that that FileMaker isn't rendering the circle properly. See the screenshot of FileMaker.

Here's the [link](https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Ainfo%3A) to the icon and the code after I commenting out the background (this stops that annoying black square error in FileMaker.

![2023-04-21 16_04_16-Window](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/4/4c5fde9d13c492388800bc65832c627b517c29c8.png)

```auto
<svg 
	xmlns="http://www.w3.org/2000/svg" 
	height="24px" 
	viewBox="0 0 24 24" 
	width="24px" 
	fill="#000000">
<!--path 
	d="M0 0h24v24H0V0z" 
	fill="none"/-->
<path 
	d="M11 7h2v2h-2z
	m0 4h2v6h-2z
	m1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z
	m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>

```

---

<div class="post-metadata">

**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:** [April 22, 2023, 1:43am UTC](https://the.fmsoup.org/t/issues-rendering-svg-icons/3520/2 "2023-04-22T01:43:18Z")

</div>

ran through my graphic app, seems to work

```auto
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-61,-819.401)">
        <g id="info" transform="matrix(1,0,0,1,61,819.401)">
            <rect x="0" y="0" width="24" height="24" style="fill:none;"/>
            <clipPath id="_clip1">
                <rect x="0" y="0" width="24" height="24"/>
            </clipPath>
            <g clip-path="url(#_clip1)">
                <g transform="matrix(1.2,0,0,1.2,-2.4,-2.4)">
                    <path d="M11,7L13,7L13,9L11,9L11,7ZM11,11L13,11L13,17L11,17L11,11ZM12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20Z" style="fill-rule:nonzero;"/>
                </g>
            </g>
        </g>
    </g>
</svg>

```

---

<div class="post-metadata">

**Author:** ![JasonMark](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@JasonMark](https://the.fmsoup.org/u/JasonMark)\
**Post date:** [April 24, 2023, 1:49am UTC](https://the.fmsoup.org/t/issues-rendering-svg-icons/3520/3 "2023-04-24T01:49:23Z")

</div>

In all cases the SVG needs to have a single color icon (black works for me, not sure about other colors) with transparent background.

I use Affinity Designer (which I find quite powerful and handy), and there are two steps to solving it. I'm guessing the same Rivet that helped me solve it on the Affinity Forums is the one who answered here:

> [@SVG Icon hell](https://the.fmsoup.org/t/svg-icon-hell/3080):
>
> 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 al…

Someone also replied below that with info on how to use Sketch. Not sure if these answers apply 1-to-1 with whatever graphics software you use, but might be worth checking out.

There's also this converter: Didn't end up working for me, but might work for you [FMSVGInator | Proof+Geist](https://fmsvg.proofgeist.com/?cmdf=filemaker+SVG)

---

<div class="post-metadata">

**Author:** ![eric.ha](https://avatars.discourse-cdn.com/v4/letter/e/919ad9/32.png) [@eric.ha](https://the.fmsoup.org/u/eric.ha)\
**Post date:** [April 24, 2023, 4:25pm UTC](https://the.fmsoup.org/t/issues-rendering-svg-icons/3520/4 "2023-04-24T16:25:24Z")

</div>

Thanks! That works perfectly! Any idea why the original didn't work? Still trying to learn SVG

---

<div class="post-metadata">

**Author:** ![eric.ha](https://avatars.discourse-cdn.com/v4/letter/e/919ad9/32.png) [@eric.ha](https://the.fmsoup.org/u/eric.ha)\
**Post date:** [April 24, 2023, 4:26pm UTC](https://the.fmsoup.org/t/issues-rendering-svg-icons/3520/5 "2023-04-24T16:26:42Z")

</div>

Thanks for the reply. I'm aware of the background issue and already fixed that part in my code. The issue with this one was that filemaker just wasn't rendering the paths for the circle correctly

---

<div class="post-metadata">

**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:** [April 24, 2023, 7:59pm UTC](https://the.fmsoup.org/t/issues-rendering-svg-icons/3520/6 "2023-04-24T19:59:23Z")

</div>

I am not familiar with SVG code so I use [Affinity Designer](https://affinity.serif.com/en-us/) to open and then export without any modifications to the original vectors

---

<div class="post-metadata">

**Author:** ![JasonMark](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@JasonMark](https://the.fmsoup.org/u/JasonMark)\
**Post date:** [April 24, 2023, 8:58pm UTC](https://the.fmsoup.org/t/issues-rendering-svg-icons/3520/7 "2023-04-24T20:58:30Z")

</div>

Yeah it’s definitely an issue with FileMaker but reversing the direction of the curves in Affinity or Sketch seems to fix it. You can try that online tool too if you’re still having problems. If you have to generate them on the fly you might want to try using affinity or something to fix it and then do a code compare.