SVG icons in Twenty Nineteen

时间:2020-05-25 作者:leemon

《二十一世纪主题》使用SVG作为其社交图标。例如,这是谷歌图标的代码:

<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M12.02,10.18v3.72v0.01h5.51c-0.26,1.57-1.67,4.22-5.5,4.22c-3.31,0-6.01-2.75-6.01-6.12s2.7-6.12,6.01-6.12 c1.87,0,3.13,0.8,3.85,1.48l2.84-2.76C16.99,2.99,14.73,2,12.03,2c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.77,0,9.6-4.06,9.6-9.77 c0-0.83-0.11-1.42-0.25-2.05H12.02z"></path>
</svg>
如您所见,它使用24x24px视图框。我想在一个219个孩子的主题中添加一些来自FontAwesome的SVG图标,但它们使用不同的视口。这是FontAwesome中Google图标的代码:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
    <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/>
</svg>
有没有办法将FontAwesome图标转换为使用24x24px视口?这仅仅是一个改变他们viewBox 属性

提前感谢

2 个回复
最合适的回答,由SO网友:leemon 整理而成

我设法使用Inkscape, 开源矢量图形编辑器:

打开Inkscape中的SVG图标File > Document Properties... 并将“宽度”(width)和“高度”(height)字段设置为目标大小使用Ctrl+A选择图标中的所有对象使用顶部菜单栏中的X、Y、W和H字段调整图标的位置和大小以适应新的视口

  • 保存文件

  • SO网友:mtedwards

    您不需要更改viewbox 属性你可以直接使用它。

    我认为SVG就像是在图纸上画出来的。viewbox显示纸上有多少个正方形path 在上面的示例中,您可以找到在图纸上绘制位置的指南。

    左上角为0,0,右下角为viewbox的极值。E、 g.24、24或488512。

    您应该能够交换SVG并使用CSS进行样式设置。