Skip to content

Instantly share code, notes, and snippets.

@VisualMelon
Created May 6, 2020 17:00
Show Gist options
  • Save VisualMelon/946e6b3d5c71e90dbd1b5b28ea562fb0 to your computer and use it in GitHub Desktop.
Save VisualMelon/946e6b3d5c71e90dbd1b5b28ea562fb0 to your computer and use it in GitHub Desktop.
SVG Examples
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="225" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<polyline points="53.2766,191.2108 53.2766,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="73.6942,191.2108 73.6942,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="94.1118,191.2108 94.1118,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="114.5294,191.2108 114.5294,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="155.3647,191.2108 155.3647,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="175.7823,191.2108 175.7823,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="196.1999,191.2108 196.1999,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="216.6175,191.2108 216.6175,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="257.4527,191.2108 257.4527,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="277.8703,191.2108 277.8703,195.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,174.4805 26.2676,174.4805" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,159.2828 26.2676,159.2828" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,144.0851 26.2676,144.0851" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,128.8874 26.2676,128.8874" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,98.492 26.2676,98.492" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,83.2943 26.2676,83.2943" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,68.0966 26.2676,68.0966" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,52.8989 26.2676,52.8989" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(32.859,212.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">0</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(134.947,212.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">10</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(237.0351,212.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">20</text>
<polyline points="32.859,191.2108 32.859,198.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="134.947,191.2108 134.947,198.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="237.0351,191.2108 237.0351,198.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<text dominant-baseline="baseline" text-anchor="end" transform="translate(19.2676,192.9318)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-1</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(19.2676,116.9433)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">0</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(19.2676,40.9549)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">1</text>
<polyline points="30.2676,189.6782 23.2676,189.6782" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,113.6897 23.2676,113.6897" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="30.2676,37.7012 23.2676,37.7012" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="32.859,113.6897 34.1483,104.1182 35.4376,94.6992 36.727,85.5827 38.0163,76.9139 39.3056,68.8309 40.5949,61.4625 41.8842,54.926 43.1736,49.3256 44.4629,44.7505 45.7522,41.2735 47.0415,38.9501 48.3309,37.8172 49.6202,37.8929 50.9095,39.176 52.1988,41.646 53.4882,45.2637 54.7775,49.9713 56.0668,55.6939 57.3561,62.3404 58.6454,69.8048 59.9348,77.9682 61.2241,86.7007 62.5134,95.8631 63.8027,105.3094 65.0921,114.8893 66.3814,124.45 67.6707,133.8394 68.96,142.9077 70.2494,151.5107 71.5387,159.5112 72.828,166.7817 74.1173,173.2066 75.4066,178.6834 76.696,183.1249 77.9853,186.4603 79.2746,188.6366 80.5639,189.619 81.8533,189.3919 83.1426,187.959 84.4319,185.3429 85.7212,181.5855 87.0106,176.7466 88.2999,170.9032 89.5892,164.1484 90.8785,156.5899 92.1678,148.348 93.4572,139.554 94.7465,130.348 96.0358,120.8767 97.3251,111.2909 98.6145,101.7433 99.9038,92.3859 101.1931,83.368 102.4824,74.833 103.7717,66.917 105.0611,59.7461 106.3504,53.4344 107.6397,48.0826 108.929,43.7758 110.2184,40.5828 111.5077,38.5542 112.797,37.7225 114.0863,38.101 115.3757,39.6834 116.665,42.4448 117.9543,46.341 119.2436,51.3101 120.5329,57.2728 121.8223,64.1342 123.1116,71.785 124.4009,80.1033 125.6902,88.9566 126.9796,98.2039 128.2689,107.6978 129.5582,117.2872 130.8475,126.8193 132.1369,136.1423 133.4262,145.1076 134.7155,153.5724 136.0048,161.402 137.2941,168.4715 138.5835,174.6684 139.8728,179.8939 141.1621,184.0648 142.4514,187.1148 143.7408,188.9951 145.0301,189.6758 146.3194,189.1462 147.6087,187.4146 148.8981,184.5086 150.1874,180.4745 151.4767,175.3765 152.766,169.296 154.0553,162.3297 155.3447,154.5885 156.634,146.1959 157.9233,137.2855 159.2126,127.9992 160.502,118.485 161.7913,108.8944 163.0806,99.3802 164.3699,90.0939 165.6592,81.1835 166.9486,72.7909 168.2379,65.0498 169.5272,58.0834 170.8165,52.0029 172.1059,46.905 173.3952,42.8709 174.6845,39.9649 175.9738,38.2332 177.2632,37.7036 178.5525,38.3844 179.8418,40.2647 181.1311,43.3146 182.4204,47.4855 183.7098,52.7111 184.9991,58.9079 186.2884,65.9775 187.5777,73.807 188.8671,82.2718 190.1564,91.2371 191.4457,100.5601 192.735,110.0922 194.0244,119.6816 195.3137,129.1756 196.603,138.4228 197.8923,147.2761 199.1816,155.5944 200.471,163.2452 201.7603,170.1066 203.0496,176.0693 204.3389,181.0384 205.6283,184.9346 206.9176,187.696 208.2069,189.2785 209.4962,189.6569 210.7855,188.8252 212.0749,186.7967 213.3642,183.6036 214.6535,179.2968 215.9428,173.945 217.2322,167.6333 218.5215,160.4624 219.8108,152.5464 221.1001,144.0114 222.3895,134.9935 223.6788,125.6362 224.9681,116.0886 226.2574,106.5027 227.5467,97.0314 228.8361,87.8254 230.1254,79.0314 231.4147,70.7895 232.704,63.231 233.9934,56.4762 235.2827,50.6328 236.572,45.7939 237.8613,42.0365 239.1507,39.4205 240.44,37.9875 241.7293,37.7604 243.0186,38.7428 244.3079,40.9191 245.5973,44.2545 246.8866,48.696 248.1759,54.1728 249.4652,60.5977 250.7546,67.8683 252.0439,75.8688 253.3332,84.4717 254.6225,93.5401 255.9119,102.9294 257.2012,112.4901 258.4905,122.07 259.7798,131.5163 261.0691,140.6787 262.3585,149.4112 263.6478,157.5747 264.9371,165.0391 266.2264,171.6855 267.5158,177.4081 268.8051,182.1158 270.0944,185.7334 271.3837,188.2034 272.673,189.4865 273.9624,189.5622 275.2517,188.4293 276.541,186.1059 277.8303,182.6289 279.1197,178.0538 280.409,172.4534 281.6983,165.9169 282.9876,158.5485 284.277,150.4655 285.5663,141.7967 286.8556,132.6802 288.1449,123.2612 289.4342,113.6897" style="fill:none;stroke:rgb(78,154,6);stroke-width:2;stroke-linejoin:bevel" />
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(161.1338,23.9724)" font-family="Segoe UI" font-size="18" font-weight="700" fill="black">Test 1</text>
<rect x="30.2676" y="36.1839" width="261.7324" height="155.0269" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment