Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来

在之前的几篇文章中，介绍了业界中比较火爆的图片技术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 = "" 
    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格式的图片

 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的交互体验。

到此这篇关于Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来的文章就介绍到这了,更多相关Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！