SVG Web/Icons fonts

[ctkjose]

I got the comercial version hoping for an affordable standalone app to quickly get svg icons into an svg font similar to what web apps like Fontello and IcoMoon do. Yet it was quite frustrating and end up back with Fontello. The app is nice but not that useful for my use case.

Having to set up the grid base line, x-height etc is just excessive for simple svg fonts. The preview is useless for unicode points (like the private use). You have to move and size every svg by hand, since the import does nothing but place svg at origin.

My which list would be:

1. Naming glyphs.
2. Generating a basic css with classes for named glyphs.
3. Folder import should allow for named files "name_U+61485.svg" to create named glyphs.
4. Importing svg should center and scale within the glyphs bounds which will be a safe guess for most icons.
5. Adding a setting to set a default import size for icon imports would be cool. An import size of 32x32 would be used to determine the scale and placement.

[johanmattssonm]

Thank you. This sounds like something I really want to work on.

1. Should the name be exported or is the name something that just is in the birdfont file?
2. Do you have a tutorial or example of how this works?
3. You can add a comment to your file names with the “#” symbol. Example: a#prettier.svg but also adding a name sounds like a good feature.
4. You can center glyphs in the overview tab, I am not sure if it needs to be done automatically. Maybe a new dialog for icon imports should have this option as well.
5. I am not sure what you want. Should an SVG file with the proportions 794x1123 (A4) automatically be scaled down to 22x32 and centered?

Cheers Johan

[ctkjose]

I like how this project does it. For example:

arrow-up-x2191.svg use the correct unicode symbol if possible magnifying-glass-xe001.svg otherwise use the unicode "Private Use Area" (start from xe001, don't use xe000) key.svg this file gets automatically mapped to a unicode "Private Use Area" symbol, if you use the --rename-files option this file will be renamed to something like key-xe002.svg

Using the file name is simple, also a couple of Graphics apps can export layers as svg files based on the layer name. (This is what im doing) which is a fairly simple workflow.

While naming a glyph is a nice feature, where it is actually a must if for generating the corresponding CSS. Using a web font without a CSS is not practical.

The css could also use a temple like you do for the html, the preference could also ask to the actual css style with a place holders for each code point. For example:

CSS ENTRY DEFINITION:

.myprefix-{%CODE-POINT-NAME%}:before {
    content: "\{%CODE-POINT-HEX%}";
}

CSS FILE TEMPLATE:

@font-face {
  font-family:"MyFont";
  src:url("{%FONT-NAME%}.eot?ef21c39f0ca9b1b5116e5eb7ac5eabe6");
  src:url("{%FONT-NAME%}.eot?#iefix") format("embedded-opentype"),
        url("{%FONT-NAME%}.woff2?ef21c39f0ca9b1b5116e5eb7ac5eabe6") format("woff2"),
        url("{%FONT-NAME%}.woff?ef21c39f0ca9b1b5116e5eb7ac5eabe6") format("woff"),
        url("{%FONT-NAME%}.ttf?ef21c39f0ca9b1b5116e5eb7ac5eabe6") format("truetype"),
        url("{%FONT-NAME%}.svg?ef21c39f0ca9b1b5116e5eb7ac5eabe6#octicons") format("svg");
  font-weight:normal;
  font-style:normal;
}

{%ICONS%}

In my examples I use place holders like {%FONT-NAME%}, {%ICONS%}, {%CODE-POINT-HEX%}, {%CODE-POINT-DECIMAL%}, {%CODE-POINT-NAME%}, any format for place holders is fine.

In the HTML template it could be cool if there is a place holder to auto generate all the code points used.

I currently have my own PHP script to build an svg sprite instead of an svg font.

[johanmattssonm]

Hi. I have implemented a new folder import function. There are still many thing to fix. Send me an email of you want a beta version.