Converting strokes to fills

8,587 views
Skip to first unread message

terrill....@gmail.com

unread,
May 27, 2014, 10:26:25 AM5/27/14
to ico...@googlegroups.com
I see lots of posts to this group where the answer is: "Convert strokes to fills." I have two questions related to that:

1. Why does the icomoon importer not support strokes? It seems to be a fundamental part of SVG.
2. How do I convert strokes to fills? (i.e., within the source code)?

For example, the following simple SVG code draws a rectangle with a black border and white interior. Inside that rectangle is a single black line. How do I draw this without strokes?

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect width="170" height="200" x="43" y="28" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)" />
<line x1="90" y1="61" x2="186" y2="61" style="fill:rgb(0,0,0);stroke:rgb(0,0,0);stroke-width:3" />
</svg>

Thomas Link

unread,
May 28, 2014, 10:02:51 AM5/28/14
to ico...@googlegroups.com
Icomoon is used to generate fonts and therefore requires your illustrations to be outline-only.

Keyamoon

unread,
May 28, 2014, 12:07:38 PM5/28/14
to ico...@googlegroups.com
Well, Thomas is right but I might add support for converting strokes to fills to icomoon so you wouldn't have to do it yourself.

In Illustrator, you can convert strokes to fills like this: select the path then select "Expand" under the "Object" menu.

Terrill Thompson

unread,
Jul 16, 2014, 11:18:45 AM7/16/14
to ico...@googlegroups.com
I realize I'm cutting corners here, hoping to avoid having to become an Illustrator expert to do something so simple. However, here's my experience: 

1. Open my original SVG into Illustrator. It contains a <rect> element and five <line> elements, all of which have a style attribute that includes stroke-width:3 (I've attached the file). So as I understand it, my goal is to convert those strokes to fills.  

2. In Illustrator CC, I choose Select > All. 

3. Then I select Object > Expand. 

4. A dialog appears, with three choices: Object (grayed), Fill, or Stroke.  

5. It's unclear to me whether this dialog is prompting me for the source (i.e., What do you want to expand?) or target (i.e., What do you want to expand *to*?), so I try both. 

If I choose "Fill", then save the file to SVG, the result includes <line> elements with fill="none" and stroke-width="3", which presumably is not the desired result.  

If I choose "Stroke", then save the file to SVG, the result is a file where all objects have been converted to <rectangle> elements.  

If I choose both "Fill" and "Stroke", then save the file to SVG, the result is the same as if I had just selected "Stroke".  

In all cases, when I save as SVG I have lots of SVG Options to choose from. I'm accepting the default settings. In all cases, if I import the new SVG file into the icomoon app, it shows up as a solid black square. 

What am I missing? 
transcript_original.svg

Keyamoon

unread,
Jul 16, 2014, 12:41:12 PM7/16/14
to ico...@googlegroups.com
The rectangle in your shape has a white fill color. You should set it to transparent. You can do that by selecting the rectangle and then choosing its fill color from the toolbar on top. All fill colors are treated as the same (black) in IcoMoon because font glyphs can only have one color. Expand your shape after setting the fill color to transparent.
Reply all
Reply to author
Forward
0 new messages