淺析SVG格式圖像文件及其在公共圖書館網站建設中的應用

楊義臣

DOI：10.16644/j.cnki.cn33-1094/tp.2021.11.009

摘? 要： 在互聯網+時代，用戶訪問互聯網的習慣有了翻天覆地的改變，公共圖書館為滿足用戶的需求，需要對其互聯網服務做出調整，將SVG格式圖像文件運用到網站建設中成為調整的主要方式之一。相比傳統JPEG、GIF、PNG格式圖像文件，SVG格式圖像文件具有獨特的特點和優勢，如何運用SVG格式圖像文件建設公共圖書館網站，需要避免哪些問題的出現是本文研究的重點。

關鍵詞： SVG格式圖像文件; 公共圖書館; 網站建設

中圖分類號：TP393? ? ? ? ? 文獻標識碼：A? ? ?文章編號：1006-8228（2021）11-34-04

Analysis of SVG format image file and its application in construction

of public library website

Yang Yichen

（National Library of China， Beijing 100081， China）

Abstract： In the "Internet plus" era， users' habit of accessing the Internet has changed dramatically. In order to meet the needs of users， public libraries need to adjust their Internet services， and one of the main ways is to use SVG format image file to build websites. Compared with the traditional JPEG， GIF， PNG format image files， SVG format image file has unique characteristics and advantages， how to use SVG format image file to build public library website and what problems need to be avoided are the focus of this article.

Key words： SVG format image file; public library; website construction

0 引言

互聯網+時代，隨著移動智能終端設備的普及、4G通信網絡的成熟，以及5G通信網絡的到來，用戶訪問互聯網的習慣發生了翻天覆地的改變，越來越多的用戶選擇使用手機、平板電腦等移動智能終端設備訪問互聯網，最大限度將自己的碎片化時間利用起來[1]。公共圖書館網站為了給予用戶更好的使用體驗，需要對其互聯網服務功能做出相應改變，通過技術手段讓網站實現多終端設備兼容。

公共圖書館要實現網站的多終端設備兼容功能，優化互聯網服務，不僅要考慮網站在PC端的展示效果，也要兼顧眾多移動端設備的顯示效果和加載速度。因此，眾多以SVG格式為代表的矢量圖像文件被運用到網站建設中。通過單獨加載SVG格式圖像文件或者下載封裝好的CSS（層疊樣式表：Cascading Style Sheets）和WOFF（Web開放式字體格式：Web Open Font Format）文件即可將SVG格式圖像文件運用到網站建設中，從而優化網站的互聯網服務。

1 SVG格式圖像文件介紹

SVG是一種圖像文件格式，這種圖像文件占用數據容量小、清晰度高，可以隨意調整圖像尺寸。將SVG格式圖像文件運用到網站建設中，能在一定程度上優化網站的互聯網服務。

1.1 SVG格式圖像文件定義

SVG是一種圖像文件格式，英文全稱為Scalable Vector Graphics，譯作可縮放的矢量圖形。它基于XML（Extensible Markup Language），由W3C（World Wide Web Consortium）聯盟開發。從嚴格意義講，SVG格式圖像文件是一種開放標準的矢量圖形語言。用戶可通過HTML語言代碼直接描繪圖像，通過調整代碼使圖像具有交互功能，并可以隨時插入到HTML網頁中通過瀏覽器來觀看[2]。

1.2 SVG格式圖像文件優點

第一，相比傳統JPEG、GIF、PNG格式圖像文件（以下簡稱傳統圖像文件），SVG格式圖像文件占用數據容量更小。制作圖標類的傳統格式圖像文件，文件數據容量一般在50-100KB，如果再對圖像文件進一步壓縮，會出現模糊、失真的情況。而制作圖標類的SVG格式圖像文件，數據容量一般小于50KB，將SVG格式圖像文件運用到網站建設中，不僅可以提高網站加載的速度，同時也為用戶節省了移動數據流量。

第二，圖像文件的原始像素數據是針對特定尺寸大小設計的，當圖像文件不再是原始尺寸時，顯示圖像的程序會猜測使用何種數據來填充新的像素[3]。因此，傳統格式圖像文件在改變圖片原始尺寸后，會出現模糊、失真或者像素化的問題。SVG格式圖像文件不同于傳統圖像文件，其具有更高的彈性，當圖像尺寸發生變化時，數據公式可以做出相應的調整，保障圖像的各種細節和清晰度。

第三，SVG格式圖像文件更易于修改。在修改傳統格式圖像文件時，需要使用專業的圖像編輯處理軟件（Adobe Photoshop等）對圖像源文件進行修改和處理。而SVG格式圖像文件，其圖像源文件是文本文件，使用任何支持文本編輯的軟件都可以對SVG格式圖像文件進行修改和調整，在一定程度上降低了修改圖片文件的復雜程度。

1.3 將SVG格式圖像文件運用到網站建設中的方法

創建SVG格式圖像文件并將其加載到網頁中使用的方法不同于傳統圖像文件，傳統的圖像文件通常使用專業的圖像編輯處理軟件創建，比如 Adobe Photoshop。而SVG格式圖像文件通常使用基于 XML 的語言創建。圖1中展示了創建圓形SVG格式圖像文件的代碼和顯示效果。

SVG格式圖像文件常用的形狀元素代碼主要包括：直線形（line）、折線形（polyline）、矩形（rect）、圓形（circle）、橢圓形（ellipse）、多邊形（polygon）、路徑（path）。

除了路徑元素，其他元素均可以依靠簡單的坐標繪制出需要的形狀。路徑元素需要通過一系列專門的命令創建任意圖形。這些命令包括：M（移動到）、L（連線到）、H（水平連線到）、V（垂直連線到）、C（使用曲線連接到）、S（使用平滑曲線連接到）、Q（使用二次貝塞爾曲線連接到）、T（使用平滑的二次貝塞爾曲線連接到）、A（使用橢圓曲線連接到）、Z（將路徑封閉到）。

此外，SVG格式圖像文件還支持陰影、漸變、文本、模糊等功能，可用于創建不同需求的矢量圖形。

在SVG格式圖像文件創建完成后，需要通過HTML語言將SVG格式圖像文件嵌入到網頁代碼中，一般常用的嵌入方式包括：標簽嵌入、