歡迎來(lái)到svg編輯器新品發(fā)布會(huì)，我是本次大會(huì)的主持人三兒。（有沒(méi)有一種打開蘋果新品發(fā)布會(huì)推文的錯(cuò)覺(jué)）
首先要向大家隆重宣布，吊足大家胃口?胖友們期待已久的svg編輯器正式上線啦！
我們的svg編輯器有非常多熱門、有趣、創(chuàng)意十足的svg效果，比如橫版無(wú)縫拼接視頻、音頻海報(bào)、小程序無(wú)角標(biāo)、gif圖跟隨閱讀播放等。
不用代碼，不用花費(fèi)高額的價(jià)錢定制，自己就可以DIY和其它知名品牌一樣的svg效果，是不是有億點(diǎn)點(diǎn)心動(dòng)！
那在正式開始使用之前，三兒給胖友們整理了一份svg編輯器使用手冊(cè)，并附上了全面的功能解析，幫助胖友們快速上手，強(qiáng)烈建議大家收藏！
01如何進(jìn)入svg編輯器
通過(guò)135編輯器進(jìn)入
進(jìn)入135編輯器后，在左側(cè)工具欄找到『svg編輯器』，點(diǎn)擊進(jìn)入即可。
直接輸入網(wǎng)址
胖友們也可以直接在瀏覽器粘貼網(wǎng)址進(jìn)入，svg編輯器網(wǎng)址為：
https://www.135editor.com/svgeditor/
02
整體界面展示
Svg編輯器界面主要分為 4 個(gè)部分：左側(cè)效果選擇區(qū)、上方工具欄、右側(cè)效果設(shè)置區(qū)以及中間的效果編輯區(qū)。
左側(cè)效果選擇區(qū)
左側(cè)效果選擇區(qū)域主要是編輯器效果的展示，你可以在素材、組合或是樣式里選擇你喜歡的svg效果進(jìn)行編輯。
上方工具欄
上方工具欄則是一些簡(jiǎn)單的編輯操作，共有10個(gè)功能。包括上移/下移、間距、刪除、新建、保存、同步、導(dǎo)出、預(yù)覽、個(gè)人中心。
右側(cè)效果設(shè)置區(qū)
作品效果的修改都在右側(cè)區(qū)域完成，該區(qū)域主要分為 2 個(gè)部分，一是編輯，二是教程。
中間效果編輯區(qū)
中間的效果編輯區(qū)是對(duì)整個(gè)作品的展示，不僅可以及時(shí)看到作品的展示效果，還可以對(duì)不同區(qū)塊進(jìn)行上移/下移、間距、刪除等操作，使作品的整體搭配更加協(xié)調(diào)、美觀。
03
核心功能介紹
素材/組合效果，可自定義程度高
相比單個(gè)的svg樣式，素材的靈活度更高、可搭配性強(qiáng)，多種素材可自由組合。
目前的素材分類有無(wú)縫圖、點(diǎn)擊、滑動(dòng)、長(zhǎng)按、圖片輪播、超鏈接、小程序、音頻、視頻、點(diǎn)A見B、百葉窗、淘口令等，每一個(gè)大分類下又有多種不同效果選擇，比如視頻這個(gè)分類之下又有無(wú)縫拼接視頻和橫屏無(wú)縫拼接視頻兩種效果。
除了素材效果以外，svg編輯器還為大家準(zhǔn)備好了 4 種圖文展開的效果，分別是點(diǎn)擊直接展開-自定義觸發(fā)、點(diǎn)擊換圖展開-自定義觸發(fā)、自動(dòng)換圖展開-自定義觸發(fā)、點(diǎn)擊縮回再展開-自定義觸發(fā)，如果自己在效果組合上還不太拿手，可以嘗試使用組合素材。
教程引導(dǎo)/案例展示，更好地引導(dǎo)使用
素材和組合的每一種效果都附有使用教程，鼠標(biāo)懸浮于效果右上方的問(wèn)號(hào)按鈕處，會(huì)彈出該樣式的id、教程及展示效果案例，掃碼可查看案例效果。
『間距』新功能，作品展現(xiàn)更美觀
間距功能屬于一個(gè)新的編輯功能。使用方法：在編輯區(qū)域選中某個(gè)樣式區(qū)塊，點(diǎn)擊上方菜單欄的間距，可調(diào)整選中該區(qū)塊內(nèi)外邊距的距離。
內(nèi)邊距為該素材在紅色框線內(nèi)的位置，外邊距為該區(qū)塊和上下區(qū)塊之間以及兩側(cè)邊距的距離。
同步/導(dǎo)出代碼，怎么方便怎么來(lái)
編輯好的文章可以通過(guò)兩種方式復(fù)制到微信公眾號(hào)后臺(tái)，一是同步到微信公眾號(hào)，二是復(fù)制代碼。
同步：點(diǎn)擊上方菜單欄同步，在彈出菜單欄中根據(jù)提示填寫相關(guān)內(nèi)容即可。授權(quán)公眾號(hào)的方法和135編輯器授權(quán)同步一致（點(diǎn)我查看如何授權(quán)公眾號(hào)）
導(dǎo)出：制作完成的svg作品代碼可以復(fù)制，復(fù)制的代碼可以直接粘貼到135編輯器使用（點(diǎn)擊html進(jìn)入代碼模式，粘貼代碼即可），也可以在微信后臺(tái)保存使用（點(diǎn)我查看如何復(fù)制代碼到微信公眾號(hào)后臺(tái)）
按引導(dǎo)編輯效果，操作更加簡(jiǎn)化
三兒必須要吹爆這個(gè)功能，以往在135編輯器需要通過(guò)動(dòng)畫功能或代碼才能完成對(duì)svg樣式的修改，但在svg編輯器，只需要在右側(cè)的效果設(shè)置區(qū)根據(jù)提示修改效果即可。
以超鏈接-無(wú)角標(biāo)素材為例，右側(cè)需要修改的地方分別為添加封面圖、添加跳轉(zhuǎn)網(wǎng)頁(yè)鏈接，根據(jù)提示上傳圖片及鏈接即可，操作可以說(shuō)是非常簡(jiǎn)單了。
圖片可直接拖動(dòng)，方便快捷
如圖，該功能可以實(shí)現(xiàn)直接從左側(cè)上傳里拖動(dòng)圖片到右側(cè)效果設(shè)置區(qū)替換圖片，無(wú)需重復(fù)上傳，一步到位。
04 和135使用上的區(qū)別
效果可實(shí)現(xiàn)性更高
以往我們使用135編輯器時(shí)，習(xí)慣于查找svg樣式，但相對(duì)135編輯器的svg樣式來(lái)說(shuō)，svg編輯器內(nèi)的素材和組合效果是一種升級(jí)和增強(qiáng)，很多樣式實(shí)現(xiàn)不了的效果在素材和組合里會(huì)現(xiàn)。
效果可自定義性更強(qiáng)
通常來(lái)說(shuō)，135編輯器內(nèi)的svg樣式是有一定限制的。以輪播圖片樣式為例，該樣式在135內(nèi)限制了圖片的數(shù)量，即使是通過(guò)代碼也無(wú)法增加，而在svg編輯器的素材效果里，圖片數(shù)量可以在右側(cè)的效果設(shè)置區(qū)域直接增加，無(wú)需代碼操作。
因此，svg編輯器素材和組合效果靈活度更高，可自定義性強(qiáng)。
Svg編輯器上線初期
請(qǐng)大家多多關(guān)照
有什么建議都可以在留言中告訴三兒！
