SVGKit
Test Suite
starting at
going to
/
4
Image
Source
SVG
SVG Source
0: SVGKit
function(svg) { var rect = svg.RECT({x:10, y:10, width:180, height:180, fill:'#EEE', rx:10, ry:10}) svg.append(rect) var data = [ 'M 41.344021,102.10177 C 38.426895,104.25245 34.465744,105.32777 29.460552,105.32777 C 26.566899,105.32777 24.044745,105.07361 21.894077,104.56528 C 19.743395,104.05693 17.729581,103.41172 15.852629,102.62966 L 15.852629,94.253762 L 16.838032,94.253762 C 18.69934,95.73969 20.783539,96.881497 23.090637,97.679187 C 25.397714,98.476898 27.614865,98.875754 29.742094,98.875754 C 30.289523,98.875754 31.009022,98.828824 31.900593,98.734987 C 32.792127,98.641129 33.519446,98.484726 34.082553,98.265738 C 34.770747,97.984205 35.337744,97.632278 35.783542,97.209958 C 36.229297,96.787659 36.452184,96.162007 36.452208,95.333006 C 36.452184,94.566588 36.127629,93.90574 35.478539,93.350461 C 34.829402,92.795223 33.879195,92.368999 32.627914,92.07179 C 31.314028,91.758984 29.925864,91.465699 28.463418,91.191973 C 27.000946,90.918269 25.628424,90.570246 24.34585,90.147927 C 21.40528,89.193812 19.289797,87.899505 17.999397,86.264963 C 16.708987,84.630481 16.063785,82.601007 16.063787,80.176602 C 16.063785,76.923235 17.522334,74.26813 20.439438,72.211268 C 23.356528,70.154466 27.106524,69.126054 31.689436,69.126034 C 33.988685,69.126054 36.260579,69.348947 38.505126,69.79469 C 40.749625,70.240495 42.693054,70.799677 44.335418,71.472218 L 44.335418,79.519658 L 43.373478,79.519658 C 41.965734,78.393505 40.241284,77.451124 38.200123,76.692494 C 36.158911,75.933924 34.074711,75.554629 31.947517,75.554589 C 31.196717,75.554629 30.449846,75.605462 29.706902,75.707088 C 28.963926,75.808794 28.248336,76.000394 27.560136,76.281906 C 26.950111,76.516571 26.426129,76.872401 25.988185,77.349438 C 25.550217,77.826515 25.331239,78.370061 25.33125,78.980037 C 25.331239,79.902898 25.683168,80.610675 26.387038,81.103347 C 27.090883,81.596061 28.420392,82.045749 30.375569,82.452412 C 31.658135,82.718329 32.889885,82.976398 34.070822,83.226639 C 35.251719,83.47692 36.52257,83.821038 37.883387,84.258974 C 40.558019,85.134905 42.532731,86.327547 43.807525,87.83692 C 47.163448,92.80165 45.767924,98.260307 41.344021,102.10177 z ', 'M 79.583063,69.759494 L 66.843232,104.69431 L 56.754602,104.69431 L 44.014772,69.759494 L 53.469931,69.759494 L 61.916227,94.300671 L 70.362522,69.759494 L 79.583063,69.759494 z ', 'M 111.01648,102.70004 C 109.4523,103.31005 107.37985,103.91616 104.79906,104.51835 C 102.21822,105.12054 99.645238,105.42163 97.080086,105.42163 C 91.136376,105.42163 86.483094,103.80667 83.120228,100.57675 C 79.757348,97.346821 78.075912,92.885157 78.075914,87.191707 C 78.075912,81.764216 79.772989,77.388558 83.167153,74.064757 C 86.561302,70.741016 91.292799,69.079146 97.361639,69.079106 C 99.660874,69.079146 101.85065,69.286382 103.93098,69.700833 C 106.01123,70.115365 108.32613,70.940444 110.87571,72.176071 L 110.87571,80.364298 L 109.86684,80.364298 C 109.42884,80.035856 108.78755,79.570511 107.94295,78.968304 C 107.0983,78.366137 106.28496,77.853883 105.50292,77.431544 C 104.59569,76.931062 103.53601,76.500915 102.32383,76.14114 C 101.1116,75.781425 99.825105,75.601538 98.464348,75.601518 C 96.868906,75.601538 95.422099,75.836162 94.123888,76.305371 C 92.825635,76.774639 91.660362,77.494149 90.628047,78.463878 C 89.642643,79.402376 88.864472,80.595018 88.293578,82.041824 C 87.722666,83.488651 87.437212,85.15837 87.437225,87.050941 C 87.437212,90.914345 88.461713,93.870563 90.510745,95.919557 C 92.559739,97.968569 95.586331,98.993076 99.59052,98.993056 C 99.934599,98.993076 100.31389,98.985247 100.72843,98.969591 C 101.14288,98.953955 101.52219,98.930511 101.86633,98.899218 L 101.86633,92.048326 L 94.898134,92.048326 L 94.898134,85.45554 L 111.01648,85.45554 L 111.01648,102.70004 z ', 'M 147.11504,104.69431 L 136.06447,104.69431 L 125.62392,90.711012 L 123.51235,93.268356 L 123.51235,104.69431 L 114.50296,104.69431 L 114.50296,69.759494 L 123.51235,69.759494 L 123.51235,85.572842 L 135.99409,69.759494 L 146.43466,69.759494 L 132.77981,85.924768 L 147.11504,104.69431 z M 159.54987,104.69431 L 151.10358,104.69431 L 151.10358,78.346557 L 159.54987,78.346557 L 159.54987,104.69431 z M 159.7845,74.592648 L 150.86896,74.592648 L 150.86896,68.187557 L 159.7845,68.187557 L 159.7845,74.592648 z M 184.3726,104.45969 C 183.46537,104.69431 182.50343,104.87811 181.48678,105.01104 C 180.47008,105.144 179.2266,105.21047 177.75633,105.21047 C 174.47165,105.21047 172.02771,104.54572 170.42448,103.21621 C 168.82125,101.88671 168.01963,99.6109 168.01963,96.388784 L 168.01963,84.071278 L 164.54726,84.071278 L 164.54726,78.346557 L 168.01963,78.346557 L 168.01963,70.815293 L 176.46593,70.815293 L 176.46593,78.346557 L 184.3726,78.346557 L 184.3726,84.071278 L 176.46593,84.071278 L 176.46593,93.409123 C 176.46591,94.331964 176.47373,95.137502 176.48939,95.825699 C 176.50501,96.513934 176.63014,97.131757 176.86478,97.679187 C 177.08373,98.226638 177.47086,98.66069 178.02613,98.981323 C 178.58139,99.301978 179.39084,99.462304 180.45446,99.462304 C 180.8924,99.462304 181.46721,99.368466 182.1789,99.180751 C 182.89056,98.993076 183.38717,98.821017 183.66873,98.664594 L 184.3726,98.664594 L 184.3726,104.45969 z ', ] svg.append( svg.PATH({fill:'#a00', d:data[0]}) ) svg.append( svg.PATH({fill:'#080', d:data[1]}) ) svg.append( svg.PATH({fill:'#00a', d:data[2]}) ) svg.append( svg.PATH({fill:'#000', d:data[3]}) ) }
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="#EEE" height="180" rx="10" ry="10" width="180" x="10" y="10"/> <path d="M 41.344021,102.10177 C 38.426895,104.25245 34.465744,105.32777 29.460552,105.32777 C 26.566899,105.32777 24.044745,105.07361 21.894077,104.56528 C 19.743395,104.05693 17.729581,103.41172 15.852629,102.62966 L 15.852629,94.253762 L 16.838032,94.253762 C 18.69934,95.73969 20.783539,96.881497 23.090637,97.679187 C 25.397714,98.476898 27.614865,98.875754 29.742094,98.875754 C 30.289523,98.875754 31.009022,98.828824 31.900593,98.734987 C 32.792127,98.641129 33.519446,98.484726 34.082553,98.265738 C 34.770747,97.984205 35.337744,97.632278 35.783542,97.209958 C 36.229297,96.787659 36.452184,96.162007 36.452208,95.333006 C 36.452184,94.566588 36.127629,93.90574 35.478539,93.350461 C 34.829402,92.795223 33.879195,92.368999 32.627914,92.07179 C 31.314028,91.758984 29.925864,91.465699 28.463418,91.191973 C 27.000946,90.918269 25.628424,90.570246 24.34585,90.147927 C 21.40528,89.193812 19.289797,87.899505 17.999397,86.264963 C 16.708987,84.630481 16.063785,82.601007 16.063787,80.176602 C 16.063785,76.923235 17.522334,74.26813 20.439438,72.211268 C 23.356528,70.154466 27.106524,69.126054 31.689436,69.126034 C 33.988685,69.126054 36.260579,69.348947 38.505126,69.79469 C 40.749625,70.240495 42.693054,70.799677 44.335418,71.472218 L 44.335418,79.519658 L 43.373478,79.519658 C 41.965734,78.393505 40.241284,77.451124 38.200123,76.692494 C 36.158911,75.933924 34.074711,75.554629 31.947517,75.554589 C 31.196717,75.554629 30.449846,75.605462 29.706902,75.707088 C 28.963926,75.808794 28.248336,76.000394 27.560136,76.281906 C 26.950111,76.516571 26.426129,76.872401 25.988185,77.349438 C 25.550217,77.826515 25.331239,78.370061 25.33125,78.980037 C 25.331239,79.902898 25.683168,80.610675 26.387038,81.103347 C 27.090883,81.596061 28.420392,82.045749 30.375569,82.452412 C 31.658135,82.718329 32.889885,82.976398 34.070822,83.226639 C 35.251719,83.47692 36.52257,83.821038 37.883387,84.258974 C 40.558019,85.134905 42.532731,86.327547 43.807525,87.83692 C 47.163448,92.80165 45.767924,98.260307 41.344021,102.10177 z " fill="#a00"/> <path d="M 79.583063,69.759494 L 66.843232,104.69431 L 56.754602,104.69431 L 44.014772,69.759494 L 53.469931,69.759494 L 61.916227,94.300671 L 70.362522,69.759494 L 79.583063,69.759494 z " fill="#080"/> <path d="M 111.01648,102.70004 C 109.4523,103.31005 107.37985,103.91616 104.79906,104.51835 C 102.21822,105.12054 99.645238,105.42163 97.080086,105.42163 C 91.136376,105.42163 86.483094,103.80667 83.120228,100.57675 C 79.757348,97.346821 78.075912,92.885157 78.075914,87.191707 C 78.075912,81.764216 79.772989,77.388558 83.167153,74.064757 C 86.561302,70.741016 91.292799,69.079146 97.361639,69.079106 C 99.660874,69.079146 101.85065,69.286382 103.93098,69.700833 C 106.01123,70.115365 108.32613,70.940444 110.87571,72.176071 L 110.87571,80.364298 L 109.86684,80.364298 C 109.42884,80.035856 108.78755,79.570511 107.94295,78.968304 C 107.0983,78.366137 106.28496,77.853883 105.50292,77.431544 C 104.59569,76.931062 103.53601,76.500915 102.32383,76.14114 C 101.1116,75.781425 99.825105,75.601538 98.464348,75.601518 C 96.868906,75.601538 95.422099,75.836162 94.123888,76.305371 C 92.825635,76.774639 91.660362,77.494149 90.628047,78.463878 C 89.642643,79.402376 88.864472,80.595018 88.293578,82.041824 C 87.722666,83.488651 87.437212,85.15837 87.437225,87.050941 C 87.437212,90.914345 88.461713,93.870563 90.510745,95.919557 C 92.559739,97.968569 95.586331,98.993076 99.59052,98.993056 C 99.934599,98.993076 100.31389,98.985247 100.72843,98.969591 C 101.14288,98.953955 101.52219,98.930511 101.86633,98.899218 L 101.86633,92.048326 L 94.898134,92.048326 L 94.898134,85.45554 L 111.01648,85.45554 L 111.01648,102.70004 z " fill="#00a"/> <path d="M 147.11504,104.69431 L 136.06447,104.69431 L 125.62392,90.711012 L 123.51235,93.268356 L 123.51235,104.69431 L 114.50296,104.69431 L 114.50296,69.759494 L 123.51235,69.759494 L 123.51235,85.572842 L 135.99409,69.759494 L 146.43466,69.759494 L 132.77981,85.924768 L 147.11504,104.69431 z M 159.54987,104.69431 L 151.10358,104.69431 L 151.10358,78.346557 L 159.54987,78.346557 L 159.54987,104.69431 z M 159.7845,74.592648 L 150.86896,74.592648 L 150.86896,68.187557 L 159.7845,68.187557 L 159.7845,74.592648 z M 184.3726,104.45969 C 183.46537,104.69431 182.50343,104.87811 181.48678,105.01104 C 180.47008,105.144 179.2266,105.21047 177.75633,105.21047 C 174.47165,105.21047 172.02771,104.54572 170.42448,103.21621 C 168.82125,101.88671 168.01963,99.6109 168.01963,96.388784 L 168.01963,84.071278 L 164.54726,84.071278 L 164.54726,78.346557 L 168.01963,78.346557 L 168.01963,70.815293 L 176.46593,70.815293 L 176.46593,78.346557 L 184.3726,78.346557 L 184.3726,84.071278 L 176.46593,84.071278 L 176.46593,93.409123 C 176.46591,94.331964 176.47373,95.137502 176.48939,95.825699 C 176.50501,96.513934 176.63014,97.131757 176.86478,97.679187 C 177.08373,98.226638 177.47086,98.66069 178.02613,98.981323 C 178.58139,99.301978 179.39084,99.462304 180.45446,99.462304 C 180.8924,99.462304 181.46721,99.368466 182.1789,99.180751 C 182.89056,98.993076 183.38717,98.821017 183.66873,98.664594 L 184.3726,98.664594 L 184.3726,104.45969 z " fill="#000"/> </svg>
1: boxcircle
function(svg) { var rect = svg.RECT({'x':10, 'y':10, 'width':80, 'height':80, 'fill':'blue', 'fill-opacity':.5}) svg.append(rect) svg.append( svg.CIRCLE( {'cx':50, 'cy':50, 'r':20, 'fill':'purple', 'fill-opacity':.3} ) ) }
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="blue" fill-opacity="0.5" height="80" width="80" x="10" y="10"/> <circle cx="50" cy="50" fill="purple" fill-opacity="0.3" r="20"/> </svg>
2: squares
function (svg) { var rect rect = svg.RECT({x:10, y:10, width:50, height:50, fill:'rgb(200,0,0)'}) svg.append(rect) rect = svg.RECT({x:30, y:30, width:50, height:50, fill:'rgb(0,0,200)', 'fill-opacity':0.5}) svg.append(rect) }
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="rgb(200,0,0)" height="50" width="50" x="10" y="10"/> <rect fill="rgb(0,0,200)" fill-opacity="0.5" height="50" width="50" x="30" y="30"/> </svg>
3: text
function(svg) { var attrs = { 'x':15, 'y': 100, 'style': "font-size:50px; font-family:Bitstream Vera Sans"}; var text = svg.TEXT(attrs, "SVGKit") svg.append(text) //var bbox = text.getBBox() //log('BBox for text', bbox.x, bbox.y, bbox.width, bbox.height) }
SVGKit
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text style="font-size:50px; font-family:Bitstream Vera Sans" x="15" y="100"> SVGKit</text> </svg>
4: path
function(svg) { var path = svg.PATH({ 'd':"M30,30 L150,150 Q60,70 70,150 L30,30", 'fill':"#ff0000", 'stroke':"none"}); svg.append(path) //var bbox = path.getBBox() //log('BBox for path', bbox.x, bbox.y, bbox.width, bbox.height) }
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M30,30 L150,150 Q60,70 70,150 L30,30" fill="#ff0000" stroke="none"/> </svg>
