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. MEMS陀螺仪(gyroscope)的结构

    MEMS陀螺仪(gyroscope)的设计和工作原理可能各种各样,但是公开的MEMS陀螺仪均采用振动物体传感角速度的概念.利用振动来诱导和探测科里奥利力而设计的MEMS陀螺仪没有旋转部件.不需要轴承, ...

  2. QTextEdit中选中文本修改字体与颜色，全部文本修改字体与颜色（设置调色板的前景色、背景色、文字颜色以及基色）

    ----我的生活,我的点点滴滴!! 当然以下内容都可以通过设置样式来达到目的,但是下面不使用这样的方法 先来看张图,理解此图基本就能实现上面所要达到的目的了 Widget::Widget(QWidge ...

  3. Inno Setup技巧[界面]添加和自定义左下角标签

    原文 http://blog.sina.com.cn/s/blog_5e3cc2f30100cc49.html 本文介绍添加和自定义“左下角标签”的方法. 界面预览: Setup技巧[界面]添加和自定 ...

  4. 《windows程序设计》学习_1：初识windows程序

    #include<windows.h> int WINAPI WinMain (HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR szC ...

  5. poj 1065 Wooden Sticks_贪心

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

  6. hdu4334 Trouble 合并集合可以降低复杂度阿啦啦

    我觉得这一题方法很好的,但是之前完全没有碰到过,也没有想到,这么简单直接降低复杂度的方法 先将两个集合合并成1个集合,合并两个(s1,s2),即每个集合里n^2个数,还剩一个n个数的集合 这样还剩超时 ...

  7. poj 3185 The Water Bowls（反转）

    Description The cows have a line of water bowls water bowls to be right-side-up and thus use their w ...

  8. paip.navicat form mysql导入文本文件时CPU占用100%的解决

    paip.navicat form  mysql导入文本文件时CPU占用100%的解决 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:h ...

  9. HDU 3081Marriage Match II（二分法+并检查集合+网络流量的最大流量）

    职务地址:http://acm.hdu.edu.cn/showproblem.php? pid=3081 有一段时间没写最大流的题了,这题建图竟然想了好长时间... 刚開始是按着终于的最大流即是做多轮 ...

  10. H264标准句法表中C的含义理解

    下面一段是H264官方中文版中给出的解释: “类别(在表中以C 表示)规定条带数据可以至多划分为三种条带数据类别.条带数据类别A 包含了类别2的所有语法元素.条带数据类别B 包含了类别3 的所有语法元 ...