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. spark使用Hive表操作

    spark Hive表操作 之前很长一段时间是通过hiveServer操作Hive表的,一旦hiveServer宕掉就无法进行操作. 比如说一个修改表分区的操作 一.使用HiveServer的方式 v ...

  2. linux与windows的文本文件之间的转换

    在CentOS中需要安装一个软件包:tofrodos 包里包含的命令可以用包管理工具列出包里的文件. 以 CentOS 的 rpm 为例: rpm -ql tofrodos 在ArchLinux中需要 ...

  3. url传参

    1.两种url形式传参index.php/action/function/id/2   这种模式下:$_GET[action]就是function,$_GET[id]就是2

  4. Ceph的客户端丢失文件夹的解决办法

    原来的解决办法 更新linux内核,使用linux内核级的mount方式,一段时间后将会在客户端看不到部分长期不使用的文件夹 更正后的解决办法 参考Ceph的客户端安装设置ceph-fuse方式挂载c ...

  5. python随机数的使用记录

    一.random模块简介 Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等. 二.random模块重要函数 1 ).ra ...

  6. autohotkey-【GUI】Switch between Windows of the Same Application

    下面给出了ahk的脚本,但我需要GUI http://superuser.com/questions/435602/shortcut-in-windows-7-to-switch-between-sa ...

  7. xx

    [git]merge和rebase的区别 - 削微寒 - 博客园 http://www.cnblogs.com/vamei/p/3480994.html 协议森林16 小美的桌号(DHCP协议) - ...

  8. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  9. THE HANDLER_READ_* STATUS VARIABLES

    Because I do a lot of Performance Tuning gigs I get often in contact with these status variables. In ...

  10. 【python cookbook】【字符串与文本】5.查找和替换文本

    问题:对字符串中的文本做查找和替换 解决方案: 1.对于简单模式:str.replace(old, new[, max]) 2.复杂模式:使用re模块中的re.sub(匹配的模式, newstring ...