Skip to content

Instantly share code, notes, and snippets.

@shinaisan

shinaisan/README.md

Last active August 18, 2018 03:21
Show Gist options
  • Save shinaisan/29605a78baf00a57252ddf012b93ef1c to your computer and use it in GitHub Desktop.
Save shinaisan/29605a78baf00a57252ddf012b93ef1c to your computer and use it in GitHub Desktop.
Download ZIP
SVG
Raw
README.md

SVG with image syntax of MD (Does not work)

SVG

Full URL with sanitize=true

SVG

Display the source blob
Display the rendered blob
Raw
sample.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<g transform="translate(80,40)">
<g fill="blue">
<rect x="28" y="94.49999999999996" width="5" height="85.50000000000004"/>
<rect x="38" y="121.50000000000003" width="5" height="58.49999999999997"/>
<rect x="48" y="105" width="5" height="75"/>
<rect x="58" y="127.5" width="5" height="52.5"/>
<rect x="68" y="120" width="5" height="60"/>
<rect x="78" y="90" width="5" height="90"/>
<rect x="88" y="116.99999999999996" width="5" height="63.00000000000004"/>
<rect x="98" y="130.50000000000006" width="5" height="49.49999999999994"/>
<rect x="108" y="97.5" width="5" height="82.5"/>
<rect x="118" y="144.00000000000003" width="5" height="35.99999999999997"/>
<rect x="128" y="110.99999999999997" width="5" height="69.00000000000003"/>
<rect x="138" y="99.00000000000001" width="5" height="80.99999999999999"/>
<rect x="148" y="97.5" width="5" height="82.5"/>
<rect x="158" y="103.49999999999999" width="5" height="76.50000000000001"/>
<rect x="168" y="58.49999999999997" width="5" height="121.50000000000003"/>
<rect x="178" y="106.50000000000003" width="5" height="73.49999999999997"/>
<rect x="188" y="139.49999999999994" width="5" height="40.50000000000006"/>
<rect x="198" y="61.50000000000003" width="5" height="118.49999999999997"/>
<rect x="208" y="78.00000000000004" width="5" height="101.99999999999996"/>
<rect x="218" y="82.5" width="5" height="97.5"/>
<rect x="228" y="135" width="5" height="45"/>
<rect x="238" y="76.50000000000003" width="5" height="103.49999999999997"/>
<rect x="248" y="76.50000000000003" width="5" height="103.49999999999997"/>
<rect x="258" y="69.00000000000001" width="5" height="110.99999999999999"/>
<rect x="268" y="46.50000000000003" width="5" height="133.49999999999997"/>
<rect x="278" y="67.5" width="5" height="112.5"/>
<rect x="288" y="88.49999999999999" width="5" height="91.50000000000001"/>
<rect x="298" y="80.99999999999997" width="5" height="99.00000000000003"/>
<rect x="308" y="50.99999999999997" width="5" height="129.00000000000003"/>
<rect x="318" y="75" width="5" height="105"/>
<rect x="328" y="157.5" width="5" height="22.5"/>
<rect x="338" y="56.99999999999996" width="5" height="123.00000000000004"/>
<rect x="348" y="101.99999999999996" width="5" height="78.00000000000004"/>
<rect x="358" y="91.50000000000003" width="5" height="88.49999999999997"/>
<rect x="368" y="118.49999999999997" width="5" height="61.50000000000003"/>
<rect x="378" y="101.99999999999996" width="5" height="78.00000000000004"/>
<rect x="388" y="93.00000000000004" width="5" height="86.99999999999996"/>
<rect x="398" y="75" width="5" height="105"/>
<rect x="408" y="71.99999999999996" width="5" height="108.00000000000004"/>
<rect x="418" y="78.00000000000004" width="5" height="101.99999999999996"/>
<rect x="428" y="70.50000000000004" width="5" height="109.49999999999996"/>
<rect x="438" y="90" width="5" height="90"/>
<rect x="448" y="71.99999999999996" width="5" height="108.00000000000004"/>
<rect x="458" y="85.50000000000004" width="5" height="94.49999999999996"/>
<rect x="468" y="101.99999999999996" width="5" height="78.00000000000004"/>
<rect x="478" y="28.49999999999997" width="5" height="151.50000000000003"/>
</g>
<g transform="translate(0,180)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<path class="domain" stroke="#000" d="M0.5,0V0.5H510.5V0"/>
<g class="tick" opacity="1" transform="translate(30.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-73
</text>
</g>
<g class="tick" opacity="1" transform="translate(40.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-74
</text>
</g>
<g class="tick" opacity="1" transform="translate(50.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-75
</text>
</g>
<g class="tick" opacity="1" transform="translate(60.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-76
</text>
</g>
<g class="tick" opacity="1" transform="translate(70.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-77
</text>
</g>
<g class="tick" opacity="1" transform="translate(80.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-78
</text>
</g>
<g class="tick" opacity="1" transform="translate(90.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-79
</text>
</g>
<g class="tick" opacity="1" transform="translate(100.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-80
</text>
</g>
<g class="tick" opacity="1" transform="translate(110.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-81
</text>
</g>
<g class="tick" opacity="1" transform="translate(120.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-82
</text>
</g>
<g class="tick" opacity="1" transform="translate(130.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-83
</text>
</g>
<g class="tick" opacity="1" transform="translate(140.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-84
</text>
</g>
<g class="tick" opacity="1" transform="translate(150.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-85
</text>
</g>
<g class="tick" opacity="1" transform="translate(160.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-86
</text>
</g>
<g class="tick" opacity="1" transform="translate(170.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-87
</text>
</g>
<g class="tick" opacity="1" transform="translate(180.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-88
</text>
</g>
<g class="tick" opacity="1" transform="translate(190.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-89
</text>
</g>
<g class="tick" opacity="1" transform="translate(200.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-90
</text>
</g>
<g class="tick" opacity="1" transform="translate(210.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-91
</text>
</g>
<g class="tick" opacity="1" transform="translate(220.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-92
</text>
</g>
<g class="tick" opacity="1" transform="translate(230.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-93
</text>
</g>
<g class="tick" opacity="1" transform="translate(240.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-94
</text>
</g>
<g class="tick" opacity="1" transform="translate(250.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-95
</text>
</g>
<g class="tick" opacity="1" transform="translate(260.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-96
</text>
</g>
<g class="tick" opacity="1" transform="translate(270.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-97
</text>
</g>
<g class="tick" opacity="1" transform="translate(280.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-98
</text>
</g>
<g class="tick" opacity="1" transform="translate(290.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-99
</text>
</g>
<g class="tick" opacity="1" transform="translate(300.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-00
</text>
</g>
<g class="tick" opacity="1" transform="translate(310.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-01
</text>
</g>
<g class="tick" opacity="1" transform="translate(320.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-02
</text>
</g>
<g class="tick" opacity="1" transform="translate(330.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-03
</text>
</g>
<g class="tick" opacity="1" transform="translate(340.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-04
</text>
</g>
<g class="tick" opacity="1" transform="translate(350.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-05
</text>
</g>
<g class="tick" opacity="1" transform="translate(360.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-06
</text>
</g>
<g class="tick" opacity="1" transform="translate(370.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-07
</text>
</g>
<g class="tick" opacity="1" transform="translate(380.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-08
</text>
</g>
<g class="tick" opacity="1" transform="translate(390.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-09
</text>
</g>
<g class="tick" opacity="1" transform="translate(400.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-10
</text>
</g>
<g class="tick" opacity="1" transform="translate(410.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-11
</text>
</g>
<g class="tick" opacity="1" transform="translate(420.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-12
</text>
</g>
<g class="tick" opacity="1" transform="translate(430.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-13
</text>
</g>
<g class="tick" opacity="1" transform="translate(440.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-14
</text>
</g>
<g class="tick" opacity="1" transform="translate(450.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-15
</text>
</g>
<g class="tick" opacity="1" transform="translate(460.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-16
</text>
</g>
<g class="tick" opacity="1" transform="translate(470.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-17
</text>
</g>
<g class="tick" opacity="1" transform="translate(480.5,0)">
<line stroke="#000" y2="0"/>
<text fill="#000" y="6" dy="-.2em" style="text-anchor: end;" dx="-.2em" transform="rotate(-70)">
Jul-18
</text>
</g>
</g>
<text style="text-anchor: middle;" transform="rotate(-90)" dx="-90" dy="-40">
degC
</text>
<text style="text-anchor: middle;" x="255" y="180" dy="40">
Year
</text>
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<path class="domain" stroke="#000" d="M-6,180.5H0.5V0.5H-6"/>
<g class="tick" opacity="1" transform="translate(0,180.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
31
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,165.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
32
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,150.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
33
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,135.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
34
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,120.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
35
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,105.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
36
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,90.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
37
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,75.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
38
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,60.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
39
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,45.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
40
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,30.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
41
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,15.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
42
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,0.5)">
<line stroke="#000" x2="-6"/>
<text fill="#000" x="-9" dy="0.32em">
43
</text>
</g>
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment