figma
Share your love
SVG圖片格式是什麼?如何用線上軟體Figma免費製作.svg素材
在網路上有許多方案(有免費、有些則須付費)可以減小圖片檔案大小,以幫助提高網站的性能。其中之一便是將網站的Logo從png檔或jpg圖檔轉換為使用svg格式,SVG 是一種可擴展的圖像格式,通常檔案可以極致壓縮到很小,而且不需要考量到retina @2x的使用情境。本篇將介紹如何用線上軟體Figma免費製作.svg。 對於網站部落格主來說,SEO(搜尋引擎最佳化)的優化代表著網站成功與否,自己的網站出現在搜尋結果第一頁間接代表著網站能夠成功地被大眾瀏覽。根據數據統計,網站圖片平均佔網頁總權重的20%左右,大容量的圖像會減慢網頁瀏覽速度,產生不太理想的用戶體驗,因此著手於圖像的優化是SEO成功的關鍵之一。這篇文章將說明如何使用並製作svg檔案格式。 SVG是什麼 可縮放向量圖形 (Scalable Vector Graphics,簡稱SVG) 是基於 XML語言的可擴展向量圖檔,一種支援交互性和動畫的二維圖形,通常用來顯示網站logo或icon圖檔。 SVG發佈於1999年,由國際標準組織W3所制定的是一個開放標準,可以加入向量圖形、點陣圖像、文字等圖形物件類型。SVG基於XML語法,用文字格式來組成描述圖像內容,提高SVG圖形的被搜尋能力和無障礙性。 線上軟體Figma製作logo.svg格式素材圖檔 上傳至Wordpress,已支援svg圖檔 目前wordpress的媒體庫已經支援.svg格式,可以上傳其他圖檔一樣,直接拖移至媒體庫即可上傳。 上傳後在到佈景主題的logo位置,更換成svg頭像即可。 延伸閱讀 Google團隊為了優化網站載入的性能,便開發了圖像壓縮工具 Squoosh.App,可以用來優化圖片、照片並修改尺寸,解決檔案或尺寸過大的問題。可參考免費線上【圖片壓縮】Squoosh:由Google開發的圖片優化工具 Figma除了可以輸出svg檔案格式外,也可以做圖片去背的功能,可以參考免費線上【圖片去背】實測3款快速去除背景軟體網站比較:Adobe、AirMore、Figma
免費線上圖片去背,實測3款軟體去除背景神器!
最大的設計煩惱之一,就是正在設計某些東西時,正在編輯的圖面或照片上面有不需要的背景,則要用免費線上軟體去背景。這篇文章將介紹如何完全去除照片背景,並使圖片背景設定為透明,以便將圖片呈現為其他背景的外觀。本篇將實測3款圖片去背神器:Adobe、AirMore、Figma、Photoroom。 在測試過許多圖片去背的線上免費軟體之後,實測有四個線上免費軟體最好用: Adobe Express AirMore Figma-RemobeBG Photoroom.com 註:經實測,推薦使用Adobe Express與Photoroom。 方法一:Adobe Express-用滑鼠就能操作的去背景軟體 Adobe Express是由Adobe Inc.開發,用於任務取向整合系統,可直接在網頁版線上使用或手機app使用。透過可用滑鼠選擇、拖曳技術,Creative Cloud Express使用戶能夠設計製作Logo、傳單、邀請函等多媒體內容,也提供相關設計模板、字體和免費照片。 Adobe Express有依照使用需求分為Free(免費版)與Priumium(一個月約330元)計劃。 而在目前去除背景的功能在免費版即可使用,因此可以使用Adobe的線上軟體來達成免費去背的功能。 Step1. 前往Adobe Express 移除背景功能 點選連結:Adobe Express 移除背景功能 蠻多線上軟體都有支援Google帳號登入,這邊建議可擁有一組Google帳號作為登入使用。 Step2. 上傳影像 上傳想要移除背景的影像 Step3. 影像處理中 上傳後會顯示處理中畫面,我這邊用一個包裝品放在角落作為範例。 Step4. 下載圖片 處理完之後會顯示移除結果,並點選右方下載即可下載該圖面。 提醒:移除的結果是不能做更動的。若想要改變結果,可先把圖面放進小畫家等圖面編輯軟體,將想要移除的地方塗黑,讓系統去判定。 方法二:AirMore-免費線上去背 AirMore是個多媒體管理平台,可以將照片、檔案等資料上傳到手機的app上,並且同步至雲端上,可由電腦來做傳輸、管理。 而airmore作為多媒體管理平台,也有開發線上影片編輯、線上圖片去背、以及線上PDF編輯等功能。…