Svg Shapes With Fill, Stroke And Strokewidth

I have a polygon shape with border, stroke-width and fill colors. I am looking for multiple polygon shapes; below is one of them with 4 edges. Out of which 3 edges just have stroke

Solution 1:

A combination of paths and rectangles will likely be what you end up with. I find it easier to fill explicitly because it is easier to manipulate directly with JavaScript if needed.

Here is one solution. I find when working SVG keeping things as simple as possible will make your life much easier.

<svgxmlns="http://www.w3.org/2000/svg"xmlns:se="http://svg-edit.googlecode.com"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns:cc="http://creativecommons.org/ns#"xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"width="777"height="480"style=""><title>my vector image</title><gclass="currentLayer"style=""><title>Layer 1</title><rectfill="#4a90d6"stroke="#222222"style="color: rgb(0, 0, 0);"stroke-width="2"stroke-linejoin="round"stroke-dashoffset=""fill-rule="nonzero"id="svg_1"x="8"y="8"width="13"height="74"class="selected"/><pathfill="#4a90d6"fill-opacity="1"stroke="#222222"stroke-opacity="1"stroke-width="2"stroke-dasharray="none"stroke-linejoin="round"stroke-linecap="round"stroke-dashoffset=""fill-rule="nonzero"opacity="1"marker-start=""marker-mid=""marker-end=""d="M 20.8456 8.25316 L 87.1747 7.74683"id="svg_5"class="selected"/><pathfill="#4a90d6"fill-opacity="1"stroke="#222222"stroke-opacity="1"stroke-width="2"stroke-dasharray="none"stroke-linejoin="round"stroke-linecap="round"stroke-dashoffset=""fill-rule="nonzero"opacity="1"marker-start=""marker-mid=""marker-end=""d="M 21.0987 81.924 L 119.073 80.4051"id="svg_9"class="selected"/><pathfill="#4a90d6"fill-opacity="1"stroke="#222222"stroke-opacity="1"stroke-width="2"stroke-dasharray="none"stroke-linejoin="round"stroke-linecap="round"stroke-dashoffset=""fill-rule="nonzero"opacity="1"marker-start=""marker-mid=""marker-end=""d="M 86.162 6.98734 L 118.061 79.6456"id="svg_14"class="selected"/></g></svg>