绘制 SVG

工具网址：http://svg123.com/

点击画布，在页面的右侧我们可以调整画布属性

点击属性，滚动滑轮可以微调 
或者直接双击修改属性值

工具栏

左侧工具栏

就像画图的工具栏一样

形状库

形状库有很多备选图形 

选择一个图形后 
左右键同时按可以再次选择图形

贝塞尔曲线

贝塞尔曲线绘制 
在画布中某点按住鼠标左键，该点就是绘制弧的起点 
然后在某点鼠标左键抬起， 松开的点就是贝塞尔曲线的控制点 
再次点击另一点，就是弧的终点

形状调整

点击你绘制的图形在右侧可以控制样式 
比如说画一个圆

可以调整它在画布的 (x,y)坐标、横纵半径、旋转角度、透明度、模糊度 
以及位置（左对齐、右对齐、居中…）还有边线属性

导出代码

画完之后我们可以点击上面菜单栏view中的source导出为代码 
或者直接Ctrl+U 
然后我们就可以将代码拷贝出来 
下面就是我用这个Method Draw工具绘制的一个叮当猫 
虽然很丑b(￣▽￣)d，但是完全可以实现 
（哦对了，补充一点，Ctrl+↑/↓ 可以调整图层深度，类似于z-index属性）

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" stroke="null" style="vector-effect: non-scaling-stroke;">
    <g stroke="null">
    <title stroke="null">background</title>
    <rect stroke="null" fill="#ffffff" />
    <g stroke="null" style="vector-effect: non-scaling-stroke;" display="none" overflow="visible" y="0" x="0" height="100%" width="100%" >
    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
    </g>
    </g>
    <g stroke="null">
    <title stroke="null">Layer 1</title>
    <rect stroke="#000" />
    <rect stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(40.294403076171875 369.72222900390625,238.4629669189453) " />
    <rect stroke="#ffffff" transform="rotate(21.50663948059082 199.36041259765628,217.56362915039057) " />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" />
    <ellipse stroke="#000" ry="100" rx="100" />
    <ellipse stroke="#000" ry="58" rx="83.5" />
    <ellipse stroke="#000" ry="52.5" rx="56" />
    <rect stroke="#000" rx="12" />
    <ellipse stroke="#000" ry="12" rx="12" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="3" rx="3" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <ellipse stroke="#000" ry="0.263158" />
    <ellipse stroke="#000" ry="25.526316" rx="21.052632" />
    <ellipse stroke="#000" ry="25.526316" rx="21.052632" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="5" rx="2.368416" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="5" rx="2.368416" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="8" rx="8" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="4" rx="3" />
    <path stroke="#000" />
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" />
    <path stroke="#000" />
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(-20 336.31579589843744,136.84210205078114) " stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(160 243.6842193603515,159.99999999999997) " stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(180 336.3157958984375,159.47369384765628) " stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <path stroke="#000" />
    <path stroke="#000" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" />
    <path stroke="#000" />
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" />
    <ellipse stroke="#000" ry="13.947368" rx="14.210527" />
    <ellipse stroke="#000" ry="13.947368" rx="14.210527" />
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="4.057779" />
    <ellipse stroke="#000" ry="9.736842" rx="39.736841" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="3.115795" />
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="3.767938" />
    <path stroke="#000" />
    <ellipse stroke="#000" ry="8.947368" rx="37.63158" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" />
    <rect stroke="#007fff" style="vector-effect: non-scaling-stroke;" />
    <rect stroke="#007fff" />
    </g>
</svg>

.