Issues rendering SVG Icons

Questions
,
1

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

<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>
2

ran through my graphic app, seems to work

<?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>
3

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:

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

4

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

5

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

6

I am not familiar with SVG code so I use Affinity Designer to open and then export without any modifications to the original vectors

7

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.