svg" width="624"

I'm a little stumped as to why my nice icon gets a little chewed up by Icomoon.

<svg xmlns="http://www.w3.org/2000/svg" width="624" height="600" viewBox="-161.358 -67.667 624 600">
<path fill="green" d="M277.452 42.987c0 15.59-12.756 28.347-28.347 28.347H51.132c-15.59 0-28.347-12.756-28.347-28.347v-14.64C22.785 12.757 35.542 0 51.132 0h197.973c15.59 0 28.347 12.756 28.347 28.347v14.64zM150.452 212h86.334s67.333 32 64 107.333H151.452l-1-107.333z"/>
<path fill="green" d="M150.453 212H64.12s-67.333 32-64 107.333h149.334l1-107.333zm-27 107.333l26 144.667 25-144.667"/>
<path fill="green" d="M64.12 67.495v251.838h170.666V67.495H64.12zm59.332 117.838L106.12 212V75.333h17.332v110z"/>
</svg>

I'm no expert with icon fonts and SVGs, but this all looks correct and Icomoon doesn't complain. It just seems to cut out the intersection between two paths in this SVG when generating the font. A colleague has reported seeing the icon without this issue, which makes this issue murkier.

Could someone lend some wisdom?

10.01% popularity Vote Up Vote Down

: InDesign: any specific rules for margins in print In InDesign when I set up a DIN A4 document, margins are usually set at 12,7mm. I was wondering if this is for a reason and if there are

@Megan533

Posted in: #AdobeIndesign #Grids #Margin #PageLayout #PrintDesign

1 Comments

: Distortion of 16x16(16Bit) Icon on Large Screen Resolution -Deleting 16 Bit Versions I have an application which displays an Icon.When it comes to high resolutions and a smaller screen, the icon

@Megan533

Posted in: #Icon #InterfaceDesign

0 Comments

: How to paste an image into the same layer in Krita? I'm trying to put together an animation I've drawn out by hand and scanned in, but I can't find a way to paste an image into a new

@Megan533

Posted in: #Animation #Krita

1 Comments

: How to apply layer style on the same layer on all frames at a same time I am working on a gif where i have used a cloud image. I now want to apply effects on the single layer .i.e

@Megan533

Posted in: #AdobePhotoshop #Animation #Gif

1 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Berryessa866

The problem area, as you said, corresponds to the overlap of two of your paths:

You should flatten your SVG to a single shape with as few paths and points as possible. Overlapping paths, especially in fonts, will give you a lot problems if you don't pay attention to path direction etc. Just don't do it; it's bad practice and will just give you headaches.

This is your SVG fixed as a single path (via Illustrator's Pathfinder):

<svg xmlns="http://www.w3.org/2000/svg" width="624" height="600" viewBox="-161.358 -67.667 624 600">
<path fill="green" d="M236.786,212h-2V71.334h14.318c15.591,0,28.348-12.757,28.348-28.347v-14.64C277.452,12.756,264.695,0,249.105,0H51.132c-15.59,0-28.347,12.757-28.347,28.347v14.64c0,15.591,12.757,28.347,28.347,28.347H64.12V212c0,0-67.333,32-64,107.333h123.333l26,144.667l25-144.667h126.333C304.119,244,236.786,212,236.786,212z M106.12,75.333h17.332v110L106.12,212V75.333z"/>
</svg>

10% popularity Vote Up Vote Down

Feed

: SVG not rendering correctly after generation using Icomoon I'm a little stumped as to why my nice icon gets a little chewed up by Icomoon. <svg xmlns="http://www.w3.org/2000/svg" width="624"

More posts by @Megan533

: InDesign: any specific rules for margins in print In InDesign when I set up a DIN A4 document, margins are usually set at 12,7mm. I was wondering if this is for a reason and if there are

: Distortion of 16x16(16Bit) Icon on Large Screen Resolution -Deleting 16 Bit Versions I have an application which displays an Icon.When it comes to high resolutions and a smaller screen, the icon

: How to paste an image into the same layer in Krita? I'm trying to put together an animation I've drawn out by hand and scanned in, but I can't find a way to paste an image into a new

: How to apply layer style on the same layer on all frames at a same time I am working on a gif where i have used a cloud image. I now want to apply effects on the single layer .i.e

Login to post a comment!

1 Comments

Back to top | Use Dark Theme