はてなでSVG画像を入れる

svg html

はてなはMarkdownでもHtmlは書いて表示することができる。 SVGはHtmlの規格なのでただ書くだけで結果が表示される。

このソースは

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="-10,0,200,200">
  <defs></defs>
  <circle cx="77.474" cy="111.072" r="80" stroke="green" stroke-width="8" fill="yellow"></circle>
  <rect x="23.046" y="99.727" width="105.375" height="64.141" style="fill-rule: evenodd; paint-order: stroke; stroke-miterlimit: 11; stroke: rgb(218, 85, 85); stroke-width: 6px; fill: rgba(255, 255, 246, 0.9);"></rect>
  <circle style="" cx="105.895" cy="70.965" r="17.948"></circle>
  <circle style="" cx="48.244" cy="71.346" r="17.948"></circle>
</svg>

です。

オンライン SVG エディターの boxySVG (https://boxy-svg.com/)で手書きで書いて、Elementsボタンで表示されるコードをそのまま貼り付ける。 widthとheightは はてなのmarkdown上で加えました。