首先你要有個SVG,教你使用PS、AI導出SVG
首先你要有個SVG,教你使用PS、AI導出SVG-移動閱讀二維碼


大家好,這個系列打算開始和大家討論一下SVG。

關于SVG大家應該都有過了解吧?

什么,你不知道什么是SVG?

可縮放矢量圖形(Scalable Vector Graphics,SVG),是一種用來描述二維矢量圖形的XML 標記語言。 簡單地說,SVG面向圖形,XHTML面向文本。

SVG與Flash類似,都是用于二維矢量圖形,二者的區別在于,SVG是一個W3C標準,基于XML,是開放的,而Flash是封閉的基于二進制格式的。因為都是W3C標準,SVG與其他的W3C標準,比如CSS, DOM和SMIL等能夠協同工作。

既然要講SVG,那從哪里開始呢?

就從PSD開始吧。

1.如何從PS中導出SVG

???從這么基礎的開始?

要玩SVG,首先需要先有SVG文件。

大部分情況下,我們拿到的PSD是這樣子的:

而SVG長這樣的:

這就是傳說中上天入地無所不能的SVG嗎??。。?!

那些跟蟲子一樣的數字是要一個字一個字寫上去嗎????要是出錯了,還要一個個字符比對過去嗎????老師沒教過SVG這么恐怖啊

SVG實際應用不多,是有道理的!

好,本文到此結束,大家散了吧

下面開始講如何將從PS中導出SVG。

首先,SVG當然不用一個字一個字的去填那些蟲子一樣的數字了??!真要那樣,SVG沒寫完,人先瘋了。

但是我們這樣的PSD要怎么轉換成SVG?

。。。

先看下我們需要的部分

看這邊,我們要的是這個彩色帶子,不是人物剪影哈

看這邊,我們要的是這個彩色帶子,不是人物剪影哈

看看圖層界面

如果PSD里是這種狀態的話,那么由這個PSD得到SVG就只要10分鐘。

仔細觀察,這種PSD它有我們所需要最重要的元素,路徑!

這就是直接生成SVG的核心部件了。

接著我們需要除PHOTOSHOP外的另一個軟件ILLUSTRATOR。

網上也有一些其他導出svg的教程,比如photoshop cc,photoshop 導出svg插件,但是目前我并沒有實驗成功過,總之下載個AI沒錯的。

現在開始,見證奇跡的10分鐘:

嗯哼,現在開始,見證奇跡的10分鐘:

郵件復制所有需要的路徑圖層到新文檔中,并進行裁切

另存為EPS文件,EPS選項取默認值就好,其他選項對我們所需要的部分影響不大

在AI中打開EPS,適當的進行縮放,并編輯畫板,保證將所有的路徑包含在畫板中

對齊左上角,另外svg圖形大小不影響圖片體積,因為svg是矢量圖,對齊左上角之后可以隨意對SVG進行縮放,以方便輸出后的顯示。(畫板大小就是最后導出的svg的大小也就是<svg>的width和height屬性)

另存為svg,選項依然默認

現在,看一下我們得到的SVG

 

這是SVG?打開SVG文件看下:

好像沒啥毛病。代碼部分:

實際上這個SVG里只有<path>的部分是我們所需要的,多余的那些jpg也可以刪掉。

這里簡單的寫個過濾path工具,可以快速過濾出<path>標簽。

http://tgideas.qq.com/demo/svg/getPath.htm

轉換后稍微整理一下格式,代碼基本上是這樣的

很好,看一下結果吧

顏色呢???!顏色哪去了?!

。。。

10分鐘好像到了,這次的課程就到這里。

顏色自己去fill啊,10分鐘就做完了,不怕需求不飽和嗎?

好,在style里加個path{fill:#f00;}就有顏色了

<path>可以使用css來進行控制,想要不同的顏色,可以針對不同的path進行設置。

顏色信息會丟失的確是這個導出的方法的弊端。

可以的話,盡可能使用AI進行SVG繪制并導出。

2.PS導出SVG的另一種方法

如果我們需要的圖形的圖層并不是路徑,該怎么辦?

比如這個櫻木的人影

先ctrl加左鍵點擊圖層,獲取圖層輪廓

選擇線框工具

然后右鍵選區,建立工作路徑,容差可根據實際情況調整

然后直接導出路徑到AI就好了,不需要先轉為EPS

當然導出的AI一樣也是沒有顏色信息的

這兩種方法的區別是,EPS可以批量導出多個路徑,第二種方法一次只能導出一個路徑。

最后是AI導出SVG的方法。

3.從AI中導出SVG

從AI中導出在前面已經講過,只要對齊左上角的點,然后另存為SVG就好了。

而AI中的畫板大小決定了導出的SVG的繪制區域大小。

不過如果從AI中直接導出SVG,而不是從PS轉換而來,有個點就要注意,那就是AI導出來的SVG圖形并不都是<path>

好多不認識的標簽呢……

………………

是這樣的,你試著右鍵然后“建立復合路徑”,然后再另存為SVG

哎呀媽呀,我那么多圖形只剩一個path了?。。?!

冷靜?。?!

要不試試單獨對每一個圖形進行“建立復合路徑”,然后再另存為SVG

好了,都變成<path>了

至于為什么我們要把圖形都轉為<path>,之后的文章會提到

這節課就到這里……

什么意思,切了一整篇的圖就想跑?

好吧,我們來解釋一下我們得到的SVG吧。

什么是<svg>

<svg version=”1.1″ id=”&#x56FE;&#x5C42;_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” width=”347px” height=”830px” viewBox=”0 0 347 830″ style=”enable-background:new 0 0 347 830;” xml:space=”preserve”>

我們得到的SVG的屬性:

version?這是<svg>標簽的獨有屬性,svg的版本,目前只有1.0,1.1兩種

id?就是id了,不是特別的屬性

xmlns=”http://www.w3.org/2000/svg”

xmlns:xlink=”http://www.w3.org/1999/xlink”

xml:space=”preserve”

這3個是固定值,命名空間,數據單獨存在svg文件內時,這3個值不能省略

x?svg的左上角x值,默認為0

y?svg的左上角y值,默認為0

width?svg的寬度

height?svg的高度

style?元素樣式,從AI導出時,這個值會出錯,刪掉即可

viewBox?指定一個給定的一組圖形伸展以適應特定的容器元素,viewBox屬性的值是一個包含4個參數的列表 min-x, min-y, width 和height, 以空格或者逗號分隔開, 在用戶空間中指定一個矩形區域映射到給定的元素。

有點抽象哈,用圖片來表示下。

單獨抽取viewBox時,就是以viewBox為畫板的一個正常圖形。

而當viewBox的大小和svg不同時,viewBox在屏幕上的顯示會縮放至svg同等大小。(高寬非等比例縮放)

(藍色框代表viewBox大小,黑色框為svg大小,并且兩者沒有間隔,此處為了查看方便留了空)

更詳細的信息可以查看這篇文章

理解SVG的viewport,viewBox,preserveAspectRatio

http://www.zhangxinxu.com/wordpress/?p=4323

另外關于用戶單位,大家可以看這里

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Positions

用戶單位和屏幕單位的映射關系被稱為用戶坐標系統。除了縮放之外,坐標系統還可以旋轉、傾斜、翻轉。默認的用戶坐標系統1用戶像素等于設備上的1像素(但是設備上可能會自己定義1像素到底是多大)。在定義了具體尺寸單位的SVG中,比如單位是“cm”或“in”,最終圖形會以實際大小的1比1比例呈現。

總之viewBox里才是真實圖形大小,而svg的寬高決定圖形在屏幕上的顯示大小。一般情況下,我們從AI中導出SVG時,兩者大小是保持相同的。

當然,實際嘗試后,有些同學會發現一個問題,有時候我調整svg和viewBox大小,結果內部圖形位置偏移并且被裁切甚至不見了……

所以這里還是要再解釋一下,viewBox里才是真實圖形大小,這話的意思是:內部圖形,如<path>里的數值是相對viewBox而定的,也就是說viewBox進行了縮放,那么內部的圖形數值也相對應進行了縮放,viewBox縮放至svg大小就停止了,而此時的內部圖形并不一定是svg的大小

直接用數值來解釋。

svg的大小為400×800,而viewBox為200×400,那么很明顯,svg內部圖形會放大2倍,而此時內部圖形最左邊的點不是(0,0)而是(50,300),那么放大后,就變成(100,600)。因此左邊那看似空白的距離就是一個寬度為100的偏移量。

講到這里,就出現另外一個問題,內部圖形最左邊的點,這個是什么意思?內部圖形不是(0,0)點開始的嗎?

并不是,內部圖形比較復雜,我們下章再講,這里先告訴大家內部圖形畫圖的原理。

<path d=”M158,217c-2.076-0.372-1.924-0.242-3-1c2.508-1.579…158,217z”/>

這里為了方便查看,把中間一大串數字省略了。我們可以看到,AI導出的<path>只有一個d屬性。

那這個d到底是什么呢?

是這個。

d就是圖里每個點的位置,配合不同的命令字母實現畫圖。為了簡單理解,大家可以想象成,這是一堆標注(x,y)點的集合。這個也是<path>的重頭戲,這里先釣個胃口,我們下一章講。

作為代替,我們這章可以先看看<path>最常規的玩法。

線條動畫

這涉及到path元素的三個屬性:

stroke

stroke-dasharray

stroke-dashoffset

stroke就是對圖形進行描邊的顏色,類似與css里的border-color

與之對應的屬性還有

stroke-linecap

stroke-linejoin

stroke-miterlimit

stroke-opacity

stroke-width

這里不對所有屬性都進行深入。

關于線條動畫可以看下這篇譯文

SVG技術入門:線條動畫實現原理

http://www.webhek.com/how-svg-line-animation-works/

stroke-dasharray?值是一組數組,沒數量上限,每個數字交替表示劃線與間隔的寬度。

stroke-dashoffset?則是虛線的偏移量。

這兩個值配合起來最常見的玩法是這樣的。

設定stroke-dasharray的值劃線與空格均為10,然后增加第二個參數,及空格的值

這種情況下我們改變第一個參數,即劃線的值,就會出現“描邊效果”

也就是說,一開始劃線長度設為0,而空格長度設為path總長即可然后利用js或css即可實現這種效果。path總長度可通過getTotalLength方法獲得:

document.querySelector(‘.path’).getTotalLength();

stroke-dashoffset的作用看圖,逆時針方向偏移:

最后,線條動畫一般可以配合其他屬性使用,比如fill屬性(類似于background-color),這部分與一般的js,css動畫沒太大差別,大家可以自行發揮。

相關鏈接:

MDN社區SVG介紹:

https://developer.mozilla.org/zh-CN/docs/Web/SVG

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Positions

理解SVG的viewport,viewBox,preserveAspectRatio

http://www.zhangxinxu.com/wordpress/?p=4323

SVG技術入門:線條動畫實現原理

http://www.webhek.com/how-svg-line-animation-works/

 

原文地址:tgideas.qq

本文鏈接:http://www.casaleticia.com/ps-export-svg.html
本文標簽: , , ,