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. 【stm32】用TIM1产生6路ADC，用CCR4触发ADC1的注入通道采样

    这几天一直在使用STM32来写sensorless BLDC的驱动框架,那么必须会用到TIM1的CCR1/CCR2/CCR3产生的六路互补PWM,以及用CCR4来产生一个中断,用来在PWM-ON的时候 ...

  2. Oracle EBS-SQL (PO-16):检查采购订单完成情况统计.sql

    select         e.FULL_NAME                                                     采购员,         sum(plla ...

  3. MEMS陀螺仪—MEMS产品中的杀手

    MEMS陀螺仪(gyroscope)将成为MEMS产品的杀手.它已经被大量地应用在消费和汽车产品上.它的性能每两年提高十倍,它的成本却由于集成度和需求量的提高而不断下降.一旦MEMS陀螺仪的价格下降到 ...

  4. UVA 400 Unix ls by sixleaves

    题目其实很简单,答题意思就是从管道读取一组文件名,并且按照字典序排列,但是输入的时候按列先输出,再输出行.而且每一行最多60个字符.而每个文件名所占的宽度为最大文件名的长度加2,除了输出在最右边的文件 ...

  5. poj 3026 (最小生成树)

    题意:起点开始有超过100个人,总共不会超过100个外星人,问把所有的外星人都搜出来花的最小时间.一条路径上的时间跟人数是无关的,只跟路径长度有关. 思路:刚开始人都在起点,当派一定人数去最近的外星人 ...

  6. q.js实现nodejs顺序调用

    nodejs的异步调用有时候是最让人头疼的,如何能是一些代码顺序的执行呢,这里和大家分享nodejs的promise 什么是promise promise一个标准,它描述了异步调用的返回结果,包括正确 ...

  7. Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)

    在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...

  8. Debug编辑通过转Release找不到命名空间

    首先查看缺少命名空间在哪个项目中 然后看缺少命名空间项目中bin/Release有没有相关文件 如果没有对该项目进行Release编译然后在编译所有项目

  9. 学习ios设计（1）

    两年前,苹果为现代的使用者完全改变了设计语言.对于设计者来说,这使得他们更容易关注动画和功能而不是其他的细枝末节. 我已经被问过很多次怎样开始设计或者是有什么捷径可以成为更好的设计师.虽然没有银弹,然 ...

  10. 5.7 cm server-agent 会出现无法启动

    异常信息如下: 离线安装cloudera-scm-agent5.7的Unable to create the pidfile问题 在离线安装Cloudera Manager启动agent出现了如下异常 ...