index.html

<html>
    <head>
        <style>
            svg{
                border: 1px solid black;
                height: 600px;
                width: 400px;
            }
            .center{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!-- <button onclick="javascript:setTool('r-rect')">Create</button> -->
        <h1 class="center">Riot SVG</h1>
        <div style="float: left">
            <h2>RIOT SVG </h2>
            <r-svg  >
                <rect x="10" y="10" width="256" height="64" rx="5" ry="5" draggable="true" fill="red"></rect>
                <g name="blue" data-is="r-rect" x="10" y="80" width="256" height="64" rx="5" ry="5" draggable="true" resizable="true" fill="blue"></g>
                <g name="green" data-is="r-rect" x="30" y="330" width="256" height="64" rx="5" ry="5" draggable="true" fill="green"></g>
                <g name="yellow" data-is="r-rect" x="70" y="150" width="125" height="50" rx="5" ry="5"  fill="yellow"></g>
    
                <g>
                    <g name="pink" data-is="r-rect" x="70" y="430" width="125" height="50" rx="5" ry="5"  fill="pink"  draggable="true" resizable="true" ></g>
                    <g name="white" data-is="r-rect" x="5" y="20" width="105" height="45" rx="5" ry="5"  fill="brown" draggable="true" resizable="true"></g>
                </g>
            </r-svg>
        </div>

        <div style="float: left">
            <h2>HTML SVG </h2>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <rect x="10" y="10" width="256" height="64" rx="5" ry="5" draggable="true" fill="red"></rect>
                <g name="blue" data-is="r-rect" x="10" y="80" width="256" height="64" rx="5" ry="5" draggable="true" resizable="true" fill="blue"></g>
                <g name="green" data-is="r-rect" x="30" y="430" width="256" height="64" rx="5" ry="5" draggable="true" fill="green"></g>
                <g name="yellow" data-is="r-rect" x="70" y="150" width="125" height="50" rx="5" ry="5"  fill="yellow"></g>

                <g>
                    <g>
                        <g name="pink" data-is="r-rect" x="70" y="430" width="125" height="50" rx="5" ry="5"  fill="pink"  draggable="true" resizable="true" ></g>
                        <g name="white" data-is="r-rect" x="5" y="20" width="105" height="45" rx="5" ry="5"  fill="brown" draggable="true" resizable="true"></g>
                    </g>
                </g>
            </svg>
        </div>

        <div style="float: left">
                <h2>HTML SVG </h2>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <rect x="10" y="10" width="256" height="64" rx="5" ry="5" draggable="true" fill="red"></rect>
                    <g name="blue" data-is="r-rect" x="10" y="80" width="256" height="64" rx="5" ry="5" draggable="true" resizable="true" fill="blue"></g>
                    <g name="green" data-is="r-rect" x="30" y="430" width="256" height="64" rx="5" ry="5" draggable="true" fill="green"></g>
                    <g name="yellow" data-is="r-rect" x="70" y="150" width="125" height="50" rx="5" ry="5"  fill="yellow"></g>
    
                    <g>
                        <g>
                            <g name="pink" data-is="r-rect" x="70" y="430" width="125" height="50" rx="5" ry="5"  fill="pink"  draggable="true" resizable="true" ></g>
                            <g name="white" data-is="r-rect" x="5" y="20" width="105" height="45" rx="5" ry="5"  fill="brown" draggable="true" resizable="true"></g>
                        </g>
                    </g>
                </svg>
            </div>

        <script src="js/external/riot.min.js"></script>
        <script src="js/elements.js"></script>
        <script>
            riot.mount("*");
            var toolName = "";
            function setTool(name){
                toolName = name;
            }
        </script>
    </body>
</html>