您的位置:首页> HTML5教程> SVG教程

SVG简单介绍

2019-8-6 14:35| 作者: admin| 查看: 1982| 评论: 0|来自: 蚂蚁部落

随着时间的推移,浏览器的升级,SVG的应用会越来越广泛,因为它具有诸多优点。

下面就对SVG进行一下简单介绍,在随后的章节会逐步讲解SVG的基本操作。

一.SVG是什么:

SVG是英文“Scalable Vector Graphics”的简称,翻译成中文是“可缩放矢量图形”。

它是基于可扩展标记语言(XML)(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。

它由万维网联盟制定,是一个开放标准。

二.SVG主要特点:

(1).SVG是可伸缩矢量图形。

(2).SVG用来定义用于网络的基于矢量的图形。

(3).SVG使用XML格式定义图形。

(4).SVG图像在放大或缩小(改变尺寸)的情况下,其图形质量不会受受损失。

(5).SVG是W3C的一个标准。

三.SVG主要优势:

(1).SVG可被众多工具读取和修改(比如记事本)。

(2).SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。

(3).SVG是可伸缩的。

(4).SVG图像可在任何的分辨率下被高质量地打印。

(5).SVG可在图像质量不下降的情况下被放大。

(6).SVG图像中的文本是可选的,同时也是可搜索的(很适合制作地图)。

(7).SVG可以与Java技术一起运行。

(8).SVG是开放的标准。

(9).SVG文件是纯粹的XML。

四.代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle
          cx="100" cy="50"
          r="40"
          stroke="black"
          stroke-width="5"
          fill="green" />
</svg>
</body>
</html>

上面是一个极其简单的SVG代码实例,目的是对SVG有一个初步直观的感受。

1

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

返回顶部