Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来

2024-01-12 15:59| 来源: 网络整理| 查看: 265

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

可以看到一个复杂的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的交互体验。

【本文地址】

公司简介

联系我们