QRSVG:開源 QR Code 產生器,輸入不外送還能打包離線用

QRSVG(fietkau.software/qr)是德國研究軟體工程師 Julian Fietkau 的開源 QR Code 產生器,2026 年 9 月實測:輸入網址全程零對外連線、輸出的 SVG 由四條可分別上色的路徑組成、支援八種形狀樣式與批次 ZIP 打包,還能把整個工具下載成單一 HTML 檔離線使用。

用 AI 摘要這篇文章:

把網址丟進 QR Code 產生器之前,多數人不會多想一步:這串網址會先送進誰的伺服器。市面上大部分免費產生器的答案是「我的」,廣告、統計腳本、後端 API 都是標準配備,你要的只是一張圖,付出的卻是活動頁網址、客戶連結或內部文件的內容紀錄。德國工程師 Julian Fietkau 做的 QRSVG 把這個預設整個反過來。實測輸入一個網址、切換樣式、下載檔案,從頭到尾瀏覽器沒有發出任何一個對外連線,連網頁字型都是站方自己放的,沒有借 Google Fonts 一個位元組。

它是一個開源專案的展示頁,地址在 fietkau.software/qr,授權是 MIT,用起來就是一個普通的網頁工具:輸入文字、調樣式、按下載。整個頁面沒有廣告、沒有彈窗、沒有 Cookie 同意橫幅,第一次載入就直接可以動手,這種乾淨在免費工具網站裡已經快絕跡。差別在底層的設計哲學:所有運算都在你的瀏覽器裡完成,站方連「幫你算」的機會都沒有,自然也沒有東西可以記。以下是把整個工具操過一輪之後,值得先知道的事。

QRSVG 網頁版 QR Code 產生器介面,左側輸入框與配色、形狀、標誌選項,右側即時預覽與下載按鈕Pin
QRSVG 官方產生器介面(fietkau.software/qr):輸入網址即時預覽,Shape 展開可見八種樣式,畫面資料截至 2026 年 9 月

從輸入到下載,對外連線一次都沒發生

把整個使用流程跑完一遍,對外連線的數量是零。頁面載入只向 fietkau.software 要了 5 個檔案:頁面本身、一份樣式表、一份程式碼,以及兩個 Roboto 字型檔。連字型都放在自己伺服器上,這個細節已經說明了站方的態度。

接下來的操作更關鍵。在輸入框打進網址、切換四種形狀樣式、下載 SVG 與 PNG、上傳三行網址做批次、勾選記住設定,這一整套動作期間,離開瀏覽器的連線數是零。也就是說你輸入的每一個字都只存在於你自己的電腦上,批次清單裡整批活動網址也一樣,不會在任何伺服器的存取紀錄裡留下足跡。

批次模式要單獨講,因為它處理的是最隱私敏感的場景。操作方式很樸素:準備一個文字檔,一行一個網址,上傳後頁面確認收到三個網址,接著可以把整批結果一次打包下載成 ZIP。實測上傳三行網址,壓縮檔裡就是三個 SVG,檔名從網址自動轉換而來,人眼看得出對應關係。整個過程只有你的瀏覽器在忙碌,沒有進度上傳、沒有雲端佇列,一批幾十個客戶專屬連結也是同樣的零外送。

這不只是「沒看到追蹤器」的程度。伺服器回應裡帶著一條內容安全政策(CSP),明文限制腳本只能載入同源檔案,等於站方主動築了一道牆,就算哪天想偷加第三方統計腳本,瀏覽器也會直接擋下。隱私在這裡是技術上的強制,不是行銷文案裡的承諾。

下載的 SVG 打開看:四條路徑各司其職

QRSVG 這個名字來自它的核心技術:輸出 SVG 向量檔。把下載的檔案用文字編輯器打開,會看到它的結構與一般產生器明顯不同。一般工具產生的 SVG 是一格一格的方塊,每個黑色的模組畫一個矩形,數百個矩形排成整張圖。QRSVG 則是沿著相連形狀的邊緣描出輪廓,整張圖只有四條路徑:三個定位角的外框一條、定位角內芯一條、單獨的資料點一條、其餘成形的區塊一條。

分成四條不是為了好看,是為了讓你分別上色。站上的色板模式就建立在這個結構上:定位角外框、定位角內芯、資料點、成形區塊各配一個顏色,四個顏色組合起來就是一張有設計感的 QR Code。拿到 Illustrator 或 Inkscape 裡,你也可以直接選取其中一條路徑換色,向量檔縮放到海報大小不會失真,這是 PNG 點陣檔做不到的。檔案裡還留了一行註解,寫明這張圖產自 fietkau.software/qr,對需要交代素材來源的設計流程算是貼心的細節,預設畫布屬性給到 1550×1550,一般印刷用途綽綽有餘。

以這次實測輸入 21 個字元的網址為例,畫布是 31×31,等於 29×29 的模組加上外圍一圈留白。輸入框的長度上限是 2953 個字元,正好是 QR 規格在位元組模式下的理論最大值,超過這個長度的內容本來就裝不進任何 QR Code。輸入框下方還會即時顯示目前碼的尺寸,內容愈長模組數愈多,回饋是即時的。錯誤校正的等級也在這裡發揮作用,等級愈高、資料愈安全但碼愈密,站方把高等級設為預設並標註建議,方向是把可掃描的穩定性放在第一位。

QRSVG 圓點樣式輸出的 QR Code,資料點為圓形而三個定位角維持方形Pin
圓點樣式實際輸出(輸入內容為 techmoon.xyz):定位角保持方形、資料點全部為圓形,同一個網址每次生成結果相同

開發者該知道一個分工:QRSVG 函式庫本身不做 QR 編碼。把文字變成 QR 資料矩陣的是內嵌的 Project Nayuki 產生器,這是一個相當資深的開源專案,同一套演算法維護了多種程式語言的版本,各版本大約一千行程式碼,授權同樣是 MIT。QRSVG 負責的是把這份資料畫成向量圖。想在自己的網站嵌入這套能力的人,取得的是一個 720 行的單檔 JavaScript,註解完整,看得出是寫給別人接手用的程式碼。

八種樣式玩得開,但站方先警告你掃描風險

樣式是這個工具最熱鬧的部分,總共八種:基本方形、圓角、圓點、馬賽克、彩帶紙屑、掃描線,加上輕重兩級的手繪抖動。實測切換到圓點樣式,三個定位角維持方形、資料點全部變成圓形,下載的 SVG 裡圓形直接以弧線路徑畫成。馬賽克樣式讓每個資料點帶著隨機的旋轉角,掃描線樣式把整張圖變成橫向的條紋質感,彩帶紙屑更是把每個點都撒成碎紙片,視覺上已經不太像傳統的 QR Code,但掃描起來靠的還是同一份底層資料。抖動樣式的隨機是可重現的:程式碼裡的亂數種子固定,同一個網址每次生成的圖完全一樣,這對要反覆改版比稿的設計流程很實用。

QRSVG 八種形狀樣式選擇按鈕,包含基本方形、圓角、圓點、馬賽克與掃描線等圖示Pin
八種形狀樣式按鈕一覽:基本、圓角、圓點、馬賽克、彩帶紙屑、掃描線,加上輕重兩級手繪抖動

顏色有三種模式:單色、雙色漸層(線性或放射,可一鍵對調)、四色色板。標誌疊加提供內建的電話、郵件、文件、訊息等圓形圖示,疊在 QR Code 的正中央,被壓到的模組會自動挖空,也可以上傳自己的 PNG 或 JPG 圖片當標誌,還能強制把標誌換成單一顏色,讓標誌直接納入整體配色系統。進階選項有錯誤校正四級(預設高等級,站方標註建議使用)、留白寬度 0 到 99 可調,還有一個強制符合 ISO/IEC 18004 規格的開關,做正式印刷品的人會用到。頁面還能記住你的設定,勾選之後所有選項存在瀏覽器的本機儲存空間裡,下次造訪自動讀回,不必從頭調起。

不過頁面上有一句站方自己寫的警告,建議每個使用者都認真看待:某些自訂組合可能降低 QR Code 的可掃描性,付印之前務必實際測試。這句話有實質內容。花俏樣式、低對比配色、太窄的留白,都是實際會讓手機相機解不出來的因素。程式碼註解裡,作者標明抖動幅度是反覆實驗後仍維持良好掃描相容性的值;保守的做法是,要印到實體文宣上的碼,樣式玩歸玩,付印前先用自己的手機掃過一遍,錯誤校正留在高等級。

整個工具能打包成單一 HTML 帶走

頁面上有個不太起眼的按鈕:下載這個工具。按下去得到一個約 224 KB 的 HTML 檔,體積比一張手機照片小得多,放在隨身碟或雲端硬碟都不佔空間,點開就是完整版的產生器,功能與網站版相同,差別只在它跑在你的硬碟上,斷網也能用。站方對這個按鈕的說明寫得很直白:如果你喜歡,可以下載一份備份,就算哪天這個網站消失了,工具還是能用。對依賴免費網路工具的人來說,這句話解決的正是最根本的焦慮:工具的壽命不等於網站的壽命。

開發者的背景讓這套設計顯得可信。Julian Fietkau 在個人網站上的自我介紹是德國國家科學技術圖書館的研究軟體工程師,2023 年取得資訊科學博士,研究領域是人機互動。他在專案頁自述做這個工具的動機:市面上的免費產生器大多不是掛廣告就是帶追蹤,客製化選項也湊不齊他要的組合,於是自己動手。這段動機出自作者本人,而前面量到的零對外連線,和這個說法對得上。

專案的維護狀態也透明。原始碼放在站方自己架的 git 伺服器上(不過 GitHub 也有人鏡像),整個函式庫 720 行,開發集中在 2024 年 8 月底到 9 月中的兩週,之後專案狀態標記為完成。最近一次更新是 2026 年 1 月,內容是修正授權檔的署名:原本照抄現成 MIT 範本時忘了改,檔案裡署的是範本作者的名字,一年多後才更正為 Fietkau 本人。對使用者來說,這代表兩件事:功能已經穩定完備,但別期待新功能會一直長出來;要進場的人拿到的是一份定稿。

要印海報的人用它,隨手貼連結的人不必

什麼人值得把這個工具放進書籤?最直接的答案是做印刷與設計的人。傳單、海報、簡報需要的是向量檔,而且常常要配合視覺識別改顏色、嵌標誌,四路徑結構的 SVG 正好給足後製空間,四色色板與標誌疊加等於把第一輪設計直接在瀏覽器裡做完。重視隱私的批次需求是另一種典型場景,活動報名系統、多據點門市、客戶專屬連結,整批網址透過文字檔匯入,一次打包成 ZIP,全程不出本機。先前介紹過的條碼產生器 barcode-maker走的是同樣的純瀏覽器路線,差別在它做一維條碼與批次序列為主,需要 EAN、Code 128 那類條碼時用它,需要 QR Code 的向量與樣式時用 QRSVG,兩個可以並存。

日常用途也有它的位置。收款用的 PayPal.Me 與轉帳 QR 產生器偏交易場景,QRSVG 偏內容出版場景,把人從紙本帶到網頁。拿到 SVG 之後如果嫌檔案大,丟給 SVG 縮檔工具 svgomg再壓一輪;反向的需求、把點陣圖描成向量的工作,則可以看 vectorizer.ai

至於只是偶爾要把一條連結變成 QR Code、也不介意網站知道這條連結的人,用任何一個搜尋排前面的免費產生器都行,那些工具的便利是真的,代價也是真的。QRSVG 的價值在於它把選擇權還給使用者:不註冊、不留言、不留紀錄,用完即走,甚至可以把整個工具帶走。一個 2024 年就完成的小專案,用最少的程式碼示範了網路工具的另一種可能,這比任何隱私權政策都更有說服力。

Sliven 褚崇名
Sliven 褚崇名

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

文章: 1406

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


Share to...