0

I need to generate an SVG image of a pill box, like so:

Pill Box

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.

Improve this question

1 Answer 1

Reset to default
2

20 second google search --> HERE <-- change the rect width to match the height and it's a circle. Therefore, dynamically, you'd merely need to alter the width property to move from a circle to a pill shape.

a circle:

<svg version="1.1" width="1000" height="600" viewBox="0 0 16 9">
  <rect x="1" y="1" width="2" height="2" fill="silver" stroke="black" stroke-width="0.1" ry="1" rx="1"/>
</svg>

a pill:

<svg version="1.1" width="1000" height="600" viewBox="0 0 16 9">
  <rect x="1" y="1" width="4" height="2" fill="silver" stroke="black" stroke-width="0.1" ry="1" rx="1"/>
</svg>

SVG code from "deadlygeek" at CodePen

Improve this answer
3
  • What search terms do you use, so I get an effective search next time? I tried a number of searches and didn't get anything.
    – webstackdev
    Jun 4, 2020 at 12:10
  • I used ---- "convert a circle to a pill shape SVG" -- the link above was the fourth result.
    – Scott
    Jun 4, 2020 at 17:37
  • Thanks. The terms I used were several variations of "create pill box svg", which all bring up first 100+ results of "Free icon downloads!". I didn't know what shape to convert from to a pill box - path? Two circles, lines, masks, delete nodes?
    – webstackdev
    Jun 5, 2020 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.