SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
现在开始学习 SVG! 
<html>

<body>

<h1>My first SVG</h1>

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

  <circle cx="100" cy="50" r="40" stroke="black"

  stroke-width="2" fill="red" />

</svg>

</body>

</html>

SVG 实例


我们可以在线编辑 SVG 实例，并且在线查看运行结果!


在线实例


SVG 参考手册


在 W3CSchool中， 我们为您提供完整的 SVG 参考手册，其中列出了所有 W3C 推荐标准（SVG Version 1.1）中的 SVG 的元素。


SVG 参考手册

更多SVG教程：http://www.w3cschool.cc/svg/svg-tutorial.html

SVG 教程的更多相关文章

  1. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

  2. [翻译svg教程]Path元素 svg中最神奇的元素！

    先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...

  3. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  4. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  5. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  6. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  7. svg教程

    实例 <html> <body> <h1>My first SVG</h1> <svg style="border: 1px solid ...

  8. 非常不错的svg教程

    介绍的非常详细,也很有调理,内容很详细 适合于初学者学习 http://www.softwhy.com/qiduan/SVG_source/

  9. SVG坐标系统

    SVG的画布.画布视区(viewBox).浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域,理论上在所有维度上都是无限的.(也有人称为"SVG世界",但我觉得叫画布比较合适) ...

随机推荐

  1. 什麼是 N-key 與按鍵衝突？原理說明、改善技術、選購注意完全解析

    不管是文書處理或遊戲中,我們都經常會使用到組合鍵,也就是多顆按鍵一起按下,執行某些特定的功能.有時候你可能會發現,明明只按下2顆鍵,再按下第3顆鍵時訊號卻沒有輸出.要是打報告到一半遇到這種狀況還好,如 ...

  2. poj 1065 Wooden Sticks_贪心

    题意:将木棍放在机器里处理,第一根需要一分钟,剩余的如果大于等于前边放入的长度和重量,就不用费时间,否则需要一分钟,计算给出一组数的最少时间. 思路:先按长度排序,相同在比较重量,然后按顺序比较得出结 ...

  3. Oracle password expire notices

    /usr/local/webserver/tomcat6/logs/logbak/zsxxw.log.2015-03-21.txt:2015-03-22 00:47:26,366 ORA-28002: ...

  4. 构造函时和this指针

    通常this指针在对象构造完毕后才完全生成,而在构造函数执行过程中,对象还没有完全生成,所以this指针也是没有完全生成的,在构造函数中使用this指针会存在问题,应该尽量避免. 构造函数中可以访问对 ...

  5. Sequence one(hdu2610dfs+去重)

    题目:有一个数列N,和一个数字k,输出该数列的前k个子序列,如果k大于N的所有子序列,输出所有符合要求的序列,序列要求不能是递减序列 比如: 3 5 1 3 2 的前五个序列为 1 3 2 1 3 1 ...

  6. 基于HTML5多图片Ajax上传可预览

    html5多图控件<input id="fileImage" type="file" size="30" name="fil ...

  7. android Handler更新UI

    android中经常需要更新界面某个元素的值,但是在主线程中是不可以直接更新主线程的值.这里推荐通过handler机制来更新值. 一Handler的定义: 主要接受子线程发送的数据, 并用此数据配合主 ...

  8. c#操作sqlite

    一.添加选中dll引用如下图 二.下载一个sqlite建表建库工具sqlitedatabasebrowser如下图 三.使用sqlitedatabasebrowser建库建表 四.插入表数据如下图 四 ...

  9. Spring事务传播机制详解

    1 事务的传播属性(Propagation) 1) REQUIRED ,这个是默认的属性 Support a current transaction, create a new one if none ...

  10. hbase importtsv

    hadoop jar hbase-server-0.98.1-cdh5.1.3.jar importtsv -Dimporttsv.columns=HBASE_ROW_KEY,cf:imsi,cf:i ...