如何下載網頁 SVG 檔案？如何製作 Logo 的 SVG？

最後更新日期：2024 年 7 月 7 日

大家曾經有沒有想要下載某個網站的 Logo ，但是那個 Logo 是網頁上的向量圖( SVG )，然後不知道該如何下載。

本篇文章會教你透過一個 Google 的擴充程式，輕鬆下載網頁上所有的 SVG ，最後教你如何製作出 Logo 的 SVG 檔。

 

什麼是 SVG？

SVG 的全名為可縮放向量圖形（Scalable Vector Graphics）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。

SVG 的優點：

• 可以延展到任何大小而不失真
• 比 PNG 、 JPG 的檔案還小
• 友善網頁呈現，因為 html 具有 svg 的 tag 
• 可以很方便的編輯圖片，甚至可以嵌入 JavaScript

SVG 最常見的應用就是做 Logo，因為 Logo 常常需要適應瀏覽器的不同大小，使用 SVG 可以防止 Logo 模糊。

但是 SVG 很容易拿來當作連結使用，不容易下載。

因此接下來要教你如何一次下載網頁上所有的 SVG。

 

如何下載網頁 SVG 檔案？

step 1

首先上網搜尋 SVG Export ， 找到擴充程式安裝。

 

step 2

接著我找 Libra 的網站來示範。

點選 SVG Export 的圖案，這邊就可以選擇要匯出哪種格式的圖片，有 SVG、PNG、JPEG，接著可以按 Export SVGs 一次下載全部。

step 3

接著就可以看到全部的 SVG 被打包在一個 ZIP。

下載 SVG 是不是非常簡單呢？

接下來我會教你如何產生 Logo 的 SVG 檔案。

 

如何製作 Logo 的 SVG？

step 1

首先我們到 Looka 這個網站，然後點選右上角的 Sign up。

step 2

接著會進入這個畫面，輸入你要使用 Logo 的行業類型。

像阿璋本身是資工系的，所以我就輸入 Programming ，這裡記得輸入英文。

step 3

選擇 5 種你喜歡的 Logo，這裡只是做參考，不代表就是這個圖案。

step 4

再來選擇 2 種你喜歡的配色。

step 5

接著會根據上面的配色，產生出幾種顏色，選擇3種你喜歡的顏色。

step 6

輸入你的公司名稱或是 Logo 名稱，然後也可以輸入公司的標語，標語不要太長，一樣輸入英文。

step 7

接著選擇 5 種你喜歡的標誌圖案，這裡也可以不選擇略過。

step 8

都選擇完以後，這裡就會產生出一些 Logo 的模樣給你選擇，選擇其中一種你最喜歡的 Logo 去編輯。

step 9

接著可以編輯你的 Logo ，選擇你最後想要的樣式，並且按上面的 Saved Logos。

step 10

按下 Saved Logos 之後，就可以點選你要購買的 Logo，選擇 Buy logo。

step 11

接著就是選擇購買方案，基本上我會推薦買第二個 Premium 的方案最划算。

因為第一個 Basic 就只有一張圖片而已，第三個 Enterprise 除非有特別需求才購買。

第二個 Premium 裡面包含了原圖、透明背景、黑色、白色 4 種類型，並且提供 eps、pdf、png、svg 檔案。

如果要創造一個品牌，這個方案就讓你完全不用擔心 Logo 了！

step 12

如果是選 Premium 方案，下載完的檔案就會有這些，每個資料夾都有我剛剛說的 4 種類型圖片。

 

結論

本篇文章簡單介紹了什麼是 SVG，以及如何下載網頁上的所有 SVG 檔案。

最後示範如何透過 Looka 做出自己專屬的 Logo ，並且可以下載 SVG。

更多實用小技巧

• 如何下載 Vimeo 含密碼的私人影片？ 10個步驟免費下載教學
• 如何破解Youtube地區限制影片？
• 手機收到 QR Code 怎麼掃？
• 電腦如何掃描 QR Code？
• 免費下載 IG 照片、影片、限時動態
• 如何下載網頁 SVG 檔案？如何製作 Logo 的 SVG？
• Facebook 臉書備份工具教學，輕鬆備份照片影片到 Google 相簿！
• Win 10 筆電 Wifi 功能消失怎麼辦？ Acer Swift 3 五個步驟修復成功！

支持阿璋的新書《打開網路就有錢》，裡面分享許多自媒體以及投資理財的知識，非常適合網路創業者以及想要增加額外收入的上班族閱讀。




如果你對幣圈資訊有興趣，可以訂閱此電子報：幣圈最新資訊

我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群：Crypto Mind 加密腦

推坑阿璋超愛的商品，歡迎加入團購群：阿璋好物團購 LINE 社群

12篇文章手把手教你如何透過部落格開始賺錢：站長之路

更多相關社群連結：工具王阿璋社群列表

本站有部分連結與商家有合作關係，透過我的連結購買，我會獲得少數佣金，讓我可以持續營運網站，但並不會影響您的任何權益，詳情查看免責聲明。

如果我的文章對你有幫助，歡迎贊助我一杯咖啡！

本站所有內容皆為阿璋個人經驗分享，如有涉及投資請謹慎評估，阿璋不做任何投資建議。



文章引用請來信索取授權，否則將保留法律追訴權。

by Johntool-工具王阿璋