SVG is a powerful vector graphics format that works particularly well for icons and other line artwork in web pages. This is my attempt at documenting what I understand of SVG and its component elements and children.
It is important for me to know how SVG works, even if there are tools that will generate the SVG for me.
The W3C began development of SVG in 1999 and released as a W3C specification in 2001. It is an XML-based vector image format for two-dimensional graphics and supports interactivity and animation.
SVG images and their behaviors are defined in XML text files and can be best thought of as a set of instructions for drawing shapes and defining behavior. The instructions in SVG read something like this: “Go to such-and-such coordinate; draw a rectangle that is so tall and so wide.
The fact that it is text means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as drawing software.
Let's look at the biggest source of confusion for me: viewports and viewBoxes
## Viewport versus viewBox
The basic SVG canvas element defines the viewport of the image with the origin at the top left corner, point (0, 0), the x-axis points towards the right, and the positive y-axis points down. One unit in the initial coordinate system equals one “pixel” in the viewport.
To create an 800px by 600px SVG element use the following code:
```svg
```
It will produce an SVG element like the one below, captured from Sara Soueidan's [Interactive SVG Coordinate System demo](https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/)
Size attributes are optional. We'll look at how to manage to size and control the aspect ratio of SVG images later in the post. One thing I'm not sure about is whether we need the dimensions to prevent unwanted reflow of the page… more research needed there.
In addition to deciding what size you want your SVG to be, you're also going to have to decide how you want your graphic to scale to fit that size.
## Viewbox
One of the hardest areas for me to wrap my head around is the fact that we can define our own viewports inside the `` element using the `viewBox` attribute of the SVG element and how it interacts with the SVG element dimensions and the `preserveAspectRatio`.
The viewBox is an attribute of the `
