Scalable vector graphics | SoloLearn: Learn to code for FREE!


Scalable vector graphics

I have two SVG elements in my code, square and circle, the issue, after coding they seem to overlap when displayed on the web, can anyone help me on how to separate these SVG elements, the code are thus: <!DOCTYPE html> <html> <head></head> <body> <svg align ="center"width="2000" height="2000"> <circle cx="80" cy="80" r="50" fill="violet" /> <rect width="300" height="100" x="20" y="20" fill="green" /> </svg> </body> </html>

1/24/2018 9:47:38 AM

James Abiola Bisiriu

2 Answers

New Answer


Use the x and y coordinates of either the circle or rectangle to position them the way you like. Changing the value of attribute y may move the rectangle downwards/upwards depending upon the value.