Importing SVG Color Font
Importing SVG Color Font
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!!
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!!
-
- Moderator
- Posts: 11158
- Joined: Fri Oct 04, 2002 12:41 am
- Location: Bilthoven, The Netherlands
- Contact:
Re: Importing SVG Color Font
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.
Re: Importing SVG Color Font
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
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
-
- Moderator
- Posts: 11158
- Joined: Fri Oct 04, 2002 12:41 am
- Location: Bilthoven, The Netherlands
- Contact:
Re: Importing SVG Color Font
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.:
Then right-click inside the edit area to edit or import the SVG document.
You need to open a glyph panel and then go into SVG color mode.:
Then right-click inside the edit area to edit or import the SVG document.
Re: Importing SVG Color Font
Wow! I never thought of right clicking to add the glyph! So easy!
Thanks so much!
Thanks so much!
Re: Importing SVG Color Font
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.
Your help is appreciated.
Re: Importing SVG Color Font
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.
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.
-
- Moderator
- Posts: 11158
- Joined: Fri Oct 04, 2002 12:41 am
- Location: Bilthoven, The Netherlands
- Contact:
Re: Importing SVG Color Font
Yes, after importing it can not be moved.
You can use a transform, like:
<g transform="translate(30,40) scale(2)">
<!-- graphics elements go here -->
</g>
or use a matrix to accomplish the same:
<g transform="matrix(2 0 0 2 30 40)">
<!-- graphics elements go here -->
</g>
You can use a transform, like:
<g transform="translate(30,40) scale(2)">
<!-- graphics elements go here -->
</g>
or use a matrix to accomplish the same:
<g transform="matrix(2 0 0 2 30 40)">
<!-- graphics elements go here -->
</g>
Re: Importing SVG Color Font
Thanks a bunch!
A few questions about what you wrote:
<g transform="translate(30,40) scale(2)">
<!-- graphics elements go here -->
</g>
or use a matrix to accomplish the same:
<g transform="matrix(2 0 0 2 30 40)">
<!-- graphics elements go here -->
</g>
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!
A few questions about what you wrote:
<g transform="translate(30,40) scale(2)">
<!-- graphics elements go here -->
</g>
or use a matrix to accomplish the same:
<g transform="matrix(2 0 0 2 30 40)">
<!-- graphics elements go here -->
</g>
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!
-
- Moderator
- Posts: 11158
- Joined: Fri Oct 04, 2002 12:41 am
- Location: Bilthoven, The Netherlands
- Contact:
Re: Importing SVG Color Font
You need to include the paths inside, see:
Code: Select all
<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>
Re: Importing SVG Color Font
Code: Select all
<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>
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 <path> command? I know a little about coding, but this is intimidating.
Thanks!
<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>
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 <path> command? I know a little about coding, but this is intimidating.
Thanks!
-
- Moderator
- Posts: 11158
- Joined: Fri Oct 04, 2002 12:41 am
- Location: Bilthoven, The Netherlands
- Contact:
Re: Importing SVG Color Font
If you only want to move the SVG outline, then change the translate values:
Code: Select all
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(250,75)">
<!-- graphics elements go here -->
</g>
</svg>
Re: Importing SVG Color Font
Thank you very much! I will try that tomorrow.