Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generates corrupted svg files. #5

Closed
roelvanhintum opened this issue Mar 7, 2014 · 6 comments
Closed

Generates corrupted svg files. #5

roelvanhintum opened this issue Mar 7, 2014 · 6 comments

Comments

@roelvanhintum
Copy link
Contributor

Using the gulp-iconfont in combination with gulp-iconfont-css and standard configuration outputs corrupted svg files. I'm guessing this also corrupts the eot ttf and woff files.

The only config i used was fontName.

I see a lot of the following in the svg file (NaN and undefined):

<font id="icons" horiz-adv-x="NaN">
    <font-face font-family="icons"
      units-per-em="NaN" ascent="NaN"
      descent="0" />
    <missing-glyph horiz-adv-x="0" />
    <glyph glyph-name="arrow-down"
      unicode="&#xE001;"
      horiz-adv-x="undefined"
@nfroidure
Copy link
Owner

Wierd indeed. Can you give me the input icons ?

@roelvanhintum
Copy link
Contributor Author

I tested it with just this one and it still occurs.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<path d="M743.5,359h-44.3L500,585.5L300.8,359h-44.3L500,641L743.5,359z"/>
</svg>

@nfroidure
Copy link
Owner

It looks like the problem comes when the width and height attributes of the SVG icon is not mentionned.

I think using the viewport attribute will solve the problem http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute .

I don't know which editor you use, but using Inkscape will ensure you have a width and a height during the time i fix this up.

@nfroidure
Copy link
Owner

A simple fix:
nfroidure/svgicons2svgfont@0ce026b
nfroidure/svgicons2svgfont@26fd049

A better fix would be nfroidure/svgicons2svgfont#9

I will ship when i'll have enought feedback for this issue nfroidure/svgicons2svgfont#7

@roelvanhintum
Copy link
Contributor Author

The svg's are coming from Illustrator, looks like i messed up the export settings.
http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

The responsive svg option seems to be the problem here.

@nfroidure
Copy link
Owner

Could you PR the README with a section explaining wich AI options are the best ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants