SVG(Scalable Vector Graphics):可缩放矢量图形，一种二维图形表示语言。
借助SVG，我们可以实现很多同Canvas API类型的绘制操作，但在Canvas元素上绘制文本的时候，字符会以像素的方式固定到上面。文本成为了图像的一部分，除非重新绘制Canvas绘制区域，否则无法改变文本内容。正因为如此，Canvas上面的文本无法被搜索引擎获取，而SVG上的文本却是可搜索的。例如，Google会对Web上的SVG内容中的文本进行索引。
在页面中添加SVG
内联方式：像HTML中的其它元素一样使用，在此基础上可以编写HTML，JavaScript和SVG的交互应用。
<body> <svg width="200" height="200"> </svg> </body>
外联方式：通过<img>元素，在HTML导入外部SVG文件，缺点是无法编写与SVG元素进行交互的脚本。
<img src="example.svg" />
简单的形状
SVG包含了基本的形状元素，如矩形、圆形和椭圆。形状元素的尺寸和位置被定义成了属性。矩形的属性有width和height。圆形有一个表示半径的r属性。它们都应用CSS语法表示距离，因此单位包括了px 、point 、em等。
矩形：x="50" y="20"表示矩形的起点为(50,20)
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> </svg> </body>
SVG绘制开关对象是按对象文档中出现的顺序进行的。如果我们在画完矩形之后再画圆，那么圆形会显示在矩形之上。
增加一个圆形：
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body>
变换SVG元素
SVG中可以将多个元素结合起来，使它们形成一个组，变为一个整体。
<g>元素代表“组”，可以用来结合多个相关的元素。组内成员可以由通过ID来引用。些外，组也可以作为一个整体进行变换。如果你为组添加了变换属性，那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。
<svg width="200" height="200"> <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </svg>
复用内容
SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。借助这两个元素，你可以多次复用同一内容，消除冗余。
<svg width="200" height="200"> <defs> <g id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </defs> <use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.4)"></use> <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.75)"></use> <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"></use> </svg>
图案和渐变
<defs> <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" /> </pattern> <%--渐变--%> <linearGradient id="RedBlackGradient"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <rect x="0" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" /> <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" /> </svg>
路径
SVG不公包含简单的形状，还包含自由形态的路径。path元素有一个d属性，代表路径数据。在d的值中，M代表移至(Move to)，L代表划线至(Line to),Q代表二次曲线，Z代表闭合路径。
<svg width="200" height="200"> <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z" /> </svg>
文本
SVG中文本有点类型于CSS中对于样式的定义
<svg width="200" height="200"> <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f" font-size="40px" font-weight="bold">Hello SVG</text> </svg>
相关推荐
在“HTML5程序设计（第二版）”中，SVG（可缩放矢量图形）和Drag API（拖放功能）是两个重要的章节，这里我们将深入探讨这两个知识点。 **SVG** 是一种基于XML的图形语言，用于创建清晰、可缩放的二维图形。SVG图形...
综上所述，HTML5程序设计是一门重要的Web开发技术，对于希望掌握现代Web技术栈的开发者而言，了解并熟练运用HTML5是必须的。通过阅读相关书籍和资源，开发者可以掌握HTML5的核心概念和开发实践，从而在Web开发领域...
首先，HTML5是下一代超文本标记语言，它增强了网页的多媒体能力，提供了更好的数据和应用程序接口。HTML5的新特性包括离线存储（离线Web应用）、拖放功能、媒体元素（音频和视频）、 canvas画布、svg矢量图等。在这...
这两本PDF书籍，"HTML5高级程序设计"和"深入HTML5应用开发"，将为读者提供全面且深入的HTML5知识。 "HTML5高级程序设计"可能会涵盖以下主题： 1. **HTML5新特性**：包括新的语义化标签（如、、等）、离线存储...
HTML5是一种先进的网页开发技术，它极大地扩展了Web应用程序的功能，使得开发者能够创建更富交互性和动态性的网页。SVG（Scalable Vector Graphics）是HTML5中的一个关键特性，它是一种用于绘制矢量图形的标准，支持...
HTML5程序设计是现代网页开发的核心技术之一，它在2000年代初开始发展，旨在改进和标准化网络内容的结构、交互性和呈现方式。HTML5的诞生是为了解决HTML4的一些局限性，比如多媒体支持不足、结构化元素缺乏以及...
《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化，同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容，并对部分内容进行了更新。...
HTML5是一种先进的网页开发技术，它为网页设计者提供了丰富的功能和交互性，极大地扩展了Web应用程序的可能性。SVG，全称Scalable Vector Graphics，是一种用于创建矢量图形的标记语言，非常适合在网页上创建清晰、...
"HTML5高级程序设计（完整版）"这本书深入探讨了这个主题，旨在帮助开发者掌握HTML5的高级特性和实践技巧。 1. **新元素和语义化**：HTML5引入了许多新的结构元素，如、、、等，提高了文档的语义性，使内容更加易于...
根据提供的信息，《HTML5程序设计（第2版）》是一本深入探讨HTML5技术的书籍，共计293页。本书旨在为读者提供全面而深入的HTML5编程知识，帮助学习者掌握最新的Web开发技术。下面将从HTML5的基础概念、核心特性、...
尽管每个章节的具体内容没有详尽列出，但可以看出，这个HTML5程序设计基础教程全面覆盖了HTML5的关键特性，包括结构、表单、媒体、离线存储、图形处理、多线程和位置服务等方面，是初学者入门和进阶的宝贵资源。...
HTML5程序设计基础教程主要涵盖了HTML5的基本概念、新特性以及JavaScript编程和表单处理等内容。以下是这些知识点的详细说明： 1. HTML5概述： - HTML5是超文本标记语言的第五个版本，增加了许多新的元素和API，...
HTML5 SVG混合图标动画特效插件，如"Hybicon"，是现代Web设计中一个创新的技术应用。SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它支持交互性和动态效果，适用于创建高质量、可缩放的图形。Rapha...
HTML5是一种先进的网页开发技术，它极大地扩展了Web应用程序的功能，使得开发者能够创建更富交互性和动态性的网页。SVG（Scalable Vector Graphics）是HTML5中的一个关键元素，它支持矢量图形，这意味着无论放大多少...
在这个"HTML5程序设计第二版源码"中，我们可以深入学习和研究HTML5的多个关键特性，包括Canvas、Web Workers、Web Storage、表单处理、Drag and Drop、WebSocket、SVG以及Geolocation等。下面将对这些特性进行详细...
"HTML5高级程序设计（源码）"与《Pro HTML5 Programming》这本书紧密相关，旨在帮助开发者深入理解HTML5的各项特性，并通过实践源码来提升编程技巧。 首先，HTML5在结构上进行了改进，引入了新的元素如、、和，这些...
本教程的"HTML5程序设计基础"将带你深入理解这一强大的技术。 一、HTML5的新特性 1. **语义化标签**：HTML5引入了如, , , , 等语义化标签，这些标签使页面结构更加清晰，有助于搜索引擎优化（SEO）和无障碍访问。 ...
本资源"html5高级程序设计完整源代码"是一份配合HTML5高级程序设计书籍的实践材料，旨在帮助读者深入理解和应用HTML5的各项技术。 源代码通常包括各种示例、练习和项目，这些内容覆盖了HTML5的基本元素、语义化标签...