This tool is a simple HTML5 web app that makes SVGs of characters from SVG font files.
In less techincal terms: this tool makes vector costumes from font files.

How to Use
Visit the link at the top of this post to open the tool.

To use it, you need an SVG font file (.svg). Chances are your font is something like a .ttf or .dfont. To convert other font files to SVG font files, you can use a different online tool such as Online Font Converter.

Once you have your SVG font file, return to my converter. You should see a set of buttons and text inputs arranged vertically. I recommend that you go through them from top to bottom.

• “Type a charset…”: Chances are you can leave the first input labelled “type a charset…” alone. Basically, you type or paste in the characters that you want converted to SVGs into this input. You will need to add characters yourself if you are a non-English speaker, or simply want characters beyond the printable characters in the ASCII set.
  
  
• “Load an SVG font file”: Click this button and then select your SVG font file. Below it, a preview of a converted character should appear beneath the button. The preview is the same size that your costumes will be when you import them into Scratch.
  
  
• “Set the size…”: Use this input to set the size of the outputted costumes to your liking. You may have to press enter after editing the number to see the effect. The preview will change size accordingly so that can you get your costumes just the right size.
  
  
• “Save as…”: Click “Save as .sprite2” to save your converted font as .sprite2 that can be imported into Scratch. The .sprite2 will also include two variables, “advx” and “advy”, that tell how wide and tall each character is, respectively. This variable will work best when converting monospace fonts.
  
  Alternatively, click “Save as .zip” if you just want a simple ZIP archive containing an SVG for each converted glyph(character). The SVGs will be named like “a.svg”(a), “ampersand.svg”(&), and “at.svg”(@), or, if you have converted uppercase and lowercase letters, “lowercase/a.svg” and “uppercase/a.svg”.

Known Issues
Scratch appears to be missing a few vector graphic features, so this tool will not always work. I determined that this is Scratch's fault, because my browser can display each generated SVG perfectly (as evidenced by the previews my tool gives). When you import into Scratch, however, some lines may be out of place.

Code
The source code is available on GitHub.
Credit to the creators of the zip.js JavaScript library. Without it, this tool would not be able to make .sprite2 or .zip files.
Also credit to other font converting tools. They do all the heavy lifting if your font was originally a .ttf or .dfont.

Everything is done client side and on one webpage.

Please tell me if you encounter any bugs.

why not just use inkscape?

RitaFreeman wrote:

why not just use inkscape?

I didn't use inkscape because I didn't want to download something I will never use, and because I wanted to automate the process. I've seen someone else on the Advance Topics forums a month back looking for a tool like this too because they didn't want to make each one by hand, center it, export it, and then make the .sprite2 by hand.

Making a .sprite2 requires each SVG to be numbered, and then tedious work has to be done in the sprite.json. They just can't imported normally because Scratch doesn't allow two costumes name “a” and “A”(it becomes “a” and “a2”), unless you modify the sprite.json manually, so this tool does that all for you.

This is mainly for making costumes for text renderers, where each letter gets it's own costume. If you just want to make a button costume with the words “start” or something, then Inkscape would definitely be better fit for the job.

Looks useful, I think I'll check it out!

I tried Inkscape and @FontGod's tutorial and it didn't work

TurquoiseTulip wrote:

I tried Inkscape and @FontGod's tutorial and it didn't work

I'm sorry that you are having trouble. I don't know how Inkscape converts glyphs in a font to paths, but my tool doesn't always work either. It appears to be because Scratch is missing a few vector graphics features. I need to rewrite the OP to include this…

Have you tried my tool, and did it work? Honestly, I have doubts that it will work, but I'd love to hear feedback about how easy it was to use. This is the first time I've had to design a user interface like this.

Hi there, this is a great tool! I just tried it on both chrome and safari and they both stumbled on “charset.contains(…)”. Under chrome, I commented that out and was able to get the tool to work under chrome. The type of ‘charset’ isn't an array and therefore does not have a method called ‘contains’. I haven't investigated further to see what your intent might have been with that call. If you like I could submit a pull request to you on github!

codubee wrote:

Hi there, this is a great tool! I just tried it on both chrome and safari and they both stumbled on “charset.contains(…)”. Under chrome, I commented that out and was able to get the tool to work under chrome. The type of ‘charset’ isn't an array and therefore does not have a method called ‘contains’. I haven't investigated further to see what your intent might have been with that call. If you like I could submit a pull request to you on github!

Thank you!

Thanks for the bug report too. I'm not sure why Firefox didn't get stuck at that part. I replaced it with charset.indexOf(…), which the documentation on MDN says is what I want, and all should be good now. The line was supposed to check if the glyph was specified to be converted in the “charset” variable.

Znapi wrote:

SVG Glyph to Paths Converter
http://znapi.github.io/svg-font-to-paths/

This tool is a simple HTML5 web app that makes SVGs of characters from SVG font files.
In less techincal terms: this tool makes vector costumes from font files.

How to Use
Visit the link at the top of this post to open the tool.

To use it, you need an SVG font file (.svg). Chances are your font is something like a .ttf or .dfont. To convert other font files to SVG font files, you can use a different online tool such as Online Font Converter.

Once you have your SVG font file, return to my converter. You should see a set of buttons and text inputs arranged vertically. I recommend that you go through them from top to bottom.

• “Type a charset…”: Chances are you can leave the first input labelled “type a charset…” alone. Basically, you type or paste in the characters that you want converted to SVGs into this input. You will need to add characters yourself if you are a non-English speaker, or simply want characters beyond the printable characters in the ASCII set.
  
  
• “Load an SVG font file”: Click this button and then select your SVG font file. Below it, a preview of a converted character should appear beneath the button. The preview is the same size that your costumes will be when you import them into Scratch.
  
  
• “Set the size…”: Use this input to set the size of the outputted costumes to your liking. You may have to press enter after editing the number to see the effect. The preview will change size accordingly so that can you get your costumes just the right size.
  
  
• “Save as…”: Click “Save as .sprite2” to save your converted font as .sprite2 that can be imported into Scratch. The .sprite2 will also include two variables, “advx” and “advy”, that tell how wide and tall each character is, respectively. This variable will work best when converting monospace fonts.
  
  Alternatively, click “Save as .zip” if you just want a simple ZIP archive containing an SVG for each converted glyph(character). The SVGs will be named like “a.svg”(a), “ampersand.svg”(&), and “at.svg”(@), or, if you have converted uppercase and lowercase letters, “lowercase/a.svg” and “uppercase/a.svg”.

Known Issues
Scratch appears to be missing a few vector graphic features, so this tool will not always work. I determined that this is Scratch's fault, because my browser can display each generated SVG perfectly (as evidenced by the previews my tool gives). When you import into Scratch, however, some lines may be out of place.

Code
The source code is available on GitHub.
Credit to the creators of the zip.js JavaScript library. Without it, this tool would not be able to make .sprite2 or .zip files.
Also credit to other font converting tools. They do all the heavy lifting if your font was originally a .ttf or .dfont.

Everything is done client side and on one webpage.

Please tell me if you encounter any bugs.

One of my .svg files doesn't work. When I click the save as .sprite2 button a message pops up saying that I must complete the other fields first.

skitcher wrote:

One of my .svg files doesn't work. When I click the save as .sprite2 button a message pops up saying that I must complete the other fields first.

Hmm…are you sure you filled out all 3 fields? The one under “Type a charset” should contain a bunch of letters and symbols (these will become costumes in the .sprite2), and the one under “Load an SVG font file” is where you select your font file.

skitcher wrote:

One of my .svg files doesn't work. When I click the save as .sprite2 button a message pops up saying that I must complete the other fields first.

Ok, I changed it a bit so that it should always tell you, in red text, what field(s) you haven't filled out. Could you try again and, if it still doesn't seem to work right, tell me what it says in red?

“You must complete the other fields first.”

Znapi wrote:

SVG Glyph to Paths Converter
http://znapi.github.io/svg-font-to-paths/

This tool is a simple HTML5 web app that makes SVGs of characters from SVG font files.
In less techincal terms: this tool makes vector costumes from font files.

How to Use
Visit the link at the top of this post to open the tool.

To use it, you need an SVG font file (.svg). Chances are your font is something like a .ttf or .dfont. To convert other font files to SVG font files, you can use a different online tool such as Online Font Converter.

Once you have your SVG font file, return to my converter. You should see a set of buttons and text inputs arranged vertically. I recommend that you go through them from top to bottom.

• “Type a charset…”: Chances are you can leave the first input labelled “type a charset…” alone. Basically, you type or paste in the characters that you want converted to SVGs into this input. You will need to add characters yourself if you are a non-English speaker, or simply want characters beyond the printable characters in the ASCII set.
  
  
• “Load an SVG font file”: Click this button and then select your SVG font file. Below it, a preview of a converted character should appear beneath the button. The preview is the same size that your costumes will be when you import them into Scratch.
  
  
• “Set the size…”: Use this input to set the size of the outputted costumes to your liking. You may have to press enter after editing the number to see the effect. The preview will change size accordingly so that can you get your costumes just the right size.
  
  
• “Save as…”: Click “Save as .sprite2” to save your converted font as .sprite2 that can be imported into Scratch. The .sprite2 will also include two variables, “advx” and “advy”, that tell how wide and tall each character is, respectively. This variable will work best when converting monospace fonts.
  
  Alternatively, click “Save as .zip” if you just want a simple ZIP archive containing an SVG for each converted glyph(character). The SVGs will be named like “a.svg”(a), “ampersand.svg”(&), and “at.svg”(@), or, if you have converted uppercase and lowercase letters, “lowercase/a.svg” and “uppercase/a.svg”.

Known Issues
Scratch appears to be missing a few vector graphic features, so this tool will not always work. I determined that this is Scratch's fault, because my browser can display each generated SVG perfectly (as evidenced by the previews my tool gives). When you import into Scratch, however, some lines may be out of place.

Code
The source code is available on GitHub.
Credit to the creators of the zip.js JavaScript library. Without it, this tool would not be able to make .sprite2 or .zip files.
Also credit to other font converting tools. They do all the heavy lifting if your font was originally a .ttf or .dfont.

Everything is done client side and on one webpage.

Please tell me if you encounter any bugs.