I need to generate an SVG image of a pill box, like so:
I know how to draw a circle with the <ellipse>
element, how to draw a <path>
element with the M
(moveto), L
(lineto), and Z
(closepath) attributes, and how to fill a shape with the style="fill:myColor;"
attribute. What I need to do though is to start with a circle and be able to dynamically stretch it via code.
The usage is a circle over a shopping cart that will show the number of items in the user's shopping cart. I think the right way for me to do this is by defining all of the numbers in <defs>
elements, and then dynamically including the numbers I need using <use>
elements and setting the line lengths.
Can anyone help me on drawing this shape in code? What I get from Inkscape is multiple overlapping shapes but I'm not really very good with vector drawing programs. I think to get a code sample from Inkscape that I could examine, I'd need to break and rejoin the shapes, but I'm hoping there's a simple way or tag to just generate an arc and join them into one path.