mfc cwebbrowser2 显示.svg格式图片_SVG的正确使用姿势

SVG是一种向量图的图片格式，即可伸缩向量图(Scalable Vector Graphics)，可以在Adobe Illustrator里面生成。在Web中使用SVG很简单，但是也有一些需要知道的事情。

为什么用SVG

• 压缩后文件体积小
• 可以无损伸缩到任意尺寸(除非尺寸特别小)
• 在retina屏幕上可以完美显示
• 设计可控，比如交互和滤镜

怎么生成SVG

可以在Adobe Illustrator里设计并且得到SVG。下面是一个站在椭圆上的奇异鸟：

留意到画板刚好贴着设计主体的边缘，画布的大小在SVG里面的重要性和在PNG和JPG里面是一样的。

然后可以直接在Adobe Illustrator里面保存成SVG文件。

保存的时候，可以在duihua对话框里面选择SVG选项。完整的参考可以看SVG 介绍。这里选SVG 1.1就可以了。

当点击'OK'或者'SVG Code...'的时候，就会打开文本编辑器，显示SVG的编码。

在标签里面使用SVG

如果把SVG保存成文件之后，可以直接在标签里面使用。

HTML

在Illustrator里面，画板的大小是612px ✕ 502px：

这正是图片在页面中的大小。可以选择标签并且改变width和height来改变它的尺寸，就像PNG和JPG一样，比如：

前往codepen查看点击预览

https://codepen.io/chriscoyier/pen/lCEux

浏览器支持

在标签里面使用需要有浏览器支持。基本上在IE8以上和Android 2.3以上都可以用。

如果你想要在不支持的浏览器里面使用，可以这样：

1. 使用Modernizr来替换的src属性：

jQueryif (!Modernizr.svg) { $(".logo img").attr("src