Svg to font windows

OpenType SVG Font Editor

The OpenType SVG Font Editor is a Universal Windows Platform (UWP) app for embedding SVG glyphs in an OpenType font. It was designed to simplify the process of creating SVG-based icon fonts, with web and app designers in mind. It can be considered a simpler, GUI-based version of the addSVGtable tool by Miguel Sousa of Adobe. Both of these tools use OpenType’s ‘svg ‘ table to include SVG content in the font file.

This project was originally developed by Microsoft interns Alice Wen, Anya Hargil, and Julia Weaver. While we hope you find the tool useful, Microsoft makes no guarantees about the quality of the app or the fonts it generates.

Acquiring the app

You can download a recent build of the app from the Windows Store or build the app yourself using the instructions below.

Building the app

Compiling this project requires Visual Studio 2017 or later and Windows 10 SDK version 10.0.15063.0 or later.

1. Download or clone the project repository.
2. Launch OTSVGEditor.sln.
3. Build the solution and launch the Editor project.

Running this app requires Windows 10 Creators Update or later.

The primary purpose of this app is to embed Scalable Vector Graphics (SVG) assets over existing monochrome glyphs in a font using a straightforward drag-and-drop interface. The app does so by automatically creating and updating the appropriate SVG-related OpenType tables in the font file and making appropriate adjustments to the SVG content as required by the OpenType spec.

The app can also remove SVG glyphs from a font, as well as copy all the SVG assets out of a font and into standalone .SVG files on disk.

Adding SVG glyphs to a font

1. Launch the app.
2. Click «Select font file. » and browse to the font file you want to modify. Once the app has loaded the font, it displays the list of glyphs (Unicode codepoints) defined by the font in a grid on the right.
3. Click «Select SVG folder. » and browse to the directory containing the SVG assets you want to embed. Once the app has loaded the SVG assets, it displays them in a list on the left.
4. To embed a new SVG glyph, drag an SVG file from the list on the left onto a glyph on the right. The app updates the glyph preview to show the placed SVG glyph.
5. When you’re finished, click «Save font as. » to save the modified font file to disk. (No changes are made to the original font file unless you save over it.) The resulting font file may be packaged with your app, installed on your system, or otherwise used anywhere OpenType SVG fonts are supported.

Removing SVG glyphs from a font

1. Launch the app.
2. Click «Select font file. » and browse to the font file you want to modify. Once the app has loaded the font, it displays the list of glyphs (Unicode codepoints) defined by the font in a grid on the right.
3. Right-click the glyph whose SVG representation you want to remove from the font, and select «Delete SVG».
4. When you’re finished, click «Save font as. » to save the modified font file to disk.

Extracting all SVG assets from a font

1. Launch the app.
2. Click «Select font file. » and browse to the font file whose glyphs you want to extract.
3. Click «Export all SVGs. » and select a destination folder.
4. The app will scan the font file for SVG glyphs and save them as individual .SVG files to the specified folder.

Limitations and known issues

• The app does not support creating new fonts «from scratch.» You must start with a «base» font, and you may only embed SVG onto existing glyphs in that font.
• The app does not support editing font characteristics such as advance width, kerning, ligatures, color palettes, or cross-glyph SVG sharing.
• This app only parses cmap table formats 0, 4, 6, and 12.
• The app’s glyph preview grid only renders SVG glyphs according to Windows’ support. Other text renderers may give different results.

This project is licensed under the MIT License.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

About

A user-friendly tool for adding SVG to OpenType fonts

SVG шрифты

Когда был написан стандарт SVG, поддержка веб-шрифтов ещё не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.

SVG-шрифты корректно поддерживаются только в Safari.
Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили её реализацию на неопределённое время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.

Элемент (en-US) используется для определения SVG-шрифта.

Установка шрифта

Есть некоторые нюансы, необходимые для вставки шрифта в SVG. Давайте рассмотрим пример объявления (указанный в спецификации), и объясним детали.

Начнём с элемента (en-US). Он имеет атрибут id , который позволяет ему ссылаться через URI (см. ниже). Атрибут horiz-adv-x определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки.

Элемент (en-US) является в SVG эквивалентом объявления шрифта с помощью CSS-свойства @font-face. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведённом выше примере, первое и самое важное свойство, которое должно быть определено — это font-family , на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты font-weight и font-style имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты — это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз выносных элементов.

Дочерний элемент (en-US) соответствует свойству src для атрибута @font-face в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов (en-US) и (en-US). В приведённом выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.

Следующий элемент за (en-US) — это (en-US). Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже (en-US), или

How to convert .svg files to a font? [closed]

Want to improve this question? Update the question so it’s on-topic for Stack Overflow.

Closed last year .

Can anybody help me to convert .svg files to a font file? or is there a way to do it on the fly?

3 Answers 3

I found two relevant answers here on Stack Overflow:

Unfortunately, neither is really a coding answer, which is what I had really hoped for (a command line utility for scripted conversion or perhaps an API with which somebody could write such a thing).

Still, I got what I was looking for by combining those two answers.

Clean up SVG

_{(This step might be optional.)} Open up your SVG in the free software program InkScape. Copy the existing SVG and create a new project from the FontForge Glyph template. Paste into that template, standardize the look, size, and position, and save as PLAIN SVG, one file per character («glyph»).

Convert SVG to font

Then, either use the free software program FontForge directly (as directed in the first answer, creating icon fonts with vector software) or else use the free IcoMoon online service (as directed in the second answer, tools to convert svg to ttf). I did the latter.

Using IcoMoon

IcoMoon is a rather straightforward tool. Click the purple Import Icons button on the top of the page to import each of your custom SVG glyphs. Then click «Get Info» on the set’s preferences so you can name the set and give it some metadata. Use the «Edit» tool (the pencil icon) and click on each glyph to get the sizing and spacing just right.

When you’re done, select all of the glyphs you want in the font and then press the «Generate Font» button at the bottom of the page. On the resulting screen, you can then map each glyph to a unicode character. On the right side, you can type or paste a character, or on the left side, you can enter its hexadecimal code. A program like GNOME Character Map (for Linux) or Windows Character Map or Mac OS Character Palette may help you find appropriate codes for your glyphs.

Now press the «Preferences» button at the top of the screen (or the gear at the bottom right) and finalize the name and metadata of your new font and press the «Download» at the lower right. You’ll get a Fontname.zip file that contains a bunch of usage suggestions as well as the font files themselves.

Iterate

I found the sizing and spacing was really hard to get right (I was making letters). I kept iterating on IcoMoon, installing the font, and comparing my letters to letters in a similar font (using a word processor). Sizing was easy to get right, but spacing was not so easy (and I wasn’t even messing with ligatures or kerning!). Don’t forget that some systems require flushing the font cache after installing a new font (on Linux, that’s fc-cache from Fontconfig)

Validate the font

You may also want to validate your font. Font Squirrel is an online service that lets you do that, offering corrections as well as usage tips. I think IcoMoon already does this, so perhaps that’s only of use for FontForge creations.

Svg to font windows

You can export SVGs from any vector software like Adobe Illustrator, Inkscape or Sketch. File > Save As > SVG

I already have an SVG font but I want to add more characters to it. Can I do that with Glyphter?

Sure! Just drag the SVG font over one of the grid tiles and we’ll do the rest.

Note: This feature is in beta, please email sayhello@glyphter.com if you are having a problem and include the font in your email.

How do I install my font?

To install and use your font, download the font using the «download» button. Unzip and open the downloaded file. In the «fonts» folder you will find a file with a .ttf extension. Double clicking the font will install it on your computer. To use it on the web, consult the developer FAQ coming soon.

Why should I make fonts with icons?

Fonts can contain a large number of icons at a much smaller filesize.The icons are fully scalable and fully editable by developers (color, size, weight).

Why would I use Glyphter?

To create your own fonts! Glyphter allows you to take SVG files and map them to a character grid. You can then output and use your font anywhere.

An SVG is a Scalable Vector Graphic. Unlike pixel based graphics, SVGs can be scaled infinitely.

How do I save my font?

Click the floppy disk icon in the navigation bar to save your font. If you are not logged in, you will be prompted you to do so.

How do I change my font name?

Click in the text field in the navigation bar with the placeholder text ‘Untitled Font’. Enter the name of your font and click save.

Why are there different folders in my downloaded font?

The different folders host files necessary to host and use your font on the web. If you only want to use the font on your machine you can install the font by opening the .ttf file. What are the options in the settings window?

These are optional superuser settings that change the general appearance of your outputted font (alignment, etc). You can also change the class prefix for use on the web.

How do I use the icon shelf (right side of the screen)?

Simply drag icons from the shelf and drop them onto the grid to map them to characters in your font. You can change the icon selection using the side arrows in the shelf or click the menu icon to browse all icon sets. The search entry allows you to easily find icons.

How do I use the glyph editing shelf (left side of the screen)?

This shelf allows you to assign a CSS class name for use on the web. It also allows you to edit glyph paths on the fly. Click the path in the shelf to select it, then use the tool buttons to move it around, scale it, delete it etc. (more details coming soon)

If all else fails? Contact us. sayhello@glyphter.com What other projects is the Glyphter team working on? We’re working on JobQuestr, an app that matches software developer talent with top recruiters in their local market and assists them in finding the best jobs. If you’re a top notch recruiter, find out more about working with us.

Glyphter Premium Questions

Glyphter started as a fun weekend project and has turned into a tool that lots of people use for their jobs and for fun. Premium membership helps support the continued development of Glyphter.

What benefits come with Glyphter premium?

Glyphter premium members get multiple projects, unlimited grids, and faster replies to support emails (although we try to reply quickly to everyone)!

I have more than one existing project. Will I have to upgrade to access my other projects?

Nope. As long as a project has been created, it can still be accessed. We won’t hold your content hostage like some other sites do.

What features will my premium membership help to build?

We’re planning on adding multiple languages, hosting of fonts, WOFF2 support, and more. If you have feature ideas, send them to us at sayhello@glyphter.com.

How do I upgrade to Glyphter premium?

Just click one of the premium buttons (at the end of the grid or when you’re logged in, at the top of your project list).

How do I cancel my premium subscription?

If you wish to cancel your premium subscription, the Gopher will shed a tiny tear. If this isn’t enough to guilt trip you into staying, just click here. Your premium access will remain in effect until the end of the current billing period.

Конвертер SVG в TTF

Сконвертируйте ваши svg-файлы в ttf онлайн и бесплатно

• Image
• Document
• Ebook
• Audio
• Archive
• Video
• Presentation
• Font
• Vector
• CAD

• abc
• abw
• csv
• dbk
• djvu
• dng
• doc
• docm
• docx
• erf
• ebm
• ewm
• emw
• gzip
• kwd
• odt
• oxps
• ppt
• pptx
• pdf
• rtf
• rar
• txt
• wps
• xls
• xlsx
• zip

• Image
• Document
• Ebook
• Audio
• Archive
• Video
• Presentation
• Font
• Vector
• CAD

• abc
• abw
• csv
• dbk
• djvu
• dng
• doc
• docm
• docx
• erf
• ebm
• ewm
• emw
• gzip
• kwd
• odt
• oxps
• ppt
• pptx
• pdf
• rtf
• rar
• txt
• wps
• xls
• xlsx
• zip

Масштабируемая векторная графика

TrueType Font

Как сконвертировать SVG в TTF

Загрузите svg-файл(ы)

Выберите файлы с компьютера, Google Диска, Dropbox, по ссылке или перетащив их на страницу.

Выберите «в ttf»

Выберите ttf или любой другой формат, который вам нужен (более 200 поддерживаемых форматов)

Загрузите ваш ttf-файл

Позвольте файлу сконвертироваться и вы сразу сможете скачать ваш ttf-файл