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

画布

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

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

工具栏

左侧工具栏

就像画图的工具栏一样

形状库

形状库有很多备选图形 

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

贝塞尔曲线

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

形状调整

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

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

导出代码

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

  1. <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" stroke="null" style="vector-effect: non-scaling-stroke;">
  2.     <g stroke="null">
  3.     <title stroke="null">background</title>
  4.     <rect stroke="null" fill="#ffffff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  5.     <g stroke="null" style="vector-effect: non-scaling-stroke;" display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
  6.     <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  7.     </g>
  8.     </g>
  9.     <g stroke="null">
  10.     <title stroke="null">Layer 1</title>
  11.     <rect stroke="#000" id="svg_80" height="110" width="132.222222" y="215.410635" x="221.944444" stroke-width="1.5" fill="#007fff"/>
  12.     <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"/>
  13.     <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"/>
  14.     <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"/>
  15.     <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"/>
  16.     <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"/>
  17.     <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"/>
  18.     <ellipse stroke="#000" ry="58" rx="83.5" id="svg_2" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
  19.     <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"/>
  20.     <rect stroke="#000" rx="12" id="svg_3" height="19" width="158" y="196" x="211" stroke-width="1.5" fill="#ff0000"/>
  21.     <ellipse stroke="#000" ry="12" rx="12" id="svg_6" cy="216.368421" cx="289.99999" stroke-width="1.5" fill="#bfbf00"/>
  22.     <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"/>
  23.     <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"/>
  24.     <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"/>
  25.     <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"/>
  26.     <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"/>
  27.     <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"/>
  28.     <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"/>
  29.     <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"/>
  30.     <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"/>
  31.     <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"/>
  32.     <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"/>
  33.     <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"/>
  34.     <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"/>
  35.     <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"/>
  36.     <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"/>
  37.     <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"/>
  38.     <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"/>
  39.     <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"/>
  40.     <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"/>
  41.     <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"/>
  42.     <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"/>
  43.     <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"/>
  44.     <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"/>
  45.     <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"/>
  46.     <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"/>
  47.     <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"/>
  48.     <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"/>
  49.     <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"/>
  50.     <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"/>
  51.     <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"/>
  52.     <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"/>
  53.     <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"/>
  54.     <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"/>
  55.     <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"/>
  56.     <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"/>
  57.     <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"/>
  58.     <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"/>
  59.     <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"/>
  60.     <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"/>
  61.     <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"/>
  62.     <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"/>
  63.     <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"/>
  64.     <rect stroke="#007fff" id="svg_101" height="8.888888" width="15.959595" y="215.757575" x="340.000006" stroke-width="0" fill="#007fff"/>
  65.     </g>
  66. </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. docker从零开始 存储（六）存储驱动如何选择

    Docker存储驱动程序 理想情况下,将非常少的数据写入容器的可写层,并使用Docker卷来写入数据.但是,某些工作负载要求您能够写入容器的可写层.这是存储驱动程序的用武之地. Docker使用可插拔 ...

  2. 学习apache commons lang3的源代码 （2）：RandomStringUtils

    本文,主要是分析类;RandomStringUtils. 下面这个方法的:count:表示要生成的数量(比如4个字符组成的字符串等) start,end,表示限定的范围,比如生成ascii码的随机等. ...

  3. tcpdump学习（1）：安装

    目前学习mysql,其中,提到使用tcpdump来进行query的抓包日志,那么,首先就要安装tcpdump. 在ubuntu中,tcpdump是缺省安装的,如果没有,则按照以下步骤做: 1)安装li ...

  4. 网络大数据分析 -- 使用 ElasticSearch + LogStash + Kibana 来可视化网络流量

    https://blog.csdn.net/yeasy/article/details/45332493

  5. CentOS中文乱码解决办法

    打开文件:/etc/sysconfig/i18n ,对其中相关属性配置修改成如下: LANG="zh_CN.GB18030" LANGUAGE="zh_CN.GB1803 ...

  6. codeforces 713C C. Sonya and Problem Wihtout a Legend(dp)（将一个数组变成严格单增数组的最少步骤）

    E. Sonya and Problem Wihtout a Legend time limit per test 5 seconds memory limit per test 256 megaby ...

  7. 51nod 最长单增子序列（动态规划）

    最长单增子序列 (LIS Longest Increasing Subsequence)给定一个数列,从中删掉任意若干项剩余的序列叫做它的一个子序列,求它的最长的子序列,满足子序列中的元素是单调递增的 ...

  8. hihocoder Popular Products(STL）

    Popular Products 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Given N lists of customer purchase, your tas ...

  9. 洛谷 - Sdchr 的邀请赛 T1 取石子

    比赛的时候都推出来了和 质因子的指数和有关,硬是没做出来QWQ,我傻死算了 但其实这是一个结论题,因为这本来就是阶梯NIM游戏的模型.阶梯NIM游戏是指,有 n+1 阶台阶(0 ~ n),每阶上都有若 ...

  10. 排排看（p20）

    public class paixu{public static void main(String[] args){int x=3;if(x>2){System.out.print(" ...