在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示。
而实际上,这些简单的小图标完全没必要让美工来做,前端完全可以通过 svg
使用代码把这些简单的图标画出来,并且,因为这些图标是用代码描述出来的,所以如果想要修改这些图标,例如改变图标的颜色、图标的形状、大小等,都只是改几行代码的事情,非常简单,根本无需美工返工重做。
本文不是阐述如何利用 svg
来进行画图的,不了解 svg
的可以点击 这里查看, 本文主要说一下如何在网站中使用 svg
。
SVG在一般网页中的使用
svg
使用 XML
格式定义图像,你也可以把它看做是一般的 HTML
标签,镶嵌在网页中呈现出某种效果,在网页中使用 svg
的基本示例如下:
<body>
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%"
style="fill:pink;stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
</body>
效果如下:
可以看到,普通网页中使用 svg
是很简单的,只要你能把 svg
图标画出来,在网页中的呈现完全不是问题。
在 Vue中使用 Svg
你完全可以像在 普通网页中使用 svg
那样在Vue
中使用,不过,既然已经是选择 vue
来组件化开发项目了,那么在一堆组件中,穿插一大段的 svg
毕竟有点不太好看。
一种解决方法是,利用 svg
的 use
标签,不直接在主页面中编写绘制svg
图标的代码,而是把这一大段的代码放到另外的文件中,然后使用 use
引用这段绘制图标的代码即可,目前 饿了么移动端就是这么干的。
例如,将所有绘制 svg
的代码放到 svg-icon.vue
文件中,所有图标的绘制代码使用 symbol
标签分隔开并单独命名,避免错乱,然后将这个文件当做是一个组件导出,在主页面中引入此组件,接着,在需要 使用 svg
图标的地方,通过 use
标签将其引入。
svg-draw.vue
代码示例如下:
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXl