I want multiple shapes in single html document. when I am trying, it leaves much more space between circle and rectangle????

Question

I want multiple shapes in single html document. when I am trying, it leaves much more space between circle and rectangle for example?

<svg width="2000" height="2000">
<circle cx="300" cy="100" r="100" fill="green" style=stroke:black;/>
</svg>
<svg width="2000" height="2000">
<text width="300" height="100" x="100" y="20" fill="red"/>
</svg>

try this, there is lot of space bw circle and rectangle. how to code if I want rect right after circle?????

Answer 1

You are drawing shapes into two different <svg> containers ^^ that's like you put first image with a first shape, and below, a second image with the second shape...

You want to draw the two shapes in the same 'box':

<svg width="2000" height="2000">
<circle cx="300" cy="100" r="100" fill="green" style=stroke:black;/>
<text width="300" height="100" x="100" y="20" fill="red"/>
</svg>

Another thing to good understand is the particular coordinate system of <svg>, and particular use of 'width', 'height' and 'viewport' attributes:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Answer 2

thanks bro appreciate it