Python3.7將普通圖片(png)轉(zhuǎn)換為SVG圖片格式并且讓你的網(wǎng)站Logo(圖標(biāo))從此”動(dòng)”起來(lái)

原文轉(zhuǎn)載自「劉悅的技術(shù)博客」https://v3u.cn/a_id_148

在之前的幾篇文章中，介紹了業(yè)界中比較火爆的圖片技術(shù)SVG(Scalable Vector Graphics),比如Iconfont(矢量圖標(biāo))+iconmoon(圖標(biāo)svg互轉(zhuǎn))配合javascript來(lái)打造屬于自己的個(gè)性化社交分享系統(tǒng),我們可以使用svg來(lái)打造精美炫酷的分享小圖標(biāo)(icon)褐啡，這一次我們使用python來(lái)將普通的靜態(tài)的網(wǎng)站logo圖片轉(zhuǎn)換為帶路徑(path)的svg圖片，這樣就可以讓網(wǎng)站logo能夠變成動(dòng)態(tài)的回溺，作為一名不折騰不舒服斯基春贸，一枚炫酷自帶動(dòng)畫(huà)的網(wǎng)站logo自然能夠滿足我們的折騰欲混萝，同時(shí)亦能擊中我們的虛榮心。

首先第一步萍恕，先要將靜態(tài)圖做一步轉(zhuǎn)換,以本站的logo作為例子逸嘀，原理就是在普通的RGB圖像陣列中將其像素進(jìn)行轉(zhuǎn)碼操作，并且輸出為svg特有的路徑屬性允粤，當(dāng)然了使用python進(jìn)行圖像操作少不了會(huì)用到鼎鼎大名的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)

寫(xiě)好腳本崭倘，只需要執(zhí)行該腳本，參數(shù)作為圖片名稱类垫，就可以生成一個(gè)同名的svg圖片

python3 png_to_svg.py logo.png

需要注意一點(diǎn)司光，這里有一個(gè)坑，在進(jìn)行像素點(diǎn)矢量轉(zhuǎn)換的時(shí)候悉患，圖片模式只支持RGB三色模式残家，以png為例子，如果是全彩的24位圖是支持的售躁，但是8位的png圖顯然無(wú)法進(jìn)行轉(zhuǎn)換坞淮，因?yàn)樗膱D片模式是P模式，在這種情況下陪捷，使用python腳本對(duì)圖片進(jìn)行轉(zhuǎn)換之前回窘，建議用photoshop對(duì)圖片進(jìn)行簡(jiǎn)單的模式轉(zhuǎn)換

image

OK,我們轉(zhuǎn)換好圖片之后，可以用編輯器打開(kāi)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>

可以看到一個(gè)復(fù)雜的png位圖已經(jīng)被我們分解成為了n個(gè)path路徑市袖，這些路徑可以被隨意的加上選擇器啡直，根據(jù)選擇器我們就可以動(dòng)態(tài)的為其加上炫酷的動(dòng)畫(huà)。

有的人說(shuō)了苍碟，我不懂python酒觅，有沒(méi)有別的方法進(jìn)行圖片轉(zhuǎn)換，答案是可以的驰怎，比如adobe旗下的Illustrator可以做手動(dòng)勾勒一個(gè)圖片的路徑阐滩，然后進(jìn)行轉(zhuǎn)換，還有一個(gè)在線轉(zhuǎn)換平臺(tái)：convertio.co,也可以做類似的操作县忌。

圖片處理好之后掂榔，我們就可以發(fā)揮想象力給logo加上喜歡的動(dòng)畫(huà)了，郭富城怎么唱的來(lái)著症杏？動(dòng)起來(lái)~~動(dòng)起來(lái)~~

這里值得一提的是装获，svg的path標(biāo)簽完全支持css3的transform動(dòng)畫(huà)，二者結(jié)合起來(lái)簡(jiǎn)直天衣無(wú)縫

利用transform屬性可以做一些小特效厉颤，比如我想讓logo懸停的時(shí)候改變顏色穴豫，并且發(fā)生縱向位移

.v3u-icon-group{  
  
    pointer-events: fill;  
}  
  
.v3u-icon1 {  
      
  transition: 600ms all;  
}  
  
.v3u-icon-group:hover .v3u-icon1 {  
    
  transform:translateY(-100px);  
  fill: #4099ff;  
}

效果是這樣的：

image

有沒(méi)有很炫酷的感覺(jué)，亦或者，你想讓它變瘦一點(diǎn)

.v3u-icon-group{  
  
    pointer-events: fill;  
}  
  
.v3u-icon1 {  
      
  transition: 600ms all;  
}  
  
.v3u-icon-group:hover .v3u-icon1 {  
    
  transform: rotateY(80deg);  
  fill: #4099ff;  
}

image

或者干脆想翻個(gè)跟頭

.v3u-icon-group{  
  
    pointer-events: fill;  
}  
  
.v3u-icon1 {  
      
  transition: 600ms all;  
}  
  
.v3u-icon-group:hover .v3u-icon1 {  
    
  fill: #4099ff;  
  transform:rotate(45deg);  
}

image

當(dāng)然了精肃，這些都是相對(duì)簡(jiǎn)單的動(dòng)畫(huà)秤涩，更加有意思的特效還需要進(jìn)行組合和設(shè)計(jì)，這里只是拋磚引玉司抱，值得一提的是筐眷，我們用到了一個(gè)很有意思的屬性：pointer-events

pointer-events是CSS和SVG同時(shí)都具有的屬性。它的初始值是auto习柠，效果和沒(méi)有定義pointer-events屬性相同匀谣，鼠標(biāo)不會(huì)穿透當(dāng)前層。在SVG中资溃，該值和visiblePainted的效果相同武翎。在SVG2.0標(biāo)準(zhǔn)文檔中新添加了pointer-events的值為bounding-box這個(gè)屬性，當(dāng)它的值為bounding-box時(shí)溶锭，在圍繞元素的矩形區(qū)域也能接收定義好的事件交互宝恶，不過(guò)瀏覽器支持還不是很好，到目前為止還只有chrome65以上才支持趴捅。當(dāng)pointer-events的值為none卑惜，即表示元素不再是鼠標(biāo)事件的目標(biāo)，鼠標(biāo)不再監(jiān)聽(tīng)當(dāng)前層而去監(jiān)聽(tīng)下面的層中的元素驻售。但是如果它的子元素設(shè)置了pointer-events為其它值，比如auto更米，鼠標(biāo)還是會(huì)監(jiān)聽(tīng)這個(gè)子元素的欺栗，說(shuō)白了，就是防止懸停元素觸發(fā)動(dòng)畫(huà)時(shí)征峦，在執(zhí)行動(dòng)畫(huà)運(yùn)動(dòng)過(guò)程中二次觸發(fā)迟几，導(dǎo)致“抖動(dòng)”的情況。

結(jié)語(yǔ)：使用python3結(jié)合svg栏笆，可以讓你的網(wǎng)站更加生動(dòng)有趣类腮，現(xiàn)在瀏覽器對(duì)SVG支持的越來(lái)越好，可以放心大膽的使用pointer-events蛉加，也可以很好的改善SVG的交互體驗(yàn)蚜枢。

原文轉(zhuǎn)載自「劉悅的技術(shù)博客」 https://v3u.cn/a_id_148

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市针饥，隨后出現(xiàn)的幾起案子厂抽，更是在濱河造成了極大的恐慌，老刑警劉巖丁眼，帶你破解...
沈念sama閱讀 219,366評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件筷凤，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡苞七，警方通過(guò)查閱死者的電腦和手機(jī)藐守，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,521評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)挪丢，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人卢厂，你說(shuō)我怎么就攤上這事乾蓬。” “怎么了足淆？”我有些...
開(kāi)封第一講書(shū)人閱讀 165,689評(píng)論 0贊 356
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵巢块，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我巧号，道長(zhǎng)族奢，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,925評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任丹鸿，我火速辦了婚禮越走，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘靠欢。我一直安慰自己廊敌，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,942評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布门怪。她就那樣靜靜地躺著骡澈，像睡著了一般。火紅的嫁衣襯著肌膚如雪掷空。梳的紋絲不亂的頭發(fā)上肋殴，一...
開(kāi)封第一講書(shū)人閱讀 51,727評(píng)論 1贊 305
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音坦弟，去河邊找鬼护锤。笑死，一個(gè)胖子當(dāng)著我的面吹牛酿傍，可吹牛的內(nèi)容都是我干的烙懦。我是一名探鬼主播，決...
沈念sama閱讀 40,447評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼赤炒，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼氯析！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起可霎，我...
開(kāi)封第一講書(shū)人閱讀 39,349評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤魄鸦，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后癣朗，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體拾因，經(jīng)...
沈念sama閱讀 45,820評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,990評(píng)論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了绢记。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扁达。...
茶點(diǎn)故事閱讀 40,127評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖蠢熄，靈堂內(nèi)的尸體忽然破棺而出跪解，到底是詐尸還是另有隱情，我是刑警寧澤签孔，帶...
沈念sama閱讀 35,812評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布叉讥，位于F島的核電站，受9級(jí)特大地震影響饥追，放射性物質(zhì)發(fā)生泄漏图仓。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,471評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一但绕、第九天我趴在偏房一處隱蔽的房頂上張望救崔。院中可真熱鬧，春花似錦捏顺、人聲如沸六孵。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,017評(píng)論 0贊 22
一樁弒父案幅骄，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)劫窒。三九已至，卻和暖如春拆座，著一層夾襖步出監(jiān)牢的瞬間烛亦，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,142評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工懂拾，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人铐达。一個(gè)月前我還...
沈念sama閱讀 48,388評(píng)論 3贊 373
代替公主和親
正文我出身青樓岖赋，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親瓮孙。傳聞我的和親對(duì)象是個(gè)殘疾皇子唐断，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,066評(píng)論 2贊 355