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 = "<svg width="%d" height="%d" viewBox="0 0 %d %d" xmlns="http://www.w3.org/2000/svg">" % (width, height, width, height)
  for r in range(height):
   for c in range(width):
    color, opacity = convertPixel(*pixels[c, r])
    output += "<rect x="%d" y="%d" width="1" height="1" fill="%s" fill-opacity="%s"/>" % (c, r, color, opacity)
  output += "</svg>"
  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格式的图片

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" 
 width="255.000000pt" height="200.000000pt" viewBox="0 0 255.000000 200.000000" 
 preserveAspectRatio="xMidYMid meet"> 
 
<g class="v3u-icon-group" transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)" 
fill="#2b2b2b" stroke="none"> 
<path class="v3u-icon1"   d="M1500 1950 c0 -27 -49 -39 -175 -45 -231 -10 -298 -27 -374 -91 -53 
-44 -79 -119 -65 -190 l7 -35 31 29 c36 34 87 62 113 62 10 0 -4 -13 -32 -29 
-69 -39 -191 -170 -222 -238 -55 -119 10 -194 193 -223 38 -6 72 -14 76 -18 3 
-4 8 -20 10 -37 6 -61 143 -105 330 -105 181 0 238 22 238 93 0 32 -15 48 
-132 145 -109 89 -157 105 -234 75 -10 -4 -12 0 -8 11 5 13 -2 16 -42 16 -35 
0 -45 3 -34 10 21 14 100 13 100 -1 0 -7 12 -9 34 -5 48 9 103 -13 173 -67 33 
-26 69 -47 80 -47 35 0 142 37 179 62 32 22 64 79 64 116 0 65 -53 147 -114 
179 -108 56 -326 58 -436 4 l-25 -12 23 20 c84 73 382 68 478 -8 35 -28 47 
-16 48 48 1 65 -25 100 -90 123 -65 23 -129 22 -298 -3 -137 -20 -208 -21 
-228 -1 -6 6 9 7 39 5 26 -3 104 4 172 16 68 12 143 21 167 21 43 0 44 1 38 
28 -11 43 -32 80 -53 92 -24 13 -31 13 -31 0z m-125 -784 c39 -17 45 -40 16 
-56 -28 -15 -46 -13 -72 9 -23 19 -24 19 -5 40 23 25 18 24 61 7z"/> 
<path class="v3u-icon1" d="M1340 1146 c0 -14 5 -26 10 -26 6 0 10 9 10 19 0 11 -4 23 -10 26 -6 
4 -10 -5 -10 -19z"/> 
 
<path class="v3u-icon1"  d="M45 738 c-20 -50 -29 -108 -16 -108 8 0 11 -44 11 -140 l0 -140 128 
0 127 0 80 140 c43 77 85 140 92 140 12 0 25 36 39 108 l7 33 -98 -3 -98 -3 
-18 -65 c-10 -36 -14 -66 -9 -68 8 -3 -39 -115 -54 -130 -3 -3 -6 20 -6 51 0 
34 5 61 14 69 12 13 46 112 46 137 0 7 -38 11 -116 11 l-115 0 -14 -32z"/> 
<path class="v3u-icon1"  d="M626 760 c-37 -12 -66 -38 -82 -77 -27 -64 -23 -68 62 -65 65 3 77 6 
81 23 6 23 23 25 23 3 0 -29 -21 -54 -44 -54 -16 0 -26 -7 -30 -22 -9 -35 -8 
-38 20 -38 21 0 24 -4 20 -20 -3 -11 -9 -29 -12 -40 -9 -33 -26 -24 -19 10 l7 
30 -85 0 -86 0 -12 -53 c-21 -97 6 -117 164 -117 77 0 110 4 137 18 43 21 76 
69 85 123 6 33 3 45 -14 63 l-21 23 23 12 c32 17 47 45 54 100 5 43 3 50 -22 
69 -24 19 -40 22 -124 21 -53 0 -109 -5 -125 -9z"/> 
<path class="v3u-icon1"  d="M970 746 c-22 -59 -31 -109 -21 -115 7 -5 2 -37 -14 -96 -29 -104 
-32 -157 -9 -176 27 -22 114 -23 156 -1 30 16 38 17 42 6 4 -10 27 -14 88 -14 
l83 0 17 63 c10 39 12 64 6 68 -13 9 20 130 41 147 16 13 52 128 43 137 -3 3 
-47 5 -98 5 -79 0 -95 -3 -102 -17 -5 -10 -24 -74 -42 -143 -32 -120 -44 -150 
-55 -139 -2 3 13 68 34 145 21 76 36 142 34 147 -2 4 -47 7 -99 7 -90 0 -95 
-1 -104 -24z"/> 
<path class="v3u-icon1"  d="M1705 751 c-55 -25 -69 -50 -110 -198 -55 -200 -42 -217 159 -211 
109 3 124 5 155 27 32 23 61 75 75 134 l6 27 -89 0 -90 0 -11 -40 c-6 -22 -15 
-40 -20 -40 -14 0 -13 0 16 112 15 54 31 98 37 98 9 0 7 -23 -9 -84 l-6 -26 
89 0 89 0 27 95 c15 52 27 102 27 110 0 23 -115 21 -128 -1 -9 -16 -11 -16 
-33 0 -32 22 -132 21 -184 -3z"/> 
<path class="v3u-icon1"  d="M2101 747 c-23 -60 -32 -110 -22 -116 14 -9 -22 -139 -43 -155 -11 
-8 -46 -102 -46 -123 0 -2 42 -3 93 -3 l94 0 12 41 c9 31 10 44 1 49 -8 5 -8 
14 0 36 14 36 24 21 35 -50 11 -79 6 -76 114 -76 l97 0 16 62 c10 35 13 65 8 
68 -13 8 20 132 40 150 9 8 24 41 33 73 19 70 20 69 -88 65 l-79 -3 -12 -47 
c-7 -29 -8 -48 -2 -50 11 -4 0 -58 -12 -58 -5 0 -12 21 -15 48 -4 26 -10 61 
-14 77 l-7 30 -97 3 c-95 3 -97 2 -106 -21z"/> 
<path class="v3u-icon1" d="M1377 473 c-3 -5 -10 -27 -17 -51 -6 -24 -14 -50 -17 -58 -4 -11 9 
-14 74 -14 l79 0 14 53 c7 28 15 58 17 65 4 9 -14 12 -70 12 -42 0 -78 -3 -80 
-7z"/> 
<path class="v3u-icon1" d="M1258 204 c-9 -8 3 -44 13 -38 11 7 12 44 1 44 -5 0 -11 -3 -14 -6z"/> 
<path d="M480 130 l0 -70 45 0 c33 0 45 4 45 15 0 9 -9 15 -25 15 -24 0 -25 3 
-25 55 0 48 -2 55 -20 55 -18 0 -20 -7 -20 -70z"/> 
<path d="M600 130 c0 -56 3 -70 15 -70 12 0 15 14 15 70 0 56 -3 70 -15 70 
-12 0 -15 -14 -15 -70z"/> 
<path d="M660 152 c0 -60 21 -92 60 -92 44 0 60 23 60 86 0 40 -4 54 -14 54 
-11 0 -16 -15 -18 -52 -3 -45 -6 -53 -23 -53 -17 0 -20 8 -23 53 -3 44 -6 52 
-23 52 -16 0 -19 -7 -19 -48z"/> 
<path d="M834 156 c14 -25 26 -56 26 -70 0 -19 5 -26 19 -26 14 0 18 5 14 20 
-3 11 6 39 21 64 14 25 26 47 26 50 0 16 -27 3 -46 -21 l-22 -28 -13 28 c-7 
16 -20 27 -32 27 -18 0 -17 -3 7 -44z"/> 
<path d="M970 147 c0 -61 19 -87 63 -87 41 0 57 24 57 86 0 40 -4 54 -14 54 
-11 0 -16 -15 -18 -52 -3 -45 -6 -53 -23 -53 -17 0 -20 8 -23 53 -3 44 -6 52 
-23 52 -16 0 -19 -7 -19 -53z"/> 
<path d="M1120 130 l0 -70 55 0 c42 0 55 3 55 15 0 11 -11 15 -40 15 -22 0 
-40 5 -40 10 0 6 11 10 25 10 31 0 34 27 3 32 -41 6 -32 28 11 28 30 0 41 4 
41 15 0 12 -13 15 -55 15 l-55 0 0 -70z"/> 
<path d="M1330 185 c-23 -28 -4 -56 55 -79 7 -2 7 -7 0 -14 -8 -8 -18 -7 -38 
3 -25 13 -29 12 -34 -1 -8 -21 14 -34 58 -34 66 0 80 53 21 79 -40 18 -42 36 
-3 28 20 -4 31 -2 34 8 11 26 -71 36 -93 10z"/> 
<path d="M1520 130 l0 -70 49 0 c30 0 53 5 61 15 13 16 5 55 -13 55 -8 0 -8 3 
1 12 16 16 15 23 -4 42 -9 9 -32 16 -55 16 l-39 0 0 -70z m70 30 c0 -5 -9 -10 
-20 -10 -11 0 -20 5 -20 10 0 6 9 10 20 10 11 0 20 -4 20 -10z m8 -62 c-7 -20 
-48 -23 -48 -4 0 11 9 16 26 16 16 0 24 -5 22 -12z"/> 
<path d="M1660 130 l0 -70 51 0 c36 0 49 4 47 13 -3 6 -17 13 -31 15 -26 3 
-27 6 -27 58 0 47 -2 54 -20 54 -18 0 -20 -7 -20 -70z"/> 
<path d="M1791 174 c-12 -15 -21 -34 -21 -44 0 -10 9 -29 21 -44 41 -52 129 
-23 129 44 0 67 -88 96 -129 44z m89 -24 c22 -40 -26 -80 -58 -48 -25 25 -6 
68 30 68 9 0 22 -9 28 -20z"/> 
<path d="M1970 180 c-43 -43 -11 -120 49 -120 49 0 61 9 61 46 0 30 -3 34 -25 
34 -16 0 -25 -6 -25 -15 0 -8 5 -15 10 -15 6 0 10 -4 10 -10 0 -5 -11 -10 -25 
-10 -32 0 -50 32 -34 61 9 17 17 20 45 16 36 -6 56 9 33 24 -25 16 -78 10 -99 
-11z"/> 
</g> 
</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的交互体验。

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

赞 (0)

相关推荐

  • python 将dicom图片转换成jpg图片的实例

    主要原理:调整dicom的窗宽,使之各个像素点上的灰度值缩放至[0,255]范围内. 使用到的python库:SimpleITK 下面是一个将dicom(.dcm)图片转换成jpg图片的demo: import SimpleITK as sitk import numpy as np import cv2 def convert_from_dicom_to_jpg(img,low_window,high_window,save_path): lungwin = np.array([low_win

  • 使用Python opencv实现视频与图片的相互转换

    因为最近要经常转换数据集进行实验,因此记录一下. 1.视频转图片 即为将视频解析为一帧一帧的图片: import cv2 vc=cv2.VideoCapture("/home/hqd/PycharmProjects/1/1/19.MOV") c=1 if vc.isOpened(): rval,frame=vc.read() else: rval=False while rval: rval,frame=vc.read() cv2.imwrite('/home/hqd/PycharmP

  • Python 实现opencv所使用的图片格式与 base64 转换

    将np图片(imread后的图片)转码为base64格式 def image_to_base64(image_np): image = cv2.imencode('.jpg',image_np)[1] image_code = str(base64.b64encode(image))[2:-1] return image_code 将base64编码解析成opencv可用图片 def base64_to_image(base64_code): # base64解码 img_data = base

  • 基于Python3.6中的OpenCV实现图片色彩空间的转换

    基于Python3.6中的OpenCV实现图片色彩空间的转换

    不同的色彩空间中对图片的色彩体现有很大不同 #色彩空间的相互转换:最常见的是HSV与RGB,YUV与RGB的相互转换 #常见色彩空间有: #RGB:最常用 #HSV:对指定色彩铭感,用于查找表达特定颜色 #HIS: #YCrCb:在人体肤色识别运用较多 #YUV:Android开发中运用较多 以下是对图片进行所有色彩空间的演示: import cv2 as cv ###导入openc包 def color_space_demo(image): gray = cv.cvtColor(image,c

  • 520使用Python实现“我爱你”表白

    摘要: 每到情人节.七夕节,不少小伙伴大伙伴们都会遇到这样一个世纪问题--怎么给女朋友/老婆一个与众不同的节日惊喜.今天给大家分享一个独特的表白方法--用"我爱你"拼出心爱人的模样! 每到情人节.七夕节,不少小伙伴大伙伴们都会遇到这样一个世纪问题--怎么给女朋友/老婆一个与众不同的节日惊喜. 你说送花吧,到时候朋友圈里一划,全部都是送花的,女票:"没创意!",遂卒: 你说送礼物吧,要是送的礼物不合心意,女票:"你根本不懂我!",又卒: 你说逛街买

  • python opencv将图片转为灰度图的方法示例

    使用opencv将图片转为灰度图主要有两种方法,第一种是将彩色图转为灰度图,第二种是在使用OpenCV读取图片的时候直接读取为灰度图. 将彩色图转为灰度图 import cv2 import numpy as np if __name__ == "__main__": img_path = "timg.jpg" img = cv2.imread(img_path) #获取图片的宽和高 width,height = img.shape[:2][::-1] #将图片缩小

  • Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中

    我就废话不多说了,直接上代码吧! import Image from datetime import datetime import os str = '/home/dltest/caffe/examples/sgg_datas/images/result_test/zutest/' + datetime.now().strftime("%Y%m%d_%H%M%S") while True==os.path.exists(str): str = str + datetime.now()

  • python将图片转base64,实现前端显示

    如下所示: # -*- coding: utf-8 -*- import base64 with open("C:\\Users\\user\\Desktop\\20170508134213.png","rb") as f: # b64encode是编码,b64decode是解码 base64_data = base64.b64encode(f.read()) # base64.b64decode(base64data) print(base64_data) 结果:

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

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

  • Java实现base64图片编码数据转换为本地图片的方法

    本文实例讲述了Java实现base64图片编码数据转换为本地图片的方法.分享给大家供大家参考,具体如下: 项目中用到的把base64图片数据转为本地图片的函数 /** * 替换html中的base64图片数据为实际图片 * @param html * @param fileRoot 本地路径 * @param serRoot 服务器路径 * @return */ public static String replaceBase64Image(String html,String fileRoot

  • python3用PIL把图片转换为RGB图片的实例

    感想 我们在做深度学习处理图片的时候,如果是自己制作或者收集的数据集,不可避免的要对数据集进行处理,然后大多数模型都只支持RGB格式的图片,这个时候,我们需要把其他格式的图片,例如灰度图像转换为RGB的图片,网上只有灰度图像转换为RGB的教程,我这里弥补一下空缺. from PIL import Image import numpy as np L_path='train/5509031.jpg' L_image=Image.open(L_path) out = L_image.convert(

  • Android把svg图片转为jpg保存到相册图库

    Android把svg图片转为jpg保存到相册图库

    我上一篇文章写了<Android加载html中的svg格式图片进行显示〉,有兴趣的同学可以去看看地址:Android加载html中svg格式图片进行显示 但是我们一般在浏览图片时,还会有保存图片到相册或图库的操作,而Android手机自带的相册或图库是不支持查看svg格式的图片的,所以我们需要把svg格式的图片转为jpg或png格式再进行保存,我的例子是保存为jpg格式,png也是一样的,我这里写了个工具类,可以保存jpg,png格式的图片,也可以把svg图片转为jpg进行保存.接下来我贴下我的

  • python如何将图片转换为字符图片

    python如何将图片转换为字符图片

    简介 一个简单的python程序,将图片转换为字符图片. (为了简便,很多参数写死了,自己看着改吧. (←∀←)) 正文 原图(侵删) 结果图 源码 [更多细节]-->戳这里 #-*- coding: UTF-8 -*- from PIL import Image from PIL import ImageDraw from PIL import ImageFont import matplotlib.pyplot as plt import numpy as np import time de

  • python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结

    在处理图像的时候经常是读取图片以后把图片转换为灰度图.作为一个刚入坑的小白,我在这篇博客记录了四种处理的方法. 首先导入包: import numpy as np import cv2 import tensorflow as tf from PIL import Image 方法一:在使用OpenCV读取图片的同时将图片转换为灰度图: img = cv2.imread(imgfile, cv2.IMREAD_GRAYSCALE) print("cv2.imread(imgfile, cv2.I

  • 对Python生成汉字字库文字,以及转换为文字图片的实例详解

    笔者小白在收集印刷体汉字的深度学习训练集的时候,一开始就遇到的了一个十分棘手的问题,就是如何获取神经网络的训练集数据.通过上网搜素,笔者没有找到可用的现成的可下载的汉字的训练集,于是笔者采用了代码自建汉字的训练集数据. 这里采用的是python编写程序,需要import 的python库请提前安装. 那么,首先如何用python输出汉字字库的文字? 笔者查到在计算机中汉字编码范围是0x4E00到0x9FA5,利用unichr()可以将十六进制的编码转成人类可读的字. 这里扩展一下在python库

  • JavaScript 下载svg图片为png格式

    1.遇到需要将svg下载的需求,网上找了一些代码,地址是这个https://github.com/exupero/saveSvgAsPng,但是不太好用,莫名的把网页所有的svg都下载了,于是在源码的基础上做了一些小的修改:代码如下所示 var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

  • 基于Qt实现SVG图片浏览器

    基于Qt实现SVG图片浏览器

    目录 介绍 一.项目介绍 二.项目基本配置 三.UI界面设计 四.主程序实现 4.1 .pro文件 4.2 添加SvgWindow类 4.3 添加SvgWidget类 4.4 svgwidget.h头文件 4.5 svgwidget.cpp源文件 4.6 svgwindow.h头文件 4.7 svgwindow.cpp源文件 4.8 mainwindow.h头文件 4.9 mainwindow.cpp源文件 五.效果演示 介绍 SVG的英文全称是Scalable Vector Graphics,

  • 前端使用svg图片改色实现示例

    目录 引言 svg填充色用的fill css改色利用过滤器filter 最后顺便介绍下filter: drop-shadow() 引言 周六来公司写点东西,刚好有个icon颜色不对,ui又不在公司,那么就只能自己动手丰衣足食了. 呜呜呜,好想住公司,都不用上下班了. svg填充色用的fill 当ui给你了svg图片,且是单色的,又只有你用 svg填充色用的fill,修改里面的颜色即可. 下面是例子: 首先,ui一般会直接给你svg图片,比如这样的: ,用idea或者笔记本打开里面是这样的: <?

随机推荐