将天气字形转换为SVG文件

时间:2016-11-12 00:29:59

标签: svg fonts font-awesome inkscape

我正在尝试在Inkscape中使用these excellent weather glyphs,而不是在浏览器中使用字体。有没有办法可以将它们转换为我可以导入的常规SVG文件?

非常感谢, 亚历

2 个答案:

答案 0 :(得分:2)

TL; DNR

  1. 安装'天气图标'系统中的字体来自以下链接。
  2. 保存下面的svg文件。
  3. 在Inkspace中打开它,现在您将所有字形复制并粘贴为文本或选择文本框并单击路径>对象到路径,然后取消组合,直到您选择了单个字形。您现在可以根据需要操作它们。
  4. 获取字体

    您最好的选择是从该项目的网络page下载字体并将其安装到您的系统中。您没有指定正在使用的操作系统,但在大多数情况下,它就像双击字体文件一样简单,并且可能会询问您是否要安装该字体。在此之后,您可以在接受它们的程序中使用这些字体系统(在我的情况下,我在从项目页面解压缩下载后安装了weather-icons-master / font /文件夹中的.ttf文件;我正在运行Ubuntu Trusty 14.04)

    在Inkscape中你可以创建一个文本框,按Ctrl + U,输入你想要的字形的unicode,然后按回车键,你会看到天气字形,如果你把字体改成了'天气图标&# 39 ;.例如,在文本框内,按Ctrl + U,然后按f00d,然后输入将生成' wi-day-sunny'字形(提供链接中的第一个字形)。

    将字体转换为路径

    在您的问题中,您可以参考将字体转换为常规SVG'您可以导入的文件。我将假设你的意思是路径和路径组。

    要将字体转换为路径,请选择文本区域,然后单击路径>对象到路径。

    如果您有多个字形,则可以将它们取消组合,直到找到各个字形,然后您可以根据需要修改,导出和进一步操作。

    如何拥有SVG图标字体'作弊表'在Inkscape中

    我在使用Font Awesome之前遇到过这个问题,现在看看这个问题:我不想手动为我想要在资产管道中使用的所有字形键入Unicode。这是一种半自动方式,可以获取特定字体系列提供的所有图标字体的列表。 警告:我将在文本编辑器(Atom)中使用正则表达式查找和替换

    • 在系统上安装所需的字体。
    • 在Inkscape中,通过转到Extensions>创建一些虚拟文本。文字> Lorem Ipsum(我使用的是Inkscape 0.91 r)。一个带有几句话的段落就可以了。或者你可以创建一个流动的文本框并粘贴你想要的任何文本,我们很快就会替换它。
    • 突出显示文本框中的所有文本,并将字体更改为所需的字体,并使字体更大(对于我选择40的天气图标,这似乎有用)。
    • 保存并退出Inkscape。
    • 在文本编辑器中打开Inkscape svg(xml)文件。
    • 删除<flowPara></flowPara>标记
    • 之间的虚拟文本
    • 在浏览器中,复制字体页面的页面源,其中列出了所有字形(上面提供的链接)
    • 使用正则表达式查找:^((?!\&#x[0-9a-f]*;?<\/).)*$替换:无
    • 使用正则表达式查找:^(.*)(&#x[0-9a-f]*)(.*)$替换:$2;
    • 使用正则表达式查找:\n替换:无
    • 您现在应该有一行文本,其中该字体中的字形的所有unicode代码用分号分隔,您可以将其粘贴到您打开的svg文件中的<flowPara></flowPara>之间,重新保存和在Inkscape中打开。
    • 您可能需要调整字体或流动文本框的大小,但现在您将所有字形放在一个位置。

    这对我来说既适用于天气字形,也适用于Font Awesome

    SVG备忘单代码(用于&#39;天气图标&#39;字体)

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       version="1.1"
       id="svg2"
       viewBox="0 0 744.09448819 1052.3622047"
       height="297mm"
       width="210mm">
      <defs
         id="defs4" />
      <metadata
         id="metadata7">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <g
         id="layer1">
        <flowRoot
           style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           id="flowRoot4136"
           xml:space="preserve"><flowRegion
             id="flowRegion4138"><rect
               y="17.991203"
               x="19.104477"
               height="1023.4542"
               width="715.05328"
               id="rect4140" /></flowRegion><flowPara
             style="font-size:50px;-inkscape-font-specification:'Weather Icons';font-family:'Weather Icons';font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal"
             id="flowPara4142">&#xf00d;&#xf002;&#xf000;&#xf001;&#xf003;&#xf004;&#xf0b6;&#xf005;&#xf008;&#xf006;&#xf007;&#xf009;&#xf0b2;&#xf068;&#xf00a;&#xf06b;&#xf065;&#xf00b;&#xf00e;&#xf00c;&#xf010;&#xf085;&#xf06e;&#xf072;&#xf07d;&#xf0c4;&#xf02e;&#xf086;&#xf022;&#xf023;&#xf024;&#xf025;&#xf028;&#xf026;&#xf027;&#xf029;&#xf0b4;&#xf06a;&#xf02a;&#xf06d;&#xf067;&#xf02b;&#xf02c;&#xf02d;&#xf031;&#xf02f;&#xf030;&#xf04a;&#xf032;&#xf033;&#xf083;&#xf036;&#xf034;&#xf035;&#xf037;&#xf0b3;&#xf069;&#xf038;&#xf06c;&#xf066;&#xf039;&#xf03a;&#xf03b;&#xf070;&#xf077;&#xf01d;&#xf01e;&#xf07e;&#xf080;&#xf081;&#xf041;&#xf013;&#xf011;&#xf012;&#xf014;&#xf015;&#xf019;&#xf017;&#xf018;&#xf01a;&#xf0b5;&#xf01b;&#xf01c;&#xf01d;&#xf01e;&#xf064;&#xf01b;&#xf074;&#xf062;&#xf016;&#xf04e;&#xf078;&#xf063;&#xf076;&#xf021;&#xf050;&#xf082;&#xf0c6;&#xf0c7;&#xf07c;&#xf071;&#xf0c5;&#xf0c8;&#xf073;&#xf056;&#xf0cc;&#xf0cd;&#xf0ce;&#xf0cf;&#xf0b1;&#xf075;&#xf03c;&#xf045;&#xf042;&#xf055;&#xf053;&#xf054;&#xf03d;&#xf040;&#xf03e;&#xf047;&#xf046;&#xf051;&#xf052;&#xf0c9;&#xf0ca;&#xf04c;&#xf04b;&#xf084;&#xf079;&#xf07a;&#xf07b;&#xf0cb;&#xf095;&#xf096;&#xf097;&#xf098;&#xf099;&#xf09a;&#xf09b;&#xf09c;&#xf09d;&#xf09e;&#xf09f;&#xf0a0;&#xf0a1;&#xf0a2;&#xf0a3;&#xf0a4;&#xf0a5;&#xf0a6;&#xf0a7;&#xf0a8;&#xf0a9;&#xf0aa;&#xf0ab;&#xf0ac;&#xf0ad;&#xf0ae;&#xf0af;&#xf0b0;&#xf0eb;&#xf0d0;&#xf0d1;&#xf0d2;&#xf0d3;&#xf0d4;&#xf0d5;&#xf0d6;&#xf0d7;&#xf0d8;&#xf0d9;&#xf0da;&#xf0db;&#xf0dc;&#xf0dd;&#xf0de;&#xf0df;&#xf0e0;&#xf0e1;&#xf0e2;&#xf0e3;&#xf0e4;&#xf0e5;&#xf0e6;&#xf0e7;&#xf0e8;&#xf0e9;&#xf0ea;&#xf08a;&#xf08b;&#xf08c;&#xf08d;&#xf08e;&#xf08f;&#xf090;&#xf091;&#xf092;&#xf093;&#xf094;&#xf089;&#xf058;&#xf057;&#xf04d;&#xf088;&#xf044;&#xf043;&#xf048;&#xf087;&#xf0b7;&#xf0b8;&#xf0b9;&#xf0ba;&#xf0bb;&#xf0bc;&#xf0bd;&#xf0be;&#xf0bf;&#xf0c0;&#xf0c1;&#xf0c2;&#xf0c3;</flowPara></flowRoot>    <flowRoot
           style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:10px;line-height:125%;letter-spacing:0px;word-spacing:0px"
           id="flowRoot4148"
           xml:space="preserve"><flowRegion
             id="flowRegion4150"><rect
               y="612.95923"
               x="122.8145"
               height="379.36035"
               width="84.605545"
               id="rect4152" /></flowRegion><flowPara
             id="flowPara4154"></flowPara></flowRoot>  </g>
    </svg>
    

答案 1 :(得分:0)

我最终使用了method outlined by Gabi at Helpful Sheep。这是我用来将.svg文件拆分成一堆单独的.svg文件的代码:

import sys

if len(sys.argv) < 2:
    print 'Usage: python {} webfont-file.svg'.format(sys.argv[0])
    sys.exit()
with open(sys.argv[1], 'r') as r:
    lines = r.read().split('\n')
    glyphs = [x for x in lines if '<glyph' in x]
    # for every glyph element in the file
    for i in range(0, len(glyphs)):
        with open(str(i + 1).rjust(3, '0') + '.svg', 'w') as w:
            w.write('<?xml version="1.0" standalone="no"?>\n')
            w.write('<svg width="1500px" height="1500px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n')
            # replace 'glyph' with 'path' and flip vertically
            w.write(glyphs[i].replace('<glyph', '<path transform="scale(1, -1) translate(0, -1500)"') + '\n')
            w.write('</svg>')

最大的问题是单个SVG没有标记,所以我不得不去手动识别哪些是我想要的。经过一段时间盲目地绊倒文件后,我认为使用地图会更简单,所以我制作了上面程序的一个版本,将所有内容转储到一个SVG中,所以我可以退出什么文件是什么:

import sys

if len(sys.argv) < 2:
    print 'Usage: python {} webfont-file.svg'.format(sys.argv[0])
    sys.exit()
with open(sys.argv[1], 'r') as r:
    lines = r.read().split('\n')
    glyphs = [x for x in lines if '<glyph' in x]
    # for every glyph element in the file

    with open(str(1).rjust(3, '0') + '.svg', 'w') as w:
        w.write('<?xml version="1.0" standalone="no"?>\n')
        w.write('<svg width="1500px" height="1500px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n')
        for i in range(0, len(glyphs)):    
            # replace 'glyph' with 'path' and flip vertically
            x = 3000 * i 
            w.write(glyphs[i].replace('<glyph', '<path transform="scale(1, -1) translate({}, -1500)"'.format(x)) + '\n')
        w.write('</svg>')