WCY LOGO的改进

一、插入SVG的多种方法:

1.使用 img 标签：直接将图像插入到HTML文档中。示例代码见RWD2 7.4.1

2.使用 object 标签：用于装载非 HTML 内容的容器 ，详情及示例代码见RWD2 7.4.2

3.把 SVG 作为背景图像插入：适用于你对SVG的需求主要是静态背景图片或者是图标之类。详见RWD2 7.4.3

4.内联SVG

5.通过CSS插入背景图像

5.使用 JavaScript 添加 SVG 动画

5.GreenSock 添加 SVG 动画

二、优化缩减百分比:

1.优化SVG文件的最简单的方法是使用自动化工具，推荐使用SVGOMG（https://jakearchibald.github.io/svgomg/）。

2.命名空间往往只是在生成SVG的程序中使用，所以在Web页面上展示SVG的时候它们并不是必需的。因此在优化流程中，为了减小SVG的大小，通常会把它的命名空间去掉。

3.去掉不需要的元素（如标题和描述元素）

4.g标签有助于图形编辑软件再次打开这个图像，因此这一部分无需去除

5.原来的SVG档的大小为43.2KB，优化後为30.1KB，因此优化缩减百分比为(43.2-30.1)/43.2=30%。

三、说明特效效果及使用的知识点:

1.根据上下文改变内联 SVG 颜色

2.把 SVG 作为滤镜

使用 img 标签插入SVG:

使用 object 标签插入SVG:

内联SVG:

通过CSS插入背景图像:

把 SVG 作为滤镜:

使用图像来作链接:

当鼠标经过图片时，logo旋转90°:

当鼠标经过图片时，logo变成成其他图片:

CSS 的 2D 变形: