How to Convert .Svg Files to a Font

Why does this .svg file not convert to a font?

'Problem' lays within the app.

Basicly it changes every path to the same color, so white overlapping paths just blend in. You can delete first path

<path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" />

(which is just unnecessary square in the background) to see that it actually works. You will have to convert your paths into a shape so there will be no overlaps but 'cuts'.

---

Out of boredom I created working version:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve">
    <path d="M50,26.1c-0.2,7-3.7,13.9-9.2,18.3c-5,4.2-11.8,6.2-18.3,5.5 c-7.1-0.6-13.8-4.6-17.9-10.4C-1,31.8-1.5,20.8,3.3,12.6c3.6-6.3,9.9-10.9,17-12.2C27.7-1,35.6,1.1,41.4,6.1c0,5.5,0,11,0,16.4 c0.1,1.5-0.5,2.9-1.2,4.2c-1,1.9-2.1,3.8-3.1,5.6c-0.3,0-1,0-1.4,0c-1.5,2.5-2.9,5-4.2,7.6c0.6,0.4,1.1,0.8,1.7,1.2 c-0.5,1-1.2,1.9-1.4,3c1.6,0.6,1.8-1.4,2.5-2.4c0.5,0.2,1.1,0.5,1.6,0.7c0.6-0.2,0.8-0.8,1.1-1.3c1.1-2.1,2.3-4.2,3.5-6.4 c-0.3-0.2-0.8-0.6-1.1-0.8c1.3-2.6,2.9-5,4-7.6c1-2.3,0.7-4.9,0.7-7.4c0-3.2-0.1-6.4,0.1-9.6C48.3,13.9,50.2,20.1,50,26.1z M15.6,4.3C10.5,6.6,6.3,10.8,4.1,16c-0.6,1,1.2,1.2,1.3,0.3c1.9-4.4,5.3-8.1,9.6-10.2c0.8-0.4,1.7-0.7,2.4-1.4 C17.2,3.7,16.2,4,15.6,4.3z M18,7.2C13.2,9,9.2,12.9,7.3,17.7c0.2,0.2,0.6,0.6,0.9,0.8c0.5-0.6,0.9-1.3,1.2-2c1.8-3.6,5-6.4,8.7-7.9 C18.8,8.4,18.8,7.4,18,7.2z M18.6,10.9c-3.4,1.5-6.3,4.3-7.8,7.7c-0.4,0.5,0.1,1,0.5,1.3c0.4-0.3,0.7-0.7,0.9-1.2 c1.2-2.5,3.1-4.6,5.5-5.9c0.8-0.5,1.7-0.7,2.3-1.5C19.8,10.6,19.3,10.5,18.6,10.9z M31.8,19.1c-2.3-2.7-6.3-3.8-9.7-2.7 c-2.9,0.9-5.3,3.5-6,6.5c-0.9,3.3,0.4,7.1,3.1,9.2c3.4,2.9,8.8,2.6,11.9-0.4C34.6,28.4,34.9,22.6,31.8,19.1z M25.2,32.4 c-3.4,0.3-6.6-2.2-7.5-5.4c-1.1-3.9,1.4-8.2,5.4-9.1c3.8-1.1,8.1,1.5,9,5.3C33.4,27.5,29.7,32.4,25.2,32.4z M26.9,23.5 c-1.3-2-4.8-0.7-4.5,1.6c-0.1,1.1,0.9,1.8,1.6,2.4C26.2,28.1,28.5,25.4,26.9,23.5z"/>
</svg>

Including fonts when converting SVG to PNG

I'm able to include the font in the png itself with the following code, give it a try

var svg = document.getElementById('generated-svg');
var svgData = new XMLSerializer().serializeToString( svg );

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 500;
var ctx = canvas.getContext("2d");

//display image
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );

img.onload = function() {
ctx.drawImage( img, 0, 0 );

//image link
console.log( canvas.toDataURL( "image/png" ) );

//open image 
window.location.href=canvas.toDataURL( "image/png" );
};

https://jsfiddle.net/user3839189/hutvL4ks/1/

Offset when convert SVG to font with Glyphter.com - Offset

As mentioned in the comments, you can use FontForge for low-level control of the glyphs in almost any font.

• FontForge is free: https://fontforge.github.io/en-US/
• It can be installed on Windows, Mac OS X and GNU+Linux
• You can manipulate individual glyphs, and perform bulk operations
• When you're done editing your font, you can export it to almost any font-mime-type (ttf, otf, woff, svg, etc)

This is a good manual for installing and using FontForge:

http://designwithfontforge.com/en-US/index.html

The information you will probably need for this specific issue is here:

http://designwithfontforge.com/en-US/Spacing_Metrics_and_Kerning.html

Bulk centering all glyphs:

• open the font you want to edit
• to see all the relevant glyphs select Encoding -> Compact from the top menu
• to select all the glyphs, press Ctrl+A on your keyboard, then
• to center all the glyphs relatively, select Metrics -> Center in Width from the top-menu.

The following screen-shots illustrate the last 3 points in sequence - mentioned above:

When you're done, select File -> Generate Fonts from the top-menu and choose the font-type you want, choose the target folder, and hit Save.

---

Related Topics