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
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.