[分享]css3支持svg

CSS3支持SVG (Scalable Vector Graphics 可缩放矢量图形) 的出现，可以令 web 设计师不再只依靠位图的图像，同时也增强了web 动画的表现力。

img{
  background:url(svgFile.svg), no-repeat;
} 

在之前的 web 设计中，要使用矢量图形通常需要使用 Adobe Flash，但由于它并不是免费的，而且在一些设备（如 iPhone 和 iPad）上并不支持，因此具有局限性。而 CSS3 的出现则为web设计师提供了一种便捷而强大的方式，使用 CSS3 可以在任何支持SVG的浏览器上进行矢量图形的使用。

在 CSS3 中，我们可以使用 background-image 属性来引入 SVG 路径。

background-image: url('svg图像的路径'); 

在使用 SVG 时我们可以使用 CSS3 来改变图像颜色。具体方式为使用属性 fill 或 stroke。

path{
  fill:red;
} 

需要注意的是，由于在某些旧的浏览器中并不支持 SVG，因此我们需要使用一些 hack 或者 JS 来进行兼容。但是大部分现代浏览器都支持，不必太担心兼容性问题。

总的来说，CSS3 支持 SVG 提供了一种简单而强大的方式，用于在 web 上显示矢量图形。无论是在实现设计还是动画方面，都提供了更多选择，并且在移动设备和不支持插件的浏览器中，使用 SVG 更加方便和可靠。