NO END FOR LEARNING

Writing blog if you feel tired | 学海无涯 苦写博客

SVG和IconFont

| Comments

在大型企业中,它们都拥有自己的VI,有自己的设计团队,他们来开发设计一些企业特有的图标和标志。而这些图标一般以矢量图的方式提供给我们。

矢量图,也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性。

SVG(Scalable Vector Graphics)是什么?

大部分人第一次见到它,肯定认为是一种矢量图图形格式,但严格来说它也是一种开放标准的矢量图形语言,是使用XML来描述二维图形和绘图程序的语言,它是一门语言,DSL(领域特定语言)。

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

上面这段代码得到的svg矢量图,如下:

Alt text

我们在响应式网页设计的工作中经常用到SVG,因为一般的图片没有办法进行适当的缩放,普通图片的缩放会导致图像的失真,同时,图片的文件大小也可能和你希望的图片不一致(大图被缩小使用,导致图片文件大小仍然很大)。

我相信大部分前端开发工程师都用过IconFont,比如:http://fontawesome.io/icons/ 和bootstrap中的glyphicons http://v3.bootcss.com/components/#glyphicons

关于为什么要转换为Icon Font?CSS-Tricks中有一篇文章详细的对比了SVG和ICON Font,见: https://css-tricks.com/icon-fonts-vs-svg/

简单版,一个最主要的原因必须使用IconFont,因为要兼容IE8。

一个比较有用的gulp插件,可以将SVG文件转化为font字体文件,并自动生成对应的scss文件(包含font-familly和content)。

https://github.com/nfroidure/gulp-iconfont

当然,我们也可以使用一些在线工具来将SVG文件转化成字体文件比如: https://icomoon.io/

.bash_profile和.bashrc

| Comments

做个记录

转载自: http://www.joshstaiger.org/archives/2005/07/bash_profile_vs.html

WHEN working with Linux, Unix, and Mac OS X, I always forget which bash config file to edit when I want to set my PATH and other environmental variables for my shell. Should you edit .bash_profile or .bashrc in your home directory? You can put configurations in either file, and you can create either if it doesn’t exist. But why two different files? What is the difference? According to the bash man page, .bash_profile is executed for login shells, while .bashrc is executed for interactive non-login shells.

What is a login or non-login shell?

When you login (type username and password) via console, either sitting at the machine, or remotely via ssh: .bash_profile is executed to configure your shell before the initial command prompt. But, if you’ve already logged into your machine and open a new terminal window (xterm) inside Gnome or KDE, then .bashrc is executed before the window command prompt. .bashrc is also run when you start a new bash instance by typing /bin/bash in a terminal. Why two different files?

Say, you’d like to print some lengthy diagnostic information about your machine each time you login (load average, memory usage, current users, etc). You only want to see it on login, so you only want to place this in your .bash_profile. If you put it in your .bashrc, you’d see it every time you open a new terminal window. Mac OS X — an exception

An exception to the terminal window guidelines is Mac OS X’s Terminal.app, which runs a login shell by default for each new terminal window, calling .bash_profile instead of .bashrc. Other GUI terminal emulators may do the same, but most tend not to.

就是注意一点,这里提到Mac会有些不同。

什么时候会用到呢?其实有很多,比如,安装mysql时,希望通过命令访问,就需要把mysql的路径放在path中。又比如,安装nvm时,配置nvm的命令。还有比如希望使用alias命令,添加一些快捷命令,也需要配置。