Converting path to SVG Font

Post questions on how to use or achieve an effect in Inkscape.
neogucky
Posts: 3
Joined: Thu Apr 04, 2013 9:40 pm

Converting path to SVG Font

Postby neogucky » Thu Apr 04, 2013 9:58 pm

Hi there,

I'm currently converting icons to a font, so that I can use svg-graphics on a website (like font awesome). For this purpose I use Inkscapes SVG Font Editor to add one imported icon at a time to a glyph. This works well with "solid" icons, but if the icon is not solid (like the backspace logo which has a "free" x in the center) it won't work. I can either just add the path as it is which will remove the arrows orientation and also will fill the arrow completely with black. When I instead use "path->union" it will immediately become solid (filled with black) but keeps its orientation after adding it to the glyph.

Since I already saw webfonts created with inkscape which had "non-solid" icons, I'm pretty sure I do something wrong. I would appreciate any help you can give me. If you need further information, please feel free to ask.

User avatar
ragstian
Posts: 1181
Joined: Thu Oct 11, 2012 2:44 am
Location: Stavanger-Norway

Re: Converting path to SVG Font

Postby ragstian » Fri Apr 05, 2013 1:29 am

Hi

Have you tried "path-difference"?

RGDS
Ragnar
Good Luck!
( ͡° ͜ʖ ͡°)
RGDS
Ragnar

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Converting path to SVG Font

Postby brynn » Fri Apr 05, 2013 1:35 am

Image
Welcome to InkscapeForum!

I'm not entirely clear what you're doing. You may well find a way to use Difference,as Ragnar suggested. I wanted to suggest Path menu > Stroke to Path, as a possible solution :D

User avatar
RobA
Posts: 335
Joined: Fri Aug 10, 2007 1:22 am

Re: Converting path to SVG Font

Postby RobA » Fri Apr 05, 2013 4:42 am

ragstian wrote:Hi

Have you tried "path-difference"?

RGDS
Ragnar


Or path->Combine, if you have multiple inner paths. You may have to reverse some of the path directions if they don;t all end up "empty".

-Rob A>

User avatar
flamingolady
Posts: 687
Joined: Wed Jun 10, 2009 1:40 pm

Re: Converting path to SVG Font

Postby flamingolady » Fri Apr 05, 2013 9:22 am

I was thinking Path - Combine also.

neogucky
Posts: 3
Joined: Thu Apr 04, 2013 9:40 pm

Re: Converting path to SVG Font

Postby neogucky » Sun Apr 07, 2013 8:26 am

Thank you all for taking an interest in my problem. I tried all possibilities for path merging (combine, union, difference etc.). Combining works with the image since I get only one path and the image is still intact. But when I then add it as a Glyph (Text -> SVG Font Editor -> font 1 -> Get curves from selection) the glyph looks like a shadow of the image.

I will attach one of the problematic svgs and and image explaining my problem graphically.

Best regards,
Tim
Attachments
Backspace.svg
I want to add this to my icon-font
(12.6 KiB) Downloaded 224 times
glyph.png
The problem
glyph.png (34.54 KiB) Viewed 3508 times

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Converting path to SVG Font

Postby brynn » Mon Apr 08, 2013 9:23 am

Attached is backspace.svg where I used Stroke to Path. I didn't do it, but you'll probably want to Select All, then Path menu > Combine. If it becomes filled in with black, open Fill and Stroke dialog > Fill tab then click Even-Odd Fill Rule button (looks like a rounded heart shape with hole in the middle).

When you're finished, it should behave like the other solid icons.
Attachments
Backspace_stp.svg
(14.03 KiB) Downloaded 259 times

neogucky
Posts: 3
Joined: Thu Apr 04, 2013 9:40 pm

Re: Converting path to SVG Font

Postby neogucky » Mon Apr 08, 2013 5:51 pm

Thank you community, thank you brynn!

The Stroke to Path function did exactly what I needed. Afterwards I had to use Path -> Union instead of Path -> Combine and now all my glyphs look like I want them to look.

Best regards,
Tim

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Converting path to SVG Font

Postby brynn » Wed Apr 10, 2013 4:01 am

Image Awesome!


Return to “Help with using Inkscape”