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. div+css树形菜单

    自己做过的项目从来没有这种东西,但见过别人的项目都有,未免落伍,学来看看,也不知道自己找到的这个是不是正路子,先贴代码再分析. <!doctype html public "-//W3 ...

  2. JS常见操作

    //第一篇博文,希望大家多多支持 /***** BasePage.js 公共的 脚本文件 部分方法需引用jquery库 *****/ //#region 日期操作 //字符串转化为时间. functi ...

  3. gdal读写图像分块处理（精华版）

    一．gdal进行数据操作在安装好gdal后,即可调用gdal库中的函数.(需要包含的头文件:gdal_priv.h)1．打开数据集使用gdal库进行数据(影像)操作的第一步就是打开一个数据集.对于“数 ...

  4. Oracle误删表空间文件后数据库无法启动

    [问题描述]Oracle误删表空间文件后数据库无法启动,报错表空间文件不存在 [解决办法]sqlplus / as sysdba       #以dba身份登陆数据库shutdown immediat ...

  5. 几种MEMS陀螺仪（gyroscope）的设计和性能比较

    现在市场上的MEMS陀螺仪主要有SYSTRON.BOSCH和INVENSENSE设计和生产.前两者设计的陀螺仪属高端产品,主要用于汽车.后者的属低端产品,主要用于消费类电子,象任天堂的Wii.ADI2 ...

  6. 手动升级Delphi控件时，修改inc文件的办法

    以MustangPeakCommonLib.exe控件为例,想让它支持Delphi2010,就需要在D:\Program Files\Common Library\Mustangpeak\Common ...

  7. Zipper

      Zipper Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  8. Cocos2d-x 3.1.1 Lua演示样例 ActionEaseTest（动作）

    Cocos2d-x Lua演示样例 ActionEaseTest(动作)   本篇博客介绍Cocos2d-x中的动作,Cocos2d-x为我们提供了丰富的动作接口,以下笔者就具体介绍一下:   本系列 ...

  9. Matlab自己定义函数

    Matlab提供了强大的函数库供用户调用,但也支持用户自定义函数.本文使用了范德堡大学教授Akos Ledeczi授课中的样例来一步步说明怎样在Matlab中自定义函数. 首先,在command wi ...

  10. spring boot 中文文档

    https://qbgbook.gitbooks.io/spring-boot-reference-guide-zh/content/VII.%20Spring%20Boot%20CLI/index. ...