SVG 是使用 XML 来描述二维图形和绘图程序的语言。

学习之前应具备的基础知识:

继续学习之前,你应该对以下内容有基本的了解:

  • HTML
  • XML 基础

如果希望首先学习这些内容,请在本站的首页选择相应的教程。

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 是 W3C 推荐标准

SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。

如需阅读更多有关 W3C 的 SVG 活动的信息,请访问我们的 W3C 教程

SVG 的历史和优势

在 2003 年一月,SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比,使用 SVG 的优势在于:

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

SVG 的主要竞争者是 Flash。

与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。

查看 SVG 文件

今天,所有浏览器均支持 SVG 文件,不过需要安装插件的 Internet Explorer 除外。插件是免费的,比如 Adobe SVG Viewer

from:http://www.w3school.com.cn/svg/svg_intro.asp

教程实例

所谓闻名不如见面,可以看下例子:http://www.w3school.com.cn/svg/svg_examples.asp

学习教程

W3School official website:http://www.w3school.com.cn/svg/index.asp

SVG关注复杂图形的网页绘制技术的更多相关文章

  1. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  2. 如何以Java实现网页截图技术

    转自   http://blog.csdn.net/cping1982/article/details/5353049 今天看到某网友关于“如何以Java实现网页截图技术”的咨询帖,由于出现该咨询的地 ...

  3. 【转】W3C中国与百度联合组织移动网页加速技术研讨会

    2017 年 8 月 30 日,W3C 会员百度在北京中关村软件园国际会议中心主办了 "移动网页加速技术研讨会",W3C 中国以及腾讯.阿里巴巴及 UC.搜狗.小米.傲游.中国移动 ...

  4. 借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制

    原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的. 这 ...

  5. 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...

  6. 网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊!

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript....好强.好简单啊!#1 http://www.dotblogs.com.tw/mis2 ...

  7. SVG坐标系统及图形变换

    前面的话 前面介绍过SVG视野后,本文将开始介绍SVG坐标系统及图形变换 坐标定位 对于所有元素,SVG使用的坐标系统或者说网格系统,和Canvas用的差不多(所有计算机绘图都差不多).这种坐标系统是 ...

  8. seo网页加速技术,预加载 DNS Prefetching 详解

    seo网页加速技术,预加载 DNS Prefetching 详解 DNS Prefetching 是什么 : DNS 是什么-- Domain Name System,域名系统,作为域名和IP地址相互 ...

  9. 静态网页开发技术-HTML

    今天我重新复习了一下静态网页开发技术,概括如下. 一 .HTML文档结构与基本语法 :放置了标签的文本文档,可供浏览器解释执行的网页文件 1.注释标记 2.标记 3.属性 二.基本标记与使用 1.网页 ...

随机推荐

  1. 让Cocos2D-X的示例程序运行起来

    没有整理好,现在先标记下 安装好环境后可能遇到的问题: 1.cocos2d-X 2.0版本后创建的Android项目提示org.cocos2dx.lib.Cocos2dxActivity找不到问题 解 ...

  2. JVM的体系结构——JVM之三

    JVM的内部体系结构分为四部分, (1)类装载器(ClassLoader)子系统 作用: 用来装载.class文件 (2)执行引擎 作用:执行字节码,或者执行本地方法 (3)垃圾回收子系统 作用:垃圾 ...

  3. SIEM思考

    https://securosis.com/blog/comments/understanding-and-selecting-siem-log-management-introduction/ ht ...

  4. Visual Studio 2015 Update 3 RC 候选预览版粗来了

    .Net 基金会 http://www.dotnetfoundation.org/ 更新的真快,刚打完2的补丁包,3就粗来了............ https://www.visualstudio. ...

  5. 百度地图V2.0实践项目开发工具类bmap.util.js V1.4

    /** * 百度地图使用工具类-v2.0(大眾版) * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @em ...

  6. Node.js log2: ERR when execute command >npm install

    1.Node.js创建项目 项目microblog创建成功,提示:cd  microblog& npm install 项目创建完成时的目录如下图所示: 2.Node.js错误 如题所言: E ...

  7. linux之SQL语句简明教程---TRIM

    SQL 中的 TRIM 函数是用来移除掉一个字串中的字头或字尾.最常见的用途是移除字首或字尾的空白.这个函数在不同的资料库中有不同的名称: MySQL: TRIM( ), RTRIM( ), LTRI ...

  8. 怎样在xcode中使用storyboard

    StoryBoard是iOS 5的新特征,目的是取代历史悠久的NIB/XIB,对于已经习惯了xib文件的孩子们来说,StoryBoard还不是那么熟悉.经过两天的研究,有了一些心得,在此分享. 一.怎 ...

  9. ZCTF-ARM64-Re300

    Re300-arm64     是一个64位的ARM程序.使用IDA加载,蹦出来这个框框,就是说IDA6.6还没有对ARM64位的程序实现relocation的分析.     就是由于这个,所以连对l ...

  10. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...