`
sungang_1120
  • 浏览: 323697 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

HTML5学习之——HTML5 内联 SVG

阅读更多

 

HTML5 支持内联 SVG。

 

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

分享到:
评论

相关推荐

    HTML5 SVG变色龙动画代码

    本主题聚焦于一个具体的实例——“HTML5 SVG变色龙动画代码”,这是一个利用SVG实现的变色龙变色动画,其中包含了眼珠跟随鼠标的交互功能。 首先,SVG是一种基于XML的标记语言,用于描述二维图形和图像。由于其矢量...

    HTML SVG绘图.zip_zip压缩包

    5. **新建文件夹**:这可能包含了一些示例项目或资源,帮助学习者实践SVG的应用。 综上所述,HTML5 SVG绘图是一个强大且灵活的工具,适用于创建高质量的网页图形和动画。配合JavaScript库和API,可以构建出丰富的...

    HTML5示例——数百个示例及源代码

    4. **SVG矢量图**:SVG是一种可缩放的矢量图形格式,HTML5支持内联SVG,可以在网页中直接嵌入高质量、可缩放的图像。 5. **离线存储**:`Application Cache`(或称为离线存储)允许网站在用户离线时也能访问部分...

    HTML5学习笔记(总结提炼版)——001

    4. SVG矢量图:支持内联SVG,可以创建高质量、可缩放的图形,且文件大小相对较小。 5. 存储机制:Web Storage(包括localStorage和sessionStorage)提供了本地存储数据的能力,增强了离线应用的功能。 6. 表单控制...

    HTML5及CSS3web前端开发技术习题答案解析.pdf

    ### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比,在Web前端开发领域解决了多个关键问题,主要包括: - **浏览器间的兼容性问题**:早期不同浏览器...

    html5使用svg绘制的笑脸动画特效源码.zip

    HTML5是一种强大的网页开发技术,它为网页开发者提供了丰富的功能和接口,其中之一就是SVG(Scalable Vector Graphics)——可缩放矢量图形。SVG是一种基于XML的图像格式,允许在网页上创建和显示复杂的矢量图形。在...

    html5课程设计

    HTML5可以直接内联插入SVG代码或引用SVG文件。 5. **离线存储**:通过`<html>`标签的`manifest`属性,可以指定一个缓存清单文件,允许网页在离线状态下仍能访问部分资源,提高用户体验。 6. **表单控制增强**:...

    Web前端开发案例教程(HTML5+CSS3)(微课版)_PPT课件.zip

    通过这个微课版的PPT课件,学习者不仅可以深入理解HTML5和CSS3的基础知识,还能通过实例掌握实际开发中的技巧和最佳实践,从而成为一名出色的Web前端开发者。这份教学资料是自学或课堂教学的理想资源,帮助学习者...

    HTML5+SVG turbulence实现的水中月(水面倒影)动画特效源码.zip

    这个画布可以定义为一个矩形,然后通过CSS或内联SVG样式进行填充和边框设置,模拟出水的背景。为了增加真实感,可以使用渐变色或者噪点效果来模拟水面的波动。 接下来,我们要创建月亮的SVG形状。这通常是一个圆形...

    网页设计必备——html初级教程

    这个"网页设计必备——html初级教程"包含两个CHM文件:HTML入门与提高.CHM和HTML基础教程.chm,它们将帮助初学者理解并掌握HTML的基本概念和语法。 HTML入门与提高.CHM可能涵盖以下内容: 1. HTML简介:解释HTML的...

    HTML5+GSAP+SVG实现的胶囊掰开倾倒粒子动画效果源码.zip

    在本项目"HTML5+GSAP+SVG实现的胶囊掰开倾倒粒子动画效果源码"中,我们可以看到HTML5与两个重要的JavaScript库——GSAP(GreenSock Animation Platform)和SVG(Scalable Vector Graphics)的巧妙结合,创造出一种...

    HTML5基础知识 入门知识学习文档

    HTML5引入内联SVG,使得网页可以直接嵌入矢量图形,提高了图形质量,尤其在高分辨率屏幕上的表现更佳。 5. 视频和音频支持:HTML5引入了和元素,使得在浏览器中直接播放多媒体内容成为可能,不再依赖Flash等插件。...

    html5自学资料

    5. **Web Storage**:HTML5提供了两种本地存储机制——localStorage和sessionStorage,用于替代传统的cookie,提供更大容量的数据存储。 6. **Web Workers**:这是一个后台线程机制,允许在后台执行复杂的计算或...

    有意思的HTML5 圆形钢琴,演奏出动人乐章.rar

    这个项目对于学习HTML5、CSS3和SVG的开发者来说具有很高的参考价值,不仅可以提升他们的技能,还能激发他们在网页设计上的创新思维。同时,对于音乐爱好者来说,这是一个有趣的实践平台,可以通过虚拟钢琴体验音乐的...

    svg显示和点击.zip

    在"svgimg"文件中,可能是一个指向SVG图像的链接,或者是一个包含内联SVG代码的`<img>`标签。在HTML中,可以使用`<img src="...">`来引用外部SVG文件,或者使用`<object data="...">`或`<embed src="...">`标签将SVG...

    前端开发权威指南——融合html javascript css php .doc

    HTML5是其最新版本,引入了诸多新特性,如离线存储、音频/视频处理、Canvas画布、SVG矢量图、Web Workers和Web Storage等,极大地丰富了网页的交互性和功能。 2.1 HTML HTML用于定义网页的结构,通过各种标签来表示...

    网页模板——纯CSS3+SVG实现仙人掌(仙人球)的爱情动画效果源码.zip

    SVG也支持内联样式和JavaScript交互,使得图形能够响应用户操作或者随着时间改变状态。 在这个项目中,SVG被用来绘制仙人掌和爱心的形状。通过调整SVG路径数据,可以改变这些形状的外观。同时,CSS3的动画可以应用...

    花瓣网html 静态项目可做HTML课程设计

    - **SVG矢量图**:支持内联SVG,用于创建高质量的图形,且大小不会因缩放而失真。 3. **静态网页设计** - **布局**:在静态网页中,布局通常通过CSS来控制,如使用`display`属性实现流式布局、网格布局或盒模型...

    1015_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    总的来说,这个压缩包提供的资源对于想要快速搭建手机和电脑通用的网站,或是学习HTML5、CSS和JavaScript的初学者来说非常有价值。通过理解并修改这些源码,开发者能够提升自己的技能,同时也能节省大量的设计和编码...

    css2参考手册——已编译过的html帮助文件

    **CSS2参考手册——已编译过的HTML帮助文件** CSS,全称Cascading Style Sheets,中文名为层叠样式表,是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的Web标准。它使得内容与表现分离,让网页...

Global site tag (gtag.js) - Google Analytics