Importing SVG Color Font

FontCreator - Font Editor FontCreator - Support
1

I created a font with many colors, which I converted to SVG. I cannot figure out how to copy and paste the detailed design into FontCreator. It is not feasible to make a layer with each color. Every time I try to import, it changes to black. I read that the svg should have an outline, but then CorelDraw tries to outline each of the tiny bits in my design. Is there a way to just outline the outside and have it work? How do I get it to import with color?

Being able to have the convenience of being able to type with the design would be a huge benefit to me. Please let me know what you suggest.
Thanks!!

2

You can certainly make such complex OpenType font with SVG color glyphs. As you already did, you can design your SVG graphic in an external SVG editor, and then import the individual SVG documents for each glyph. This approach can be difficult at first, as the coordinate systems (scale and position) don’t always match, and SVG editors tend to add a lot of overhead.

3

Does it have to be a specific size?
How do I just outline the outside?
I know about the SVG color import that I am supposed to have selected, but I am missing something in the process!
Thank you very much

4

You might want to look at other fonts with SVG color glyphs.

You need to open a glyph panel and then go into SVG color mode.:
GlyphSVG.png
Then right-click inside the edit area to edit or import the SVG document.
GlyphEditSVG.png

5

Wow! I never thought of right clicking to add the glyph! So easy!

Thanks so much!

6

I was able to successfully import the colored SVG, but it imported below the lines and to the right. I cannot select the glyph and drag it into position. I cannot transform it, either. The selections in the transform dialog are grayed out. Drawing a box around the letter doesn’t select anything.
Your help is appreciated.

7

I read this in the manual:
Alternatively you can import an SVG file. Be sure the transform used within the SVG
document is adjusted so the color outline is positioned and sized correctly.

I don’t know how to change the offsets to 0, 0 in CorelDraw or Affinity Designer.
I cannot find any requirements on size, either.

Is it correct that once I import the design, I cannot move it anymore, because of the multiple colors?
If I cannot move it, please help me get the metrics right.
Thank you.

8

Yes, after importing it can not be moved.

You can use a transform, like:

or use a matrix to accomplish the same:

9

Thanks a bunch!
A few questions about what you wrote:

or use a matrix to accomplish the same:

Do I just copy one of the codes and plop it in a script? Do I need to add anything after the line “graphics elements go here?”
Do I import them into the wrong spot, then run the script on all the selected letters?

You are the best!

10

You need to include the paths inside, see:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="scale(1,-1)">
<path d="M701 1182c-334 0-605-271-605-605 0-334 271-605 605-605 335 0 606 271 606 605 0 334-271 605-606
605 z" fill="none" stroke="#FFF000" stroke-width="64" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M886 903c57 0 103-31 103-69 0-38-46-69-103-69-57 0-103 31-103 69 0 38 46 69 103 69 z M520 903c57
0 103-31 103-69 0-38-46-69-103-69-57 0-103 31-103 69 0 38 46 69 103 69 z" fill="none" stroke="#00DDFF"
stroke-width="64" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1112 555c0-171-182-309-406-309-224 0-405 138-405 309" fill="none" stroke="#FF0000"
stroke-width="64" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
11

Code: Select all

What part of that code do I need to edit to move the glyph up and to the left?
Does that action need all those lines of code in the command? I know a little about coding, but this is intimidating.
Thanks!

12

If you only want to move the SVG outline, then change the translate values:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(250,75)">
<!-- graphics elements go here -->
</g>
</svg>
13

Thank you very much! I will try that tomorrow.