this can easily be copied into a markdown document

svg_preset.html

<style type="text/css">
/* colors (e.g. for text)*/
.c1  { fill-opacity: 1.00; fill: #1f77b4; }
.c2  { fill-opacity: 1.00; fill: #ff7f0e; }
.c3  { fill-opacity: 1.00; fill: #2ca02c; }
.c4  { fill-opacity: 1.00; fill: #d62728; }
.c5  { fill-opacity: 1.00; fill: #9467bd; }
.c6  { fill-opacity: 1.00; fill: #8c564b; }
.c7  { fill-opacity: 1.00; fill: #e377c2; }
.c8  { fill-opacity: 1.00; fill: #7f7f7f; }
.c9  { fill-opacity: 1.00; fill: #bcbd22; }
.c10 { fill-opacity: 1.00; fill: #17becf; }
.c11 { fill-opacity: 1.00; fill: #1f77b4; }
.c12 { fill-opacity: 1.00; fill: #ff7f0e; }
.c13 { fill-opacity: 1.00; fill: #2ca02c; }
/* borders / stroke */
.b1,  .s1  { stroke-width: 2; stroke: #1f77b4; }
.b2,  .s2  { stroke-width: 2; stroke: #ff7f0e; }
.b3,  .s3  { stroke-width: 2; stroke: #2ca02c; }
.b4,  .s4  { stroke-width: 2; stroke: #d62728; }
.b5,  .s5  { stroke-width: 2; stroke: #9467bd; }
.b6,  .s6  { stroke-width: 2; stroke: #8c564b; }
.b7,  .s7  { stroke-width: 2; stroke: #e377c2; }
.b8,  .s8  { stroke-width: 2; stroke: #7f7f7f; }
.b9,  .s9  { stroke-width: 2; stroke: #bcbd22; }
.b10, .s10 { stroke-width: 2; stroke: #17becf; }
.b11, .s11 { stroke-width: 2; stroke: #1f77b4; }
.b12, .s12 { stroke-width: 2; stroke: #ff7f0e; }
.b13, .s13 { stroke-width: 2; stroke: #2ca02c; }
/* backgrounds */
.bg1  { fill-opacity: 1.00; fill: #c7ddec; }
.bg2  { fill-opacity: 1.00; fill: #ffdfc2; }
.bg3  { fill-opacity: 1.00; fill: #cae7ca; }
.bg4  { fill-opacity: 1.00; fill: #f4c9c9; }
.bg5  { fill-opacity: 1.00; fill: #e4d9ee; }
.bg6  { fill-opacity: 1.00; fill: #e2d4d2; }
.bg7  { fill-opacity: 1.00; fill: #f8ddef; }
.bg8  { fill-opacity: 1.00; fill: #dfdfdf; }
.bg9  { fill-opacity: 1.00; fill: #eeeec7; }
.bg10 { fill-opacity: 1.00; fill: #c5eef3; }
.bg11 { fill-opacity: 1.00; fill: #c7ddec; }
.bg12 { fill-opacity: 1.00; fill: #ffdfc2; }
.bg13 { fill-opacity: 1.00; fill: #cae7ca; }
.tbg1  { fill-opacity: 0.25; fill: #1f77b4; }
.tbg2  { fill-opacity: 0.25; fill: #ff7f0e; }
.tbg3  { fill-opacity: 0.25; fill: #2ca02c; }
.tbg4  { fill-opacity: 0.25; fill: #d62728; }
.tbg5  { fill-opacity: 0.25; fill: #9467bd; }
.tbg6  { fill-opacity: 0.25; fill: #8c564b; }
.tbg7  { fill-opacity: 0.25; fill: #e377c2; }
.tbg8  { fill-opacity: 0.25; fill: #7f7f7f; }
.tbg9  { fill-opacity: 0.25; fill: #bcbd22; }
.tbg10 { fill-opacity: 0.25; fill: #17becf; }
.tbg11 { fill-opacity: 0.25; fill: #1f77b4; }
.tbg12 { fill-opacity: 0.25; fill: #ff7f0e; }
.tbg13 { fill-opacity: 0.25; fill: #2ca02c; }
text {
  text-anchor: middle;
  alignment-baseline: central;
  font-family: Avenir Next, Avenir, sans-serif;
  font-size: 11pt;
}
svg {
  border: 1px #999 solid;
  margin: auto;
}
</style>

<svg width="450" height="300">
  <!-- order is important. who comes first will be overdrawn. -->
  <line x1="100" y1="100" x2="300" y2="200" class="s3" />
  <circle cx="100" cy="100" r="50" class="bg1" />
  <text x="100" y="100" class="c1">Box 1</text>
  <rect x="250" y="150" width="100" height="100" class="bg2 b2" />
  <text x="300" y="190" class="c2">Hello!</text>
  <text x="300" y="210" class="c2">AAA</text>
  <circle cx="375" cy="125" r="50" class="tbg3" />
</svg>