SVG 意为可缩放矢量图形(Scalable Vectors Graphics)。
 
SVG 图形在放大或者改变尺寸的情况下,其图形的质量不会有所损失。
 
SVG 使用 XML 格式定义图形。
 
SVG 文件是纯粹的 XML。
 
SVG 是万维网联盟的标准。
 
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
 
 
—————————————————————————
 
一个实例:
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

</svg>
 
将上面的代码保存为一个文件,文件后缀名为 .svg,这就表示它是一个 SVG 文件。
 
你可以在这里查看例子的效果(仅用于支持 SVG 的浏览器,现代浏览器也没有不支持 SVG 的了)
 
代码解释:
 
第 1 行代码包含了 XML 文件的声明。standalone 这个属性规定这个 SVG 文件是否是“独立的”,还是有引用外部文件。standalone="no" 意味着 SVG 文件不是独立的,会引用外部文件,在这里是 DTD 文件。
 
第 2 第 3 行引用了这个外部的 SVG DTD,这个 DTD 位于“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”,含有所有允许的 SVG 元素。
 
SVG 代码以 <svg> 开始,以 </svg> 结束,这是根元素。width 和 height 可以设置这个 SVG 文档的宽度和高度。version 属性定义所使用的 SVG 的版本,xmlns 属性定义 SVG 命名空间。
 
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义原点的 x 和 y 坐标(默认为0,0),r 属性定义圆的半径。
 
stroke 和 stroke-width 属性控制图形的轮廓该怎么显示。这里把圆形的轮廓设置为 2px 宽,黑边框。
 
fill 属性设置形状内的颜色,我们把颜色填充为红色。
 
关闭标签 </svg> 的作用是关闭 SVG 元素和文档本身。
 
注意:所有的开启标签必须有关闭标签。
 
 
—————————————————————————
 
除了可以绘制圆形,SVG 代码还可以绘制矩形椭圆线条多边形折线路径滤镜以及渐变效果
 
 
参考链接:
 
 
 
 
 
 

SVG 是什么?的更多相关文章

  1. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  2. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  3. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  4. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  5. HTML5_05之SVG扩展、地理定位、拖放

    1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg">  方法二:<body><svg></svg>&l ...

  6. HTML5_04之SVG绘图

    1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...

  7. 关于SVG的viewBox

    在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...

  8. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  9. Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

    stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...

  10. Notes:SVG(3)---滤镜和渐变

    SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...

随机推荐

  1. UML: 状态机图

    摘自http://www.umlonline.org/school/viewthread.php?tid=39 活动图将流程分解为一个一个的活动,通过活动的先后顺序来展示流程:而状态机图从某个物品的状 ...

  2. Android Studio更新升级方法(转)

    自从2013 Google I/O大会之后,笔者就将android ide开发工具从eclipse迁移到Android Studio了,android studio一直在更新完善,为了与时俱进,我们当 ...

  3. form文件上传,防止页面刷新

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>文件上传 ...

  4. java父类转子类的一个方法

    一般子类可以转父类.但父类转子类就会报cast error. 使用jsonobject 思想:先把父类转jsonstring 再把jsonstring转子类.剩余的子类值可以设定进去. import ...

  5. thinphp讲解(三)——空操作、空控制器、跨控制器、命名空间

    一.“空操作”本质意思:一个对象(控制器)调用本身不存在的操作方法 一般网站处于安全考虑不给用户提示任何错误信息 在tp里面控制器controller.class.php里有个_call()方法 所以 ...

  6. DIB位图文件的格式、读取、保存和显示(转载)

    一.位图文件结构 位图文件由三部分组成:文件头 + 位图信息 + 位图像素数据 1.位图文件头:BitMapFileHeader.位图文件头主要用于识别位图文件.以下是位图文件头结构的定义: type ...

  7. IE浏览器相关的问题及解决方案[转]

    seleniumquery和IE的司机 本网页是关于seleniumquery和IE(Internet Explorer)作为驱动/ WebDriver /浏览器. 首先,确保你检查internete ...

  8. 《HTML5高级程序设计》知识点概要(不涉及详细语法)

    不断更新. 说明:主要记录html5中的一些注意点或知识点,尽量不涉及具体语法信息. 一.CANVAS: 检测: try{ document.createElement("canvas&qu ...

  9. UIActionSheet和UIAlert

    UIActionSheet: 首先,在.h文件中添加Protocol,(Protocol相当于Java中的interface) @interface ActionSheetViewController ...

  10. 读 《JavaScript: The Good Parts》 有感

    提炼出一门语言或技术的 Good Parts, 使用该子集去构造健壮稳固的应用. 我们总是倾向于去学习和使用所有的语言特性,好像凡是新的,凡是提供了的, 就有必要去使用: 这本书告诉我们, 要有选择性 ...