工具网址：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" id="canvas_background" height="402" width="582" y="-1" x="-1"/>

    <g stroke="null" style="vector-effect: non-scaling-stroke;" display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">

    <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" id="svg_80" height="110" width="132.222222" y="215.410635" x="221.944444" stroke-width="1.5" fill="#007fff"/>

    <rect stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(40.294403076171875 369.72222900390625,238.4629669189453) " id="svg_81" height="18.333333" width="67.777778" y="229.296298" x="335.833332" stroke-opacity="null" stroke-width="0" fill="#007fff"/>

    <rect stroke="#ffffff" transform="rotate(21.50663948059082 199.36041259765628,217.56362915039057) " id="svg_78" height="19.601491" width="66.223528" y="207.762876" x="166.248638" stroke-opacity="null" stroke-width="0" fill="#007fff"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" id="svg_32" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" id="svg_36" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" id="svg_38" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" ry="100" rx="100" id="svg_13" cy="137.631583" cx="290.000002" stroke-opacity="null" stroke-width="1.5" fill="#007fff"/>

    <ellipse stroke="#000" ry="58" rx="83.5" id="svg_2" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" ry="52.5" rx="56" id="svg_4" cy="249.055556" cx="289.99999" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <rect stroke="#000" rx="12" id="svg_3" height="19" width="158" y="196" x="211" stroke-width="1.5" fill="#ff0000"/>

    <ellipse stroke="#000" ry="12" rx="12" id="svg_6" cy="216.368421" cx="289.99999" stroke-width="1.5" fill="#bfbf00"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_8" y2="210.52632" x2="300.263148" y1="210.52632" x1="279.736832" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_10" y2="213.157899" x2="301.578943" y1="213.157899" x1="278.421048" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="3" rx="3" id="svg_11" cy="222.368425" cx="289.999986" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_12" y2="227.894741" x2="289.999995" y1="224.21053" x1="289.999995" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <ellipse stroke="#000" ry="0.263158" id="svg_14" cy="177.631583" cx="289.999998" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" ry="25.526316" rx="21.052632" id="svg_17" cy="100" cx="268" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" ry="25.526316" rx="21.052632" id="svg_16" cy="100" cx="312" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="5" rx="2.368416" id="svg_19" cy="110.789478" cx="275" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="5" rx="2.368416" id="svg_18" cy="111.315794" cx="305" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="8" rx="8" id="svg_20" cy="123.684215" cx="290" stroke-opacity="null" stroke-width="1.5" fill="#ff0000"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="4" rx="3" id="svg_22" cy="122" cx="292.894737" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#ffffff"/>

    <path stroke="#000" id="svg_24" d="m43.947368,172.105267" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_27" y2="181.578951" x2="290.263158" y1="132.105267" x1="289.736842" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <path stroke="#000" id="svg_29" d="m241.842104,166.842109c0,0 38.421053,30 96.315789,-0.526316" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_30" y2="179.473688" x2="289.999986" y1="131.578951" x1="289.999986" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_33" y2="148.421057" x2="266.578947" y1="147.894741" x1="219.736842" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_31" y2="148.947372" x2="359.736845" y1="148.421057" x1="312.89474" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_40" y2="131.578951" x2="219.210526" y1="141.052636" x1="267.105263" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(-20 336.31579589843744,136.84210205078114) " stroke-linecap="null" stroke-linejoin="null" id="svg_39" y2="132.105267" x2="312.368421" y1="141.578951" x1="360.263158" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(160 243.6842193603515,159.99999999999997) " stroke-linecap="null" stroke-linejoin="null" id="svg_37" y2="155.263162" x2="219.736842" y1="164.736846" x1="267.631579" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(180 336.3157958984375,159.47369384765628) " stroke-linecap="null" stroke-linejoin="null" id="svg_34" y2="154.736845" x2="312.368423" y1="164.21053" x1="360.26316" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_44" y2="254.21053" x2="321.578947" y1="254.21053" x1="258.421053" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <path stroke="#000" id="svg_46" d="m259.736842,254.736846c0,0 28.421053,67.894737 61.052632,0" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <path stroke="#000" id="svg_48" d="m-144.27,87.983953l0.745,0l0,0c0.411452,0 0.745,0.333548 0.745,0.745c0,0.411452 -0.333548,0.745 -0.745,0.745l-0.745,0l0,-1.49z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_54" y2="320.52632" x2="354.999997" y1="228.421057" x1="354.473681" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_56" y2="321.578951" x2="221.842105" y1="229.473688" x1="221.315789" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_51" y2="200.52632" x2="182.894737" y1="214.21053" x1="218.684211" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <path stroke="#000" id="svg_68" d="m279.210526,325.789478" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_61" y2="237.41893" x2="222.405638" y1="218.918133" x1="176.052632" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <ellipse stroke="#000" ry="13.947368" rx="14.210527" id="svg_50" cy="206.578952" cx="170.263158" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" ry="13.947368" rx="14.210527" id="svg_49" cy="260.789476" cx="398.157889" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_57" y2="237.339185" x2="354.473684" y1="262.602343" x1="383.825092" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_58" y2="214.736846" x2="356.578947" y1="246.921852" x1="394.877725" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="4.057779" id="svg_97" cy="324.912246" cx="282.740307" stroke-opacity="null" stroke-width="0" fill="#007fff"/>

    <ellipse stroke="#000" ry="9.736842" rx="39.736841" id="svg_60" cy="329.210529" cx="242.105264" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="3.115795" id="svg_98" cy="324.477484" cx="297.304839" stroke-opacity="null" stroke-width="0" fill="#007fff"/>

    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="3.767938" id="svg_96" cy="325.202088" cx="296.652693" stroke-opacity="null" stroke-width="0" fill="#007fff"/>

    <path stroke="#000" id="svg_69" d="m281.434033,328.093029c9.473684,-6.315789 16.842105,0 16.842105,0" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>

    <ellipse stroke="#000" ry="8.947368" rx="37.63158" id="svg_59" cy="328.421056" cx="335.789469" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_100" y2="229.628863" x2="221.777045" y1="238.221427" x1="221.925192" stroke-opacity="null" fill="none"/>

    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_99" y2="228.888124" x2="353.776602" y1="237.480688" x1="353.92475" stroke-opacity="null" fill="none"/>

    <rect stroke="#007fff" style="vector-effect: non-scaling-stroke;" id="svg_102" height="8.686868" width="20" y="215.757575" x="220" stroke-width="0" fill="#007fff"/>

    <rect stroke="#007fff" id="svg_101" height="8.888888" width="15.959595" y="215.757575" x="340.000006" stroke-width="0" fill="#007fff"/>

    </g>

</svg>

.

绘制 SVG的更多相关文章

  1. 绘制SVG内容到Canvas的HTML5应用

    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

  2. FireFox下Canvas使用图像合成绘制SVG的Bug

    本文适合适合对canvas绘制.图形学.前端可视化感兴趣的读者阅读. 楔子 所有的事情都会有一个起因.最近产品上需要做一个这样的功能:给一些图形进行染色处理.想想这还不是顺手拈来的事情,早就研究过图形 ...

  3. 使用svgdeveloper 和 svg-edit 绘制svg地图

    目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一.SVGDeveloper 5. 方法二.SVG-Edit 1. 描述编辑   有的时候我们需要自定义地图,本文提 ...

  4. WebKit策略：<foreignObject>可用于绘制svg中的html标签，但与<use>搭配不生效

    在<svg>里面可以利用<foreignObject>绘制html标签,原本是我在iconfont采用Font class方式引入svg的无奈之举. 起初的设计是所有icon先 ...

  5. D3——绘制SVG图形-直方图

    1.创建SVG元素 var svg = d3.select("body").append("svg"); 2.为SVG元素设置属性 svg.attr() .at ...

  6. 使用Batik绘制SVG图并保存为png图像格式

    SVG(Scalable Vector Graph)--可缩放矢量图形. 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描写叙述二维矢量图形的一种图形格式.它由万维网联盟制定.是一 ...

  7. d3 根据数据绘制svg

    , , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...

  8. svg矢量图绘制以及转换为Android可用的VectorDrawable资源

    项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) 由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Gr ...

  9. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

随机推荐

  1. ORM-学生信息系统

    学生信息管理 展示学生信息 URL部分 url(r'^student_list/', app01_views.student_list, name="student_list"), ...

  2. hdu 1410(直线与矩形相交)

    Intersection Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 13528   Accepted: 3521 Des ...

  3. SVN的配置和使用

    1.安装前必备 获取 Subversion 服务器程序 到官方网站 http://subversion.tigris.org/    我下的是CollabNetSubversion-server-1. ...

  4. ubuntu 18.04下编译最新版本的KMS

    KMS:kurento媒体服务,即 kurento media server 很庞大的一个WEBRTC项目,GIT库主项目:https://github.com/Kurento 基础实现,修改了gst ...

  5. [xampp] /usr/bin/env: php: No such file or directory

    ln -s /opt/lampp/bin/php /usr/local/bin/php

  6. HDU 2689.Sort it-冒泡排序

    Sort it Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  7. flutter ui

    快速生成无状态模板 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget ...

  8. 36、Django实战第36天：首页功能开发

    1.编辑users.views.py ... class IndexView(View): """ 首页 """ def get(self, ...

  9. 【原创】项目管理软件之争，禅道和JIRA大对比

    本文摘要: 一. 产品介绍 二. 界面设计 1. 界面颜色设计 2. 布局结构 三. 功能区别 四. 价格对比 五. 后期服务 六. 优缺点 七. 总结 说到项目管理软件,不得不提的是禅道和JIRA. ...

  10. luogu P2134 百日旅行

    题目链接 luogu P2134 百日旅行 题解 dp方程好想吧 优化有些玄学惹 不会证.... 不过我会三分和贪心 \滑稽 但还是写dp吧 代码 #include<cstdio> #in ...