Build the SVG Renderer

00:00 Build the SVG Renderer. Your scalable vector graphics renderer will take the square size and line width in pixel coordinates as input parameters. At the same time, it will assume sensible defaults so that you don’t have to fiddle with numbers to get started.

00:36 The offset is the distance from the top and left edge of the drawing space, which takes your line width into account. Without it, a line starting at the top left corner would be drawn at the very edge of the canvas and partially out of view.

00:50 The renderer returns a lightweight SVG object, which wraps the textual XML content.

01:32 Later, you’ll add code in the SVG wrapper class to allow for viewing the rendered maze in your web browser. Rendering an SVG image boils down to decomposing the maze and its optional solution into geometric primitives, which you turn into XML tags mashed together into a string.

02:14 First, you calculate the SVG dimensions based on the size of your maze and its squares. You then call a helper method to get the body of the <svg> tag, which in turn calls four other methods that you’ll implement shortly.

03:15 The body of the S V G consists of a marker definition, which you’ll use to end the line representing the solution with an arrow pointing to the exit. The definition is followed by a rectangle occupying the entire view to provide a white background. Next, you render the individual squares and overlay them with a solution if supplied.

03:40 In the next section of the course, you’ll code the next parts of the renderer to render the individual squares and optionally overlay them with the solution.