SVG Cheat Sheet

For an excellent and detailed discussion of SVG coordinates, go here. This is my condensed version.

User Coordinates

These are the abstract coordinates you use to draw objects. (0,0) is in the upper left corner. X increases to the right. Y increases as you move down. Objects contained inside <svg></svg> are in user coordinates.

Viewport

The key word here is port. This is the part of your screen that is a port into viewing the graphic. (0,0) is in the upper left corner. X increases to the right. Y increases as you move down. The size of the port is set in the svg tag. It’s in screen units, default is pixels:

<!-- the viewport will be 800px by 600px -->
<svg width="800" height="600">
    <!-- SVG content drawn onto the SVG canvas -->
</svg>

viewBox

This is a box in the user coordinates that is mapped to the Viewport. Here is how it is defined:

<!-- The viewbox in this example is equal to the viewport, but it can be different -->
<svg width="800" height="600" viewbox="x y width height">
    <!-- SVG content drawn onto the SVG canvas -->
</svg>

If the aspect ratio of the Viewport and the viewBox are the same, then the contents of the viewBox are scaled to fit the Viewport. Note, this can be used to zoom-in and zoom-out on the graphic. Use x and y to shift the view. Note, positive x makes the image appear to shift to the LEFT. Similarly for y.

Aspect Ratios

If aspect ratios of the Viewport and viewBox are not the same, then more parameters need to be set to define how the viewBox maps to the Viewport. Here is an example:

<svg width="800" height="600" viewbox="x y width height" preserveAspectRatio = "xMinYMin slice">

meet = the entire viewBox is visible in the Viewport. This is the default

slice = scale the viewBox such that one dimension is bigger than the Viewport and the other dimension matches the Viewport, then slice off the content that is outside the Viewport.

In either meet or slice, it is still possible to shift the scaled viewBox inside the Viewport. xMinYmin means that the x min and ymin coordinates line up. Options are [Min, Mid, Max]. For example xMidyMid means the middle of the viewBox will map to the middle of the Viewport.

g Tag

The <g></g> tag is used to group together elements in a drawing. A group can also be thought of as a layer. One reason to use groups is to apply geometric transformations on the group. For example:

<g id="parrot" transform="rotate(45 50 50)" x="0" y="0">
    <!-- elements making up a parrot shape -->
</g>

Transformations

Options are shift, scale, skew and rotate. There is also and option to apply a transformation matrix. All transformations occur in user coordinates.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s