Let's look at a more complicated Inkscape document that is populated with a web design. Then we can discuss the screen basics, the SVG code, and understand how we might be able to edit it for our use. The following screenshot shows the open Inkscape document and the associated SVG code, side-by-side.
As you select items in the SVG code, you will see that Inkscape selects the items in the design (and vice versa). Also, if you were to edit any of the object properties, all changes would happen in real time on the canvas. But let's not get ahead of ourselves. First we need to understand the basics of the XML Editor screen: