了解什么是SVG并使用SVG绘制圆，椭圆，矩形

一、了解SVG概念

SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图

HTML5支持内联SVG

HTML<svg>元素是图形的容器

SVG有多种绘制路径，框，圆，文本和图像的方法。

1、什么是SVG

• SVG是指可伸缩的矢量图形 （Scalable Vector Graphics）
• SVG用于定义网络的基于矢量的图形
• SVG使用XML格式定义图形
• SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG是万维网联盟的标准

2、SVG优势

与其它图像格式想比（比如JPEG和GIF），使用SVG的优势在于：

• SVG图像可通过文本编辑器来创建和修改
• SVG图像可被搜索、索引、脚本化或压缩
• SVG是可伸缩的
• SVG图像可在任何的分辨率下被高质量的打印
• SVG可在图像质量不降的情况下被放大

二、使用SVG绘制图形

1.使用SVG绘制圆形

• cx/cy：圆绘制的位置，圆心位置
• r ：圆的半径

 绘制以下圆：

<svg width="500" height="500">
    
    <circle cx="150" cy="200" r="50"></circle>

</svg>

2.使用SVG绘制椭圆

• cx/cy：椭圆绘制的位置，圆心的位置
• rx/ry： 椭圆的圆的半径

绘制如下的椭圆： 

 <svg width="5000" height="5000">
    
        <ellipse cx="200" cy="200" rx="100" ry="50"></ellipse>
      
    </svg>

 3、使用SVG绘制矩形

        使用rect标签，主要属性：

• x/y：绘制位置
• width/height：矩形长度和高度
• fill：填充颜色，默认黑色
• storke：描边的颜色
• storke-width：，描边的宽度
• rx/ry圆角：以10为半径画圆

如下绘制的圆角矩形：

    <svg width="500" height="500">

        <rect x="100" y="100" width="150" height="100" fill="#f00" stroke="#0f0" stroke-width="2" rx="10"></rect>
      
    </svg>