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. 解决function.bind()方法

    这个 bind 方法只有在 ie10 版本的浏览器才得到原生支持,低于该版本的浏览器下执行时会得到一个 undefined 的错误提示. 于是只好再次上网 google 解决方案,功夫不负有心人,我们 ...

  2. NFC扫描

    目录(?)[-] 简介 什么是NFC 标签和读取器 标签 读取器 NFC模式 通信模式 主动模式 被动模式 操作模式 读写 点对点 模拟卡片 NFC用例 用于启动服务 用于分享 用于连接设备 用于买票 ...

  3. 一篇memcache基础教程

    Memcache是什么Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力.它可以应对任 ...

  4. sqlprofiler 常用调试方法

  5. web开发(Java&Jquery)实现验证码

    1. Ajax Fancy Capcha 一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制. ​ from : http://www.webdesignbe ...

  6. 解决未能启动服务“VMware Authorization Service”

    计算机-管理-服务--服务列表找到VMware Authorization Service 并双击 打开服务.

  7. VS2012 黑色护眼主题

    在黑色主题基础上,更改了字体 Ms Comic Sans 字号也增大了 附件中有两个 一个是原版主题下载自https://studiostyl.es/ 第二个是如下改完后的主题 vssettings. ...

  8. C#面向对象 基础概念25个

    1.静态成员和非静态成员的区别?2.const 和 static readonly 区别?3.extern 是什么意思?4.abstract 是什么意思?5.internal 修饰符起什么作用?6.s ...

  9. HTML2列表表单框架

    HTML——Hyper Text Markup Language <html>,<head>,<body> 一.基本标签: (一)格式标签:——模型:word工具栏 ...

  10. Sql Server数据库基础

    --------------------------------------第一章  Sql Server数据库基础------------------------------------------ ...