在之前的几篇文章中，介绍了业界中比较火爆的图片技术SVG(Scalable Vector Graphics),比如 Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统 ,我们可以使用svg来打造精美炫酷的分享小图标(icon)，这一次我们使用python来将普通的静态的网站logo图片转换为带路径(path)的svg图片，这样就可以让网站logo能够变成动态的，作为一名不折腾不舒服斯基，一枚炫酷自带动画的网站logo自然能够满足我们的折腾欲，同时亦能击中我们的虚荣心。

首先第一步，先要将静态图做一步转换,以本站的logo作为例子，原理就是在普通的RGB图像阵列中将其像素进行转码操作，并且输出为svg特有的路径属性，当然了使用python进行图像操作少不了会用到鼎鼎大名的pillow模块import sys

import os

from PIL import Image

def convertPixel(r, g, b, a=1):

color = "#%02X%02X%02X" % (r, g, b)

opacity = a

return (color, opacity)

for r in sys.argv[1:]:

root, ext = os.path.splitext(r)

image = Image.open(r)

mode = image.mode

pixels = image.load()

width, height = image.size

print(image.mode)

if "RGB" in mode:

output = "" % (width, height, width, height)

for r in range(height):

for c in range(width):

color, opacity = convertPixel(*pixels[c, r])

output += "" % (c, r, color, opacity)

output += ""

with open(root + ".svg", "w") as f:

f.write(output)

写好脚本，只需要执行该脚本，参数作为图片名称，就可以生成一个同名的svg图片python3 png_to_svg.py logo.png

需要注意一点，这里有一个坑，在进行像素点矢量转换的时候，图片模式只支持RGB三色模式，以png为例子，如果是全彩的24位图是支持的，但是8位的png图显然无法进行转换，因为它的图片模式是P模式，在这种情况下，使用python脚本对图片进行转换之前，建议用photoshop对图片进行简单的模式转换

OK,我们转换好图片之后，可以用编辑器打开svg格式的图片

width="255.000000pt" height="200.000000pt" viewBox="0 0 255.000000 200.000000"

preserveAspectRatio="xMidYMid meet">

fill="#2b2b2b" stroke="none">

可以看到一个复杂的png位图已经被我们分解成为了n个path路径，这些路径可以被随意的加上选择器，根据选择器我们就可以动态的为其加上炫酷的动画。

有的人说了，我不懂python，有没有别的方法进行图片转换，答案是可以的，比如adobe旗下的Illustrator可以做手动勾勒一个图片的路径，然后进行转换，还有一个在线转换平台：convertio.co,也可以做类似的操作。

图片处理好之后，我们就可以发挥想象力给logo加上喜欢的动画了，郭富城怎么唱的来着？动起来~~动起来~~

这里值得一提的是，svg的path标签完全支持css3的transform动画，二者结合起来简直天衣无缝

利用transform属性可以做一些小特效，比如我想让logo悬停的时候改变颜色，并且发生纵向位移.v3u-icon-group{

pointer-events: fill;

}

.v3u-icon1 {

transition: 600ms all;

}

.v3u-icon-group:hover .v3u-icon1 {

transform:translateY(-100px);

fill: #4099ff;

}

效果是这样的：

有没有很炫酷的感觉，亦或者，你想让它变瘦一点.v3u-icon-group{

pointer-events: fill;

}

.v3u-icon1 {

transition: 600ms all;

}

.v3u-icon-group:hover .v3u-icon1 {

transform: rotateY(80deg);

fill: #4099ff;

}

或者干脆想翻个跟头.v3u-icon-group{

pointer-events: fill;

}

.v3u-icon1 {

transition: 600ms all;

}

.v3u-icon-group:hover .v3u-icon1 {

fill: #4099ff;

transform:rotate(45deg);

}

当然了，这些都是相对简单的动画，更加有意思的特效还需要进行组合和设计，这里只是抛砖引玉，值得一提的是，我们用到了一个很有意思的属性：pointer-events

pointer-events是CSS和SVG同时都具有的属性。它的初始值是auto，效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。在SVG2.0标准文档中新添加了pointer-events的值为bounding-box这个属性，当它的值为bounding-box时，在围绕元素的矩形区域也能接收定义好的事件交互，不过浏览器支持还不是很好，到目前为止还只有chrome65以上才支持。当pointer-events的值为none，即表示元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的，说白了，就是防止悬停元素触发动画时，在执行动画运动过程中二次触发，导致“抖动”的情况。

结语：使用python3结合svg，可以让你的网站更加生动有趣，现在浏览器对SVG支持的越来越好，可以放心大胆的使用pointer-events，也可以很好的改善SVG的交互体验