svg知识小结及心得

---

小结

简洁介绍：SVG即saclable vector graphics，可伸缩矢量图。svg的第一个版本在2001年出现，但直到高分辨率设备出现才被广泛使用。 svg支持三种图像对象：矢量标 线条图 图表

优势：svg允许在代码中使用矢量点来描述二维图像， 且相较于PNG，GIF和JPEG,其文件更小，且可以缩放到任意大小而不损失清晰度。

用法：

1 可直接在web页面插入svg（使用img或object标签）

2. 把svg作为背景图像插入

3.利用svg图标服务
[ icomoon网址: ] [ https://icomoon.io/app/#/select ]

4.内联svg （可根据上下文改变svg颜色）

微信图片_20180620003038.png

微信图片_20180620003057.png

svg插入方法：

• 通过img标签插入
• 通过object标签插入
• 设置为背景图像
• 内联

其中以object标签插入及内联方式插入svg图片课使用的功能最多

---

心得

在使用svg图片时，我首先使用了新建html的内联式插入，但是做法与书中的不甚相同。

微信图片_20180620100948.png

根据此做法可以给svg图片增加背景颜色，但应用于网站上时出现了问题：只显示了背景颜色，没有svg图片。

initpintu_副本.jpg

所以在尝试过后，我应用回了书上原本的方法，成功添加svg图片于posts内，且改变图标颜色。