快捷导航

栏目导航

SVG简单介绍

2017-11-17 11:24| 发布者: admin| 查看: 931| 评论: 1|来自: 钱柜手机网页版

随着时间的推移,浏览器的升级,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="" />
<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 人)

发表评论

最新评论

引用 三德子 2018-3-13 18:20
这里的svg教程是最好的,全网最好的

查看全部评论(1)

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-24 10:12 , Processed in 2.321866 second(s), 23 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 钱柜手机网页版

返回顶部