可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。由于SVG是XML文件,SVG图像可以用任何文本编辑器创建,但它往往是与一个绘图程序一起使用,如Inkscape,更方便地创建SVG图像。

SVG可缩放矢量图形

维基百科给出的定义:

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

百度百科给出的定义:

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。

  • SVG是指可伸缩矢量图形
  • SVG用来定义用于网络的基于矢量的图形
  • SVG使用XML格式定义图形
  • SVG图像在放大或缩小(改变尺寸)的情况下,其图形质量不会受受损失
  • SVG是W3C的一个标准

SVG优势

  • SVG可被非常多的工具读取和修改(比如记事本)
  • SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。
  • SVG是可伸缩的
  • SVG图像可在任何的分辨率下被高质量地打印
  • SVG可在图像质量不下降的情况下被放大
  • SVG图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
  • SVG可以与Java技术一起运行
  • SVG是开放的标准
  • SVG文件是纯粹的XML

在浏览器中显示

将SVG图像嵌入到HTML文件有多种方法:

  • 使用iframe元素来嵌入SVG图像:src
  • 使用img元素来嵌入SVG图像:src
  • 将SVG图像作为背景图像嵌入:url()
  • 直接使用svg元素:代码嵌入path
  • 使用embed元素来嵌入SVG图像:src type=”image/svg+xml” =”http://www.adobe.com/svg/viewer/install/”
  • 使用object元素来嵌入SVG图像:src type=”image/svg+xml” codebase=”http://www.adobe.com/svg/viewer/install/”