Svg編輯器界面主要分為 4 個部分:左側效果選擇區、上方工具欄、右側效果設置區以及中間的效果編輯區。
左側效果選擇區域主要是編輯器效果的展示,你可以在素材、組合或是樣式裡選擇你喜歡的svg效果進行編輯。
上方工具欄則是一些簡單的編輯操作,共有10個功能。包括上移/下移、間距、刪除、新建、保存、同步、導出、預覽、個人中心。
作品效果的修改都在右側區域完成,該區域主要分為 2 個部分,一是編輯,二是教程。
中間的效果編輯區是對整個作品的展示,不僅可以及時看到作品的展示效果,還可以對不同區塊進行上移/下移、間距、刪除等操作,使作品的整體搭配更加協調、美觀。
相比單個的svg樣式,素材的靈活度更高、可搭配性強,多種素材可自由組合。
目前的素材分類有無縫圖、點擊、滑動、長按、圖片輪播、超連結、小程序、音頻、視頻、點A見B、百葉窗、淘口令等,每一個大分類下又有多種不同效果選擇,比如視頻這個分類之下又有無縫拼接視頻和橫屏無縫拼接視頻兩種效果。
除了素材效果以外,svg編輯器還為大家準備好了 4 種圖文展開的效果,分別是點擊直接展開-自定義觸發、點擊換圖展開-自定義觸發、自動換圖展開-自定義觸發、點擊縮回再展開-自定義觸發,如果自己在效果組合上還不太拿手,可以嘗試使用組合素材。
素材和組合的每一種效果都附有使用教程,滑鼠懸浮於效果右上方的問號按鈕處,會彈出該樣式的id、教程及展示效果案例,掃碼可查看案例效果。
間距功能屬於一個新的編輯功能。使用方法:在編輯區域選中某個樣式區塊,點擊上方菜單欄的間距,可調整選中該區塊內外邊距的距離。
內邊距為該素材在紅色框線內的位置,外邊距為該區塊和上下區塊之間以及兩側邊距的距離。
編輯好的文章可以通過兩種方式複製到微信公眾號後臺,一是同步到微信公眾號,二是複製代碼。
同步:點擊上方菜單欄同步,在彈出菜單欄中根據提示填寫相關內容即可。授權公眾號的方法和135編輯器授權同步一致(點我查看如何授權公眾號)
導出:製作完成的svg作品代碼可以複製,複製的代碼可以直接粘貼到135編輯器使用(點擊html進入代碼模式,粘貼代碼即可),也可以在微信後臺保存使用(點我查看如何複製代碼到微信公眾號後臺)
三兒必須要吹爆這個功能,以往在135編輯器需要通過動畫功能或代碼才能完成對svg樣式的修改,但在svg編輯器,只需要在右側的效果設置區根據提示修改效果即可。
以超連結-無角標素材為例,右側需要修改的地方分別為添加封面圖、添加跳轉網頁連結,根據提示上傳圖片及連結即可,操作可以說是非常簡單了。
如圖,該功能可以實現直接從左側上傳裡拖動圖片到右側效果設置區替換圖片,無需重複上傳,一步到位。
以往我們使用135編輯器時,習慣於查找svg樣式,但相對135編輯器的svg樣式來說,svg編輯器內的素材和組合效果是一種升級和增強,很多樣式實現不了的效果在素材和組合裡會現。
通常來說,135編輯器內的svg樣式是有一定限制的。以輪播圖片樣式為例,該樣式在135內限制了圖片的數量,即使是通過代碼也無法增加,而在svg編輯器的素材效果裡,圖片數量可以在右側的效果設置區域直接增加,無需代碼操作。
因此,svg編輯器素材和組合效果靈活度更高,可自定義性強。