SVG

#第六届英特尔杯全国大学生软件创新大赛博客征集#

SVG

 

概述


¦栅格图形与矢量图形
栅格图形
图像由一组二维像素网格表示。
1、例如HTML5中的canvas 2D API 就是栅格图形,canvas API 绘制图形的本质就是更新canvas的像素。
2、PNG和JPEG都是栅格图形的格式,其图形中的数据代表着像素。
矢量图形
图像由数学描述的几何形状表示。
SVG就是矢量图形的一种,其同HTML一样,是一种文件格式,有自己的API。

 

¦HTML与SVG
1、SVG的本质特征是基于XML,而HTML有别于XML,所以不能简单的把XML语法嵌入到HTML中。
2、在HTML5之前,在HTML上的<img>标签中嵌入SVG或者到外部的SVG文档。在HTML5出现之后,HTML5中引入了SVG,SVG可以出现在HTML标记中。下面我会讲解HTML与SVG的结合。
3、在浏览器开发工具中可以查看和编辑SVG结构,内联的SVG直接嵌入到HTML DOM中,可以修改其结构,并深入SVG查看源码,而不像图片那样,只能看到网格结构的像素值。

SVG VS Canvas


SVG
SVG 是一种使用 XML 描述 2D 图形的语言。每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
Canvas
Canvas 是逐像素进行渲染的。一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

HTML5中使用SVG


¦简单示例

<!DOCTYPE html>
<html>
<body>
//用<svg>标记嵌入SVG代码
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle  cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="orange" />
</svg>
</body>
</html>

其效果图为:
 

¦SVG基础知识
 
line
创建一条简单的线。
polyline
定义由多个线定义构成的形状。
rect
创建一个矩形。
circle
创建一个圆形。
ellipse
创建一个椭圆。
polygon
创建一个多边形。
path
支持任意路径的定义。
 
例如创建一个楼梯
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
   <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
         style="fill:white;stroke:red;stroke-width:4"/>
</svg>
效果图:
 

要创建一个多直线图形,可以使用 points 属性并定义由逗号分隔的 x 和 y 坐标对。在本例中,第一个点定义为 0,40,其中 0 是 x 值,40 是 y 值。但是,单独一组点无法在屏幕上显示任何东西,因为这仅告诉 SVG 渲染器从何处开始。在最低限度上,您需要两组点:一个开始点和一个结束点(例如 points="0,40 40,40”)。
使用 path 元素(所有绘图元素中最复杂的),可以使用一组专门的命令创建任意图形。
命令
描述
M
移动到
L
连线到
H
水平连线到
V
垂直连线到
C
使用曲线连接到
S
使用平滑曲线连接到
Q
使用二次贝塞尔曲线连接到
T
使用平滑的二次贝塞尔曲线连接到
A
使用椭圆曲线连接到
Z
将路径封闭到
创建一个自定义图形:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <path d="M200,200 h-150 a150,150 0 1,0 150,-150 z"
                fill="orange" stroke="black" stroke-width="5"/>
      
</svg>

效果图为:
 

作者


¦学校:北京航天航空大学
¦姓名:彭伟
¦E-mail:786800158@qq.com
¦新浪微博:Way-彭伟      http://weibo.com/pengway
¦微信号:w786800158

 

附件大小
Image icon svg01.jpg10.26 KB
Image icon svg02.jpg3.04 KB
Image icon svg03.jpg2.43 KB
Image icon svg04.jpg10.72 KB
有关编译器优化的更完整信息,请参阅优化通知

1 条评论

顶部
Maplewing的头像

想起我有一門課的老師超愛svg,
論文也都在做跟svg相關的研究比較多。
不過覺得svg用於向量圖形的表示真的很方便,
現在又知道能夠直接嵌入進HTML內感覺又更方便,
之後來在網頁內嵌入幾張svg看看好了XD

添加评论

有一个技术问题? 访问我们的论坛网站或软件产品有问题? 联系支持部门.