svg rect to path

svg rect to path

by vrluckyin India

HTML

<!-- 
This elephant is a polygon, but to convert the
polygon into a path, we can run the corresponding
javascript then copy the copy the output from our dev tools. Pretty useful!
-->

<svg width="800" height="900" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(1)">    
    <path d="M10 20 H 90 V 110 H 10 L 10 20"/>
    
  <circle cx="10" cy="20" r="2" fill="red"/>
  <circle cx="90" cy="20" r="2" fill="blue"/>
  <circle cx="90" cy="110" r="2" fill="green"/>
  <circle cx="10" cy="110" r="2" fill="yellow"/>
  
  <path d="M200 300 h 200 v 100 h -200 Z" fill="transparent" stroke="black"/>
  
   <path d="M239 120 h 320 v 80 h -319 Z" fill="transparent" stroke="black" />

  <path d="M239 240 h 320 v 80 h-239 Z" fill="transparent" stroke="black" />
  
  <path d="M169 480 h 230 v 80 h-169480 Z" fill="transparent" stroke="black"></path>
  </g>
</svg>