Create SVG Font Icons

Select the desired icon and its font size. It will will be created and the 'native' width/height of each SVG font is determined, via its getBBox. Each is then offset so its center is at(0,0). It will be placed in the svg application via translation of x,y values.

1.) A select provided that creates each SVG Font Icon. Its font size and stroke-width factor can be chosen. Following its creation, using getBBox, the native width and height is shown, used to determine each icon's offset.
1a.) stroke factor - the ideal stroke width for an icon is related to its size. Therefore each selected icon has the choice to increase/decrease its width relating to its font size.

2.) Each Icon's Unicode/Hexadecimal code is inserted into SVG as follows:
  a) codeParse=parseInt(code,16)
  b) iconText=document.createTextNode(String.fromCharCode(codeParse))
  c) myIcon.appendChild(iconText)

3.) A bounding box rectangle is included that shows the specific position of the rendered svg font. Typically, the width value corresponds to the font size. However the height value is generally greater than the selected font size. In both height and width, each font includes padding. This is typical for all fonts.

4.) By building the SVG icons at various font sizes and stroke factors, you can observe actual size, its stroke dynamics, plus its computed width, height, and offset values. In the majority of applications, it is acceptable to choose font size as the icon's size, realizing the actual size is smaller than font size.
Arial: Wingdings: Webdings:
Font Size: Stroke Factor: Stroke Width:(computed)
x: y:
Width: Height: Offset X: Offset Y:

SVG Source:
OK in:IE11/CH41/FF35