SVG enhanced with class tags and some CSS

semantic-create-table.svg

<svg xmlns='http://www.w3.org/2000/svg' class="pikchr" viewBox="0 0 718.33 315.792">
 <style type="text/css" >
 <![CDATA[
   .hidden {
      position: absolute !important;
      opacity: 0 !important;
      pointer-events: none !important;
      display: none !important;
   }  text {
      pointer-events: none;
   }
   path.optional:hover{
     fill: powderblue !important;
   }
   path.optional:hover ~ text{
     fill: darkorange !important;
   }

   path.always:hover{
     fill: orchid !important;
   }
   path.always:hover ~ text{
     fill: lemonchiffon !important;
   }

   path.choice-of:hover{
     fill: lightgreen !important;
   }
   path.choice-of:hover ~ text{
     fill: red !important;
   }
       ]]>
 </style>
 <circle cx="5" cy="17" r="3.6" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <path d="M9,17L32,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <polygon points="32,17 20,21 20,12" style="fill:rgb(0,0,0)"/>
 <g class="keyword token always"  id="CR">
  <path class="keyword token always" d="M47,32L100,32A15 15 0 0 0 116 17A15 15 0 0 0 100 2L47,2A15 15 0 0 0 32 17A15 15 0 0 0 47 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="keyword token always" x="74" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">CREATE</text>
 </g>
 <g class="keyword token optional"  id="T1">
  <path class="keyword token optional" d="M167,56L199,56A15 15 0 0 0 214 41A15 15 0 0 0 199 26L167,26A15 15 0 0 0 152 41A15 15 0 0 0 167 56Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="keyword token optional" x="183" y="41" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">TEMP</text>
 </g>
 <g class="keyword token optional"  id="T2">
  <path class="keyword token optional" d="M167,94L259,94A15 15 0 0 0 274 79A15 15 0 0 0 259 64L167,64A15 15 0 0 0 152 79A15 15 0 0 0 167 94Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="keyword token optional" x="213" y="79" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">TEMPORARY</text>
 </g>
 <g class="keyword token always"  id="TBL">
  <path class="keyword token always" d="M325,32L365,32A15 15 0 0 0 380 17A15 15 0 0 0 365 2L325,2A15 15 0 0 0 310 17A15 15 0 0 0 325 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="keyword token always" x="345" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">TABLE</text>
 </g>
 <g >
  <path d="M116,17L213,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="213,17 201,21 201,12" style="fill:rgb(0,0,0)"/>
 </g>
 <g >
  <path d="M213,17L310,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="310,17 299,21 299,12" style="fill:rgb(0,0,0)"/>
 </g>
 <g >
  <path d="M116,17 L 123,17 Q 131,17 131,29 Q 131,41 141,41 L 152,41" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="152,41 140,45 140,37" style="fill:rgb(0,0,0)"/>
 </g>
 <g >
  <path d="M116,17 L 123,17 Q 131,17 131,32 L 131,64 Q 131,79 141,79 L 152,79" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="152,79 140,83 140,74" style="fill:rgb(0,0,0)"/>
 </g>
 <path d="M274,79 L 282,79 Q 289,79 289,64 L 289,32 Q 289,17 294,17 L 299,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <path d="M214,41 L 274,41 Q 289,41 289,33 L 289,26" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <g >
  <path d="M380,17L416,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="416,17 404,21 404,12" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="keyword token optional" >
  <path class="keyword token optional" d="M431,32A15 15 0 0 0 446 17A15 15 0 0 0 431 2A15 15 0 0 0 416 17A15 15 0 0 0 431 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="keyword token optional" x="431" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">IF</text>
 </g>
 <g >
  <path d="M446,17L469,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="469,17 458,21 458,12" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="keyword token optional" >
  <path class="keyword token optional" d="M484,32L504,32A15 15 0 0 0 520 17A15 15 0 0 0 504 2L484,2A15 15 0 0 0 469 17A15 15 0 0 0 484 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="keyword token optional" x="494" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">NOT</text>
 </g>
 <g >
  <path d="M520,17L543,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="543,17 531,21 531,12" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="keyword token optional"  id="ETS">
  <path class="keyword token optional" d="M558,32L602,32A15 15 0 0 0 617 17A15 15 0 0 0 602 2L558,2A15 15 0 0 0 543 17A15 15 0 0 0 558 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="keyword token optional" x="580" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">EXISTS</text>
 </g>
 <g class="bypass" >
  <path class="bypass" d="M380,17 L 387,17 Q 395,17 395,32 L 395,94 Q 395,109 380,109 L 228,109 L 213,109" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon class="bypass" points="213,109 224,105 224,113" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="bypass" >
  <path class="bypass" d="M617,17 L 625,17 Q 632,17 632,32 L 632,94 Q 632,109 617,109 L 558,109 L 543,109" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon class="bypass" points="543,109 554,105 554,113" style="fill:rgb(0,0,0)"/>
 </g>
 <path d="M543,109L310,109" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <g >
  <path d="M310,109 L 20,109 Q 5,109 5,124 L 5,132 Q 5,147 17,147 L 28,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="28,147 17,151 17,142" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="rule optional literal identifier"  id="SN">
  <path class="rule optional literal identifier" d="M43,162L140,162A15 15 0 0 0 155 147A15 15 0 0 0 140 132L43,132A15 15 0 0 0 28 147A15 15 0 0 0 43 162Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="rule optional literal identifier" x="92" y="147" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">schema-name</text>
 </g>
 <g >
  <path d="M155,147L178,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="178,147 166,151 166,142" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="token glyph optional"  id="DOT">
  <path class="token glyph optional" d="M193,162A15 15 0 0 0 208 147A15 15 0 0 0 193 132A15 15 0 0 0 178 147A15 15 0 0 0 193 162Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="token glyph optional" x="193" y="147" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">.</text>
 </g>
 <g >
  <path d="M208,147L244,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="244,147 233,151 233,142" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="rule literal identifier always"  id="TN">
  <path class="rule literal identifier always" d="M259,162L334,162A15 15 0 0 0 350 147A15 15 0 0 0 334 132L259,132A15 15 0 0 0 244 147A15 15 0 0 0 259 162Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="rule literal identifier always" x="297" y="147" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">table-name</text>
 </g>
 <g class="bypass" >
  <path class="bypass" d="M5,132 L 5,162 Q 5,177 20,177 L 77,177 L 92,177" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon class="bypass" points="92,177 80,181 80,173" style="fill:rgb(0,0,0)"/>
 </g>
 <path d="M92,177 L 205,177 Q 220,177 220,162 L 220,162 Q 220,147 227,147 L 235,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <g >
  <path d="M350,147 L 357,147 Q 365,147 365,162 L 365,207 Q 365,222 350,222 L 208,222 L 193,222" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="193,222 205,218 205,227" style="fill:rgb(0,0,0)"/>
 </g>
 <g >
  <path d="M193,222 L 20,222 Q 5,222 5,237 L 5,245 Q 5,260 17,260 L 28,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="28,260 17,265 17,256" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="token glyph choice-of always"  id="LP">
  <path class="token glyph choice-of always" d="M43,275A15 15 0 0 0 59 260A15 15 0 0 0 43 245A15 15 0 0 0 28 260A15 15 0 0 0 43 275Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="token glyph choice-of always" x="43" y="260" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">(</text>
 </g>
 <g >
  <path d="M59,260L95,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="95,260 83,265 83,256" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="rule always"  id="CD">
  <path class="rule always" d="M95,275L199,275L199,245L95,245Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="rule always" x="147" y="260" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">column-def</text>
 </g>
 <g class="rule optional"  id="TC">
  <path class="rule optional" d="M253,313L399,313L399,283L253,283Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="rule optional" x="326" y="298" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">table-constraint</text>
 </g>
 <g >
  <path d="M399,298L416,298" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="399,298 410,294 410,302" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="token glyph optional"  id="C2">
  <path class="token glyph optional" d="M431,313A15 15 0 0 0 446 298A15 15 0 0 0 431 283A15 15 0 0 0 416 298A15 15 0 0 0 431 313Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="token glyph optional" x="431" y="298" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">,</text>
 </g>
 <g class="token glyph always"  id="RP">
  <path class="token glyph always" d="M503,275A15 15 0 0 0 518 260A15 15 0 0 0 503 245A15 15 0 0 0 488 260A15 15 0 0 0 503 275Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="token glyph always" x="503" y="260" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">)</text>
 </g>
 <g >
  <path d="M518,260L553,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="553,260 541,265 541,256" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="rule optional"  id="TO">
  <path class="rule optional" d="M553,275L674,275L674,245L553,245Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="rule optional" x="613" y="260" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">table-options</text>
 </g>
 <g class="token glyph optional"  id="C1">
  <path class="token glyph optional" d="M147,313A15 15 0 0 0 162 298A15 15 0 0 0 147 283A15 15 0 0 0 132 298A15 15 0 0 0 147 313Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="token glyph optional" x="147" y="298" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">,</text>
 </g>
 <g >
  <path d="M199,260 L 207,260 Q 214,260 214,275 L 214,283 Q 214,298 199,298 L 177,298 L 162,298" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="162,298 174,294 174,302" style="fill:rgb(0,0,0)"/>
 </g>
 <path d="M132,298 L 87,298 Q 71,298 71,283 L 71,275 Q 71,260 77,260 L 83,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <g >
  <path d="M199,260L235,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="235,260 224,265 224,256" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="bypass" >
  <path class="bypass" d="M235,260L488,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon class="bypass" points="488,260 476,265 476,256" style="fill:rgb(0,0,0)"/>
 </g>
 <g >
  <path d="M446,260 L 458,260 Q 469,260 469,275 L 469,283 Q 469,298 458,298 L 446,298" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="446,298 458,294 458,302" style="fill:rgb(0,0,0)"/>
 </g>
 <path d="M253,298 L 246,298 Q 238,298 238,283 L 238,275 Q 238,260 250,260 L 261,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <g >
  <path d="M518,260 L 526,260 Q 533,260 533,245 L 533,230 Q 533,215 548,215 L 598,215 L 613,215" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="613,215 602,219 602,211" style="fill:rgb(0,0,0)"/>
 </g>
 <g >
  <path d="M613,215 L 659,215 Q 674,215 689,215 L 693,215 L 708,215" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="708,215 697,219 697,211" style="fill:rgb(0,0,0)"/>
 </g>
 <circle cx="712" cy="215" r="3.6" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
 <g >
  <path d="M674,260 L 681,260 Q 689,260 689,245 L 689,230 Q 689,215 699,215 L 708,215" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="708,215 697,219 697,211" style="fill:rgb(0,0,0)"/>
 </g>
 <g >
  <path d="M350,147L440,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="440,147 428,151 428,142" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="choice-of always"  id="AS">
  <path class="choice-of always" d="M455,162L459,162A15 15 0 0 0 474 147A15 15 0 0 0 459 132L455,132A15 15 0 0 0 440 147A15 15 0 0 0 455 162Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="choice-of always" x="457" y="147" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">AS</text>
 </g>
 <g >
  <path d="M474,147L497,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="497,147 485,151 485,142" style="fill:rgb(0,0,0)"/>
 </g>
 <g class="rule always" >
  <path class="rule always" d="M497,162L601,162L601,132L497,132Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <text class="rule always" x="549" y="147" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">select-stmt</text>
 </g>
 <g >
  <path d="M601,147L637,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
  <polygon points="637,147 626,151 626,142" style="fill:rgb(0,0,0)"/>
 </g>
 <path d="M637,147 L 674,147 Q 689,147 689,162 L 689,200 Q 689,215 696,215 L 704,215" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
</svg>

GitHub's rendering doesn't support hover elements, which is probably a security measure