浅析SVG格式图像文件及其在公共图书馆网站建设中的应用
2021-11-20杨义臣
杨义臣
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格式图像文件嵌入到网页代码中，一般常用的嵌入方式包括：