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
<?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="1000" height="750" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1000" height="750" style="fill:rgb(255,255,0);stroke:none;" />
<polyline points="67.3494,716.2108 67.3494,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="85.9285,716.2108 85.9285,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="104.5077,716.2108 104.5077,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="141.666,716.2108 141.666,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="160.2452,716.2108 160.2452,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="178.8244,716.2108 178.8244,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="215.9827,716.2108 215.9827,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="234.5619,716.2108 234.5619,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="253.141,716.2108 253.141,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="290.2994,716.2108 290.2994,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="308.8786,716.2108 308.8786,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="327.4577,716.2108 327.4577,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="364.6161,716.2108 364.6161,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="383.1952,716.2108 383.1952,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="401.7744,716.2108 401.7744,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="438.9327,716.2108 438.9327,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="457.5119,716.2108 457.5119,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="476.0911,716.2108 476.0911,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="513.2494,716.2108 513.2494,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="531.8286,716.2108 531.8286,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="550.4078,716.2108 550.4078,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="587.5661,716.2108 587.5661,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="606.1453,716.2108 606.1453,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="624.7244,716.2108 624.7244,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="661.8828,716.2108 661.8828,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="680.4619,716.2108 680.4619,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="699.0411,716.2108 699.0411,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="736.1994,716.2108 736.1994,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="754.7786,716.2108 754.7786,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="773.3578,716.2108 773.3578,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="810.5161,716.2108 810.5161,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="829.0953,716.2108 829.0953,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="847.6745,716.2108 847.6745,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="884.8328,716.2108 884.8328,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="903.412,716.2108 903.412,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="921.9911,716.2108 921.9911,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="959.1495,716.2108 959.1495,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="977.7286,716.2108 977.7286,720.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,692.822 35.3379,692.822" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,676.1558 35.3379,676.1558" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,659.4896 35.3379,659.4896" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,626.1571 35.3379,626.1571" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,609.4909 35.3379,609.4909" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,592.8247 35.3379,592.8247" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,559.4923 35.3379,559.4923" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,542.8261 35.3379,542.8261" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,526.1599 35.3379,526.1599" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,492.8275 35.3379,492.8275" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,476.1612 35.3379,476.1612" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,459.495 35.3379,459.495" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,426.1626 35.3379,426.1626" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,409.4964 35.3379,409.4964" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,392.8302 35.3379,392.8302" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,359.4978 35.3379,359.4978" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,342.8316 35.3379,342.8316" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,326.1653 35.3379,326.1653" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,292.8329 35.3379,292.8329" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,276.1667 35.3379,276.1667" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,259.5005 35.3379,259.5005" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,226.1681 35.3379,226.1681" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,209.5019 35.3379,209.5019" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,192.8357 35.3379,192.8357" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,159.5032 35.3379,159.5032" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,142.837 35.3379,142.837" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,126.1708 35.3379,126.1708" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,92.8384 35.3379,92.8384" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,76.1722 35.3379,76.1722" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,59.506 35.3379,59.506" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(48.7702,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">0</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(123.0869,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">2</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(197.4035,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">4</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(271.7202,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">6</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(346.0369,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">8</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(420.3536,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">10</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(494.6702,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">12</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(568.9869,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">14</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(643.3036,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">16</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(717.6203,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">18</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(791.937,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">20</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(866.2536,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">22</text>
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(940.5703,737.859)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">24</text>
<polyline points="48.7702,716.2108 48.7702,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="123.0869,716.2108 123.0869,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="197.4035,716.2108 197.4035,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="271.7202,716.2108 271.7202,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="346.0369,716.2108 346.0369,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="420.3536,716.2108 420.3536,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="494.6702,716.2108 494.6702,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="568.9869,716.2108 568.9869,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="643.3036,716.2108 643.3036,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="717.6203,716.2108 717.6203,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="791.937,716.2108 791.937,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="866.2536,716.2108 866.2536,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="940.5703,716.2108 940.5703,723.2108" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,712.7418)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-1</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,646.077)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-0.8</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,579.4121)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-0.6</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,512.7473)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-0.4</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,446.0825)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">-0.2</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,379.4176)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">0</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,312.7528)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">0.2</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,246.0879)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">0.4</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,179.4231)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">0.6</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,112.7582)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">0.8</text>
<text dominant-baseline="baseline" text-anchor="end" transform="translate(28.3379,46.0934)" font-family="Segoe UI" font-size="12" font-weight="400" fill="black">1</text>
<polyline points="39.3379,709.4882 32.3379,709.4882" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,642.8234 32.3379,642.8234" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,576.1585 32.3379,576.1585" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,509.4937 32.3379,509.4937" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,442.8288 32.3379,442.8288" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,376.164 32.3379,376.164" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,309.4991 32.3379,309.4991" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,242.8343 32.3379,242.8343" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,176.1695 32.3379,176.1695" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,109.5046 32.3379,109.5046" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="39.3379,42.8398 32.3379,42.8398" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
<polyline points="48.7702,376.164 53.4631,334.1786 58.156,292.8619 62.8489,252.8723 67.5419,214.8465 72.2348,179.3905 76.9277,147.0689 81.6206,118.3966 86.3135,93.8304 91.0065,73.7615 95.6994,58.5097 100.3923,48.3179 105.0852,43.3485 109.7781,43.6805 114.4711,49.3088 119.164,60.1437 123.8569,76.0125 128.5498,96.6625 133.2427,121.7648 137.9357,150.9195 142.6286,183.6622 147.3215,219.4713 152.0144,257.7764 156.7073,297.9673 161.4002,339.4038 166.0932,381.4259 170.7861,423.3642 175.479,464.5506 180.1719,504.3291 184.8648,542.066 189.5578,577.1602 194.2507,609.0527 198.9436,637.2354 203.6365,661.2594 208.3294,680.7421 213.0224,695.3731 217.7153,704.9193 222.4082,709.2286 227.1011,708.2325 231.794,701.9468 236.487,690.4715 241.1799,673.9896 245.8728,652.7636 250.5657,627.1315 255.2586,597.5016 259.9515,564.3461 264.6445,528.1929 269.3374,489.618 274.0303,449.2358 278.7232,407.6897 283.4161,365.6414 288.1091,323.7607 292.802,282.7148 297.4949,243.1574 302.1878,205.7188 306.8807,170.9952 311.5737,139.5398 316.2666,111.8536 320.9595,88.3778 325.6524,69.4861 330.3453,55.4796 335.0383,46.5814 339.7312,42.9332 344.4241,44.5931 349.117,51.5348 353.8099,63.6475 358.5028,80.7384 363.1958,102.5352 367.8887,128.6907 372.5816,158.7883 377.2745,192.3485 381.9674,228.8368 386.6604,267.6719 391.3533,308.2352 396.0462,349.8805 400.7391,391.9445 405.432,433.7572 410.125,474.6524 414.8179,513.9788 419.5108,551.1099 424.2037,585.4542 428.8966,616.4647 433.5896,643.6474 438.2825,666.5692 442.9754,684.8652 447.6683,698.2437 452.3612,706.4917 457.0542,709.4778 461.7471,707.1545 466.44,699.5587 471.1329,686.8115 475.8258,669.1159 480.5187,646.7538 485.2117,620.0814 489.9046,589.5236 494.5975,555.567 499.2904,518.7528 503.9833,479.6672 508.6763,438.9328 513.3692,397.1986 518.0621,355.1293 522.755,313.3951 527.4479,272.6608 532.1409,233.5752 536.8338,196.7609 541.5267,162.8044 546.2196,132.2466 550.9125,105.5742 555.6055,83.212 560.2984,65.5164 564.9913,52.7692 569.6842,45.1735 574.3771,42.8502 579.07,45.8363 583.763,54.0843 588.4559,67.4628 593.1488,85.7587 597.8417,108.6806 602.5346,135.8632 607.2276,166.8737 611.9205,201.218 616.6134,238.3491 621.3063,277.6755 625.9992,318.5708 630.6922,360.3834 635.3851,402.4474 640.078,444.0928 644.7709,484.6561 649.4638,523.4912 654.1568,559.9795 658.8497,593.5397 663.5426,623.6373 668.2355,649.7928 672.9284,671.5896 677.6213,688.6805 682.3143,700.7932 687.0072,707.7348 691.7001,709.3947 696.393,705.7465 701.0859,696.8483 705.7789,682.8418 710.4718,663.9502 715.1647,640.4743 719.8576,612.7882 724.5505,581.3328 729.2435,546.6092 733.9364,509.1705 738.6293,469.6132 743.3222,428.5672 748.0151,386.6865 752.7081,344.6382 757.401,303.0921 762.0939,262.71 766.7868,224.1351 771.4797,187.9819 776.1727,154.8263 780.8656,125.1965 785.5585,99.5644 790.2514,78.3383 794.9443,61.8564 799.6372,50.3812 804.3302,44.0955 809.0231,43.0993 813.716,47.4087 818.4089,56.9549 823.1018,71.5859 827.7948,91.0685 832.4877,115.0926 837.1806,143.2753 841.8735,175.1678 846.5664,210.262 851.2594,247.9989 855.9523,287.7774 860.6452,328.9638 865.3381,370.902 870.031,412.9241 874.724,454.3607 879.4169,494.5516 884.1098,532.8567 888.8027,568.6658 893.4956,601.4084 898.1885,630.5631 902.8815,655.6654 907.5744,676.3154 912.2673,692.1843 916.9602,703.0191 921.6531,708.6474 926.3461,708.9795 931.039,704.0101 935.7319,693.8183 940.4248,678.5665 945.1177,658.4976 949.8107,633.9314 954.5036,605.2591 959.1965,572.9375 963.8894,537.4814 968.5823,499.4557 973.2753,459.466 977.9682,418.1494 982.6611,376.164" style="fill:none;stroke:rgb(78,154,6);stroke-width:2;stroke-linejoin:bevel" />
<text dominant-baseline="baseline" text-anchor="middle" transform="translate(515.6689,23.9724)" font-family="Segoe UI" font-size="18" font-weight="700" fill="black">Test 1</text>
<rect x="39.3379" y="36.1839" width="952.6621" height="680.0269" style="fill:none;stroke:black;stroke-width:1" shape-rendering="crispEdges" />
</svg>
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment