Home > website design > Help/docs for using Inkscape for SVG icon font creation

Help/docs for using Inkscape for SVG icon font creation

February 27Hits:1
Advertisement

I was deliriously happy to find this blog post about using Inkscape and one or another online converter to create web font kits. My interest is specifically in icon fonts.

While that article was helpful (and extremely so), I still have a lot of questions about the SVG font editor in Inkscape 0.48.2 (I think it was added in 0.47). For example, it's not at all clear how to orient characters with a baseline (if that's even possible).

The InkScape docs suggest editing the font with FontForge, but I have no FontForge experience and attempts at getting some have consistently ended in a Segmentation Fault within a few mouse clicks :-) If there are ways of doing this in Inkscape, that'd be ideal.

So are there any useful guides for this process available? (Or other, better tools?)

Note — I am not a trained graphics designer by any means, but I'm OK with Inkscape in general.


Edit

So I've been fooling with this for a while and it's just really mystifying. Because what I'm making is an icon font, what I really want, in the end, is for a display: inline box with 1em height and width and line-height to exactly contain a glyph that fills the nominal font horizontal square size (the "horiz-adv-x" attribute on the SVG <font> tag). If I make a test glyph that's got four boxes pushed to the corners of the nominal 1024x1024 font square (the size of the Inkspace artboard that I've got set up), then the resulting TTF font, when I style it like that, extends up out of the box. (edit — that's not actually true; I was using a "line-height" greater than 1em and that threw me off; see below)

I realize that there has to be some allowance made for descenders, but I have not been able to figure out how to account for that when creating a set of glyphs in Inkscape. That is, I can by experimentation try to determine exactly how much to shift my glyph out of the artboard downwards, but it's frustrating and it seems unpredictable. In fact it's not clear at all how the font conversion code even finds out from the SVG font definition what the baseline should be.


Edit again

OK so what I've been able to determine clearly is that a 1em by 1em glyph (where the em size is derived from the SVG <font-face> tag and its "units-per-em" attribute), after conversion to a .ttf font file, is drawn a little bit above the baseline as was determined by the author of the blog post I linked above. How far above, and why? I don't know. Adjusting the "horiz-origin-y" attribute in the SVG code has no apparent effect (and I don't have any reason to think it should; I was just fooling with it). Shifting the SVG path down out of the canvas (having the effect of changing the drawing commands such that the coordinates are negative for portions below the canvas) will definitely adjust the glyph; it's the particulars of how exactly that's all measured that I'm trying to determine, I guess. If I knew, then it'd be pretty easy to set up an Inkscape template with guides for the limits of glyphs and where the baseline is (again, like in the blog post, but more than just the baseline).

One cool thing I did learn is that the "horiz-adv-x" attribute on <glyph> tags does have an effect, and specifically that using a value of zero allows a glyph to be placed in a line of text such that the next glyph will exactly overlay. That's neat, because it means it's possible to use separate icon "parts" to construct multi-colored icons from an icon font! With the assistance of something like Lettering.js that could be very powerful and flexible. (Somebody else blogged about a similar approach using positioning, which would also work fine.)

Answers

Icomoon might be helpful. It's an online tool for converting svg (a normal svg file, not a font file) to icon fonts. I think it automatically scales it to always have the same height.

Related Articles

  • Help/docs for using Inkscape for SVG icon font creationFebruary 27

    I was deliriously happy to find this blog post about using Inkscape and one or another online converter to create web font kits. My interest is specifically in icon fonts. While that article was helpful (and extremely so), I still have a lot of quest

  • How to Batch-export layers of Inkscape-generated SVG-file to Bitmap for sprites?

    How to Batch-export layers of Inkscape-generated SVG-file to Bitmap for sprites?June 20

    Batch -export means that I may need to add certain transformations such as anti-alias, contrast-fixes and resizing. SVG here means I am using Inkscape. One layer here is a sprite. I currently export each layer individually to bitmap, File > Export Bi

  • How do I use an SVG "icon font" within Illustrator?August 27

    Trello uses an icon font and I'd like to figure out how to bring in some of the glyphs into an Illustrator project. Admittedly, this is going a bit backwards (usually you want to import Illustrator art into Glyphs). I'm creating a board mock-up in Il

  • Get a vector path from Photoshop to Inkscape or SVGSeptember 26

    I need to extract vector paths from Photoshop into SVG format (or anything else Inkscape can use). I don't have Illustrator, and buying it just to convert file formats seems silly. So how can I get paths out of Photoshop into SVG? If needed, I could

  • Inkscape: Export SVG to LaTeX-PDF preserving text positioningJuly 10

    I am using Inkscape to export .svg files to LaTeX-PDF using the following command: inkscape --without-gui --file="<file>.svg" --export-pdf="<file>.pdf" --export-latex It generates a pdf document containing the "images&

  • Replacement for \curveto in the tikz library - Inkscape export svg to tikz

    Replacement for \curveto in the tikz library - Inkscape export svg to tikzNovember 11

    I need to draw a complex curve and I wanted to help a vector program Inkscape. In first step I tried to use Inkscape to TikZ exporter (http://code.google.com/p/inkscape2tikz/)to convert curve to tikz, but unsuccessfully (error occured after start of

  • Did anyone manage to import an Inkscape saved SVG into Gliffy?February 8

    Drag and drop does not work for me. The image is just a black box then. Tried with Internet Explorer and Firefox.

  • Convert PDF to SVG preserving fontsApril 20

    I´m using Inkscape to convert pdf to SVG. I need to preserve the text but SVG keeps converting it to path. I have tried embedding the fonts in the pdf but still the same result. Do you know if it is possible to preserve the text during conversion so

  • Google Docs: Unicode symbols not in default Windows fonts garbledAugust 19

    When using a symbol such as unicode elment of ∈, subset of ⊆, etc., which does not appear in standard windows fonts the PPT exported file contains blank squares instead of the font. I expected the importer to automatically replace the character with

  • Inkscape: How to choose font replacement?

    Inkscape: How to choose font replacement?October 20

    Every decent drawing/vectorial software like Adobe Illustrator or CorelDraw shows-up a dialogue asking how would you like to replace the fonts type-faces that it wasn't able to find on the system, something like this: I cannot find a way do it in Ink

  • Problems with Dynamic Text in SVG when font is not SVG

    Problems with Dynamic Text in SVG when font is not SVGJune 26

    So, I have an graphics automation chain that has been happily running on a headless linux environment using programmaticaly generated/altered SVGs and PhantomJS (currently 1.9.0) as a final rendering engine. I have some dynamic text replacement requi

  • Inkscape 0.91 shows Font Size 14 in dropdown and 17.5px in XML Editor

    Inkscape 0.91 shows Font Size 14 in dropdown and 17.5px in XML EditorSeptember 27

    I am using Inkscape 0.91 for Ubuntu and am working on a template. The unit chosen for the document is pixels, the font size for the menu items Open Sans 14px all caps. But when I check the font size in the XML editor it states it is 17.5px . Why is t

  • svg from inkscape - doesn't work in xelatex?November 29

    I want to make use of "svg in tex" technology. Here's a tex: \documentclass{article} \usepackage{color} \usepackage{graphicx} \newcommand{\executeiffilenewer}[3]{% \ifnum\pdfstrcmp{\pdffilemoddate{#1}}% {\pdffilemoddate{#2}}>0{\immediate\writ

  • Can Inkscape be associated to SVG as the primary tool of the trade?

    Can Inkscape be associated to SVG as the primary tool of the trade? January 14

    I'm planning to make an icon to represent SVG. I know there are official logos, but I never saw them until I looked for them, and I don't believe many designers associate SVG to these logos. My icon design would be based upon the idea that (if the vi

  • How to convert an SVG image with LaTeX in Inkscape, to PNG?

    How to convert an SVG image with LaTeX in Inkscape, to PNG?February 17

    I'm using Inkscape to draw images, together with the ability to produce the separate LaTeX file with all the text, as described here. So far, this has been working great, but now I am restricted to use .png, .jpeg, or .bmp for my figures. Is there a

  • Create PDF from Inkscape SVG without destroying fonts and effects

    Create PDF from Inkscape SVG without destroying fonts and effectsMay 12

    I have an Inkscape SVG file with a few transparency effects and different layers that I want to export to a PDF file for distribution. When I use "Save as..." or "Save a copy..." and select the PDF format, all the effects are garbled:

  • How to link SVG files to Inkscape?

    How to link SVG files to Inkscape?December 17

    I installed Inkscape-0.48.3.1 via MacPorts to my Mac OS X 10.9.1 System. I Can start it from the Terminal using the command inkscape, which starts inkscape fomr the location /opt/local/bin/inkscape. How can I link Inkscape to SVG files? I'd really li

  • Inkscape: Is it possible to always save as both SVG and PDFMarch 26

    Using Inkscape, I would like to automatically and always save my files in both PDF and SVG format. The reason is that I embed the PDF file into another document, while I want want to keep the SVG file for further editing. However, I am getting annoye

  • How to inlcude svg in xelatex November 29

    I want to make use of "svg in tex" technology. Here's a tex: \documentclass{article} \usepackage{color} \usepackage{graphicx} \newcommand{\executeiffilenewer}[3]{% \ifnum\pdfstrcmp{\pdffilemoddate{#1}}% {\pdffilemoddate{#2}}>0{\immediate\writ

  • An Introduction to Snap.svgOctober 24

    Although SVG has been around for more than a decade, it became popular in the last few years as a way to draw charts in web applications, thanks to some great libraries that have made beautiful charts and drawings effortlessly available to developers

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.299 s.