淺析SVG格式圖像文件及其在公共圖書館網(wǎng)站建設(shè)中的應(yīng)用

楊義臣

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

摘? 要： 在互聯(lián)網(wǎng)+時(shí)代，用戶訪問(wèn)互聯(lián)網(wǎng)的習(xí)慣有了翻天覆地的改變，公共圖書館為滿足用戶的需求，需要對(duì)其互聯(lián)網(wǎng)服務(wù)做出調(diào)整，將SVG格式圖像文件運(yùn)用到網(wǎng)站建設(shè)中成為調(diào)整的主要方式之一。相比傳統(tǒng)JPEG、GIF、PNG格式圖像文件，SVG格式圖像文件具有獨(dú)特的特點(diǎn)和優(yōu)勢(shì)，如何運(yùn)用SVG格式圖像文件建設(shè)公共圖書館網(wǎng)站，需要避免哪些問(wèn)題的出現(xiàn)是本文研究的重點(diǎn)。

關(guān)鍵詞： SVG格式圖像文件; 公共圖書館; 網(wǎng)站建設(shè)

中圖分類號(hào)：TP393? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A? ? ?文章編號(hào)：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 引言

互聯(lián)網(wǎng)+時(shí)代，隨著移動(dòng)智能終端設(shè)備的普及、4G通信網(wǎng)絡(luò)的成熟，以及5G通信網(wǎng)絡(luò)的到來(lái)，用戶訪問(wèn)互聯(lián)網(wǎng)的習(xí)慣發(fā)生了翻天覆地的改變，越來(lái)越多的用戶選擇使用手機(jī)、平板電腦等移動(dòng)智能終端設(shè)備訪問(wèn)互聯(lián)網(wǎng)，最大限度將自己的碎片化時(shí)間利用起來(lái)[1]。公共圖書館網(wǎng)站為了給予用戶更好的使用體驗(yàn)，需要對(duì)其互聯(lián)網(wǎng)服務(wù)功能做出相應(yīng)改變，通過(guò)技術(shù)手段讓網(wǎng)站實(shí)現(xiàn)多終端設(shè)備兼容。

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

1 SVG格式圖像文件介紹

SVG是一種圖像文件格式，這種圖像文件占用數(shù)據(jù)容量小、清晰度高，可以隨意調(diào)整圖像尺寸。將SVG格式圖像文件運(yùn)用到網(wǎng)站建設(shè)中，能在一定程度上優(yōu)化網(wǎng)站的互聯(lián)網(wǎng)服務(wù)。

1.1 SVG格式圖像文件定義

SVG是一種圖像文件格式，英文全稱為Scalable Vector Graphics，譯作可縮放的矢量圖形。它基于XML（Extensible Markup Language），由W3C（World Wide Web Consortium）聯(lián)盟開發(fā)。從嚴(yán)格意義講，SVG格式圖像文件是一種開放標(biāo)準(zhǔn)的矢量圖形語(yǔ)言。用戶可通過(guò)HTML語(yǔ)言代碼直接描繪圖像，通過(guò)調(diào)整代碼使圖像具有交互功能，并可以隨時(shí)插入到HTML網(wǎng)頁(yè)中通過(guò)瀏覽器來(lái)觀看[2]。

1.2 SVG格式圖像文件優(yōu)點(diǎn)

第一，相比傳統(tǒng)JPEG、GIF、PNG格式圖像文件（以下簡(jiǎn)稱傳統(tǒng)圖像文件），SVG格式圖像文件占用數(shù)據(jù)容量更小。制作圖標(biāo)類的傳統(tǒng)格式圖像文件，文件數(shù)據(jù)容量一般在50-100KB，如果再對(duì)圖像文件進(jìn)一步壓縮，會(huì)出現(xiàn)模糊、失真的情況。而制作圖標(biāo)類的SVG格式圖像文件，數(shù)據(jù)容量一般小于50KB，將SVG格式圖像文件運(yùn)用到網(wǎng)站建設(shè)中，不僅可以提高網(wǎng)站加載的速度，同時(shí)也為用戶節(jié)省了移動(dòng)數(shù)據(jù)流量。

第二，圖像文件的原始像素?cái)?shù)據(jù)是針對(duì)特定尺寸大小設(shè)計(jì)的，當(dāng)圖像文件不再是原始尺寸時(shí)，顯示圖像的程序會(huì)猜測(cè)使用何種數(shù)據(jù)來(lái)填充新的像素[3]。因此，傳統(tǒng)格式圖像文件在改變圖片原始尺寸后，會(huì)出現(xiàn)模糊、失真或者像素化的問(wèn)題。SVG格式圖像文件不同于傳統(tǒng)圖像文件，其具有更高的彈性，當(dāng)圖像尺寸發(fā)生變化時(shí)，數(shù)據(jù)公式可以做出相應(yīng)的調(diào)整，保障圖像的各種細(xì)節(jié)和清晰度。

第三，SVG格式圖像文件更易于修改。在修改傳統(tǒng)格式圖像文件時(shí)，需要使用專業(yè)的圖像編輯處理軟件（Adobe Photoshop等）對(duì)圖像源文件進(jìn)行修改和處理。而SVG格式圖像文件，其圖像源文件是文本文件，使用任何支持文本編輯的軟件都可以對(duì)SVG格式圖像文件進(jìn)行修改和調(diào)整，在一定程度上降低了修改圖片文件的復(fù)雜程度。

1.3 將SVG格式圖像文件運(yùn)用到網(wǎng)站建設(shè)中的方法

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

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

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

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

在SVG格式圖像文件創(chuàng)建完成后，需要通過(guò)HTML語(yǔ)言將SVG格式圖像文件嵌入到網(wǎng)頁(yè)代碼中，一般常用的嵌入方式包括：標(biāo)簽嵌入、