SVG Syntax
SVG Syntax codepen practice pagebasic Syntax
svg element
Let’s start with the <svg> element, which is the container for the svg code.
1
2
<svg>
</svg>viewport
Now we’ll define the viewport, which is just the width and height of the svg on the page that contains it. If the viewport is not defined, the svg will scale to fit whatever contains it.
width="<width>" height="<height>"
1
2
<svg width="500" height="500">
</svg>viewbox
Next we’ll define the viewbox, which is the user-defined coordinate system of the viewport. SVGs use a coordinate system for the placement of visual elements. The viewbox defines that coordinate system
The value for viewbox consists of four numbers: min-x, min-y, width, and height
viewbox="<min-x> <min-y> <width> <height>"
1
2
<svg width="500" height="500" viewbox="0 0 500 500">
</svg>
min-x, min-y
We'll talk more about the min-x and min-y values below, but for now just know that they represent the origin point of the svg's coordinate system, and are generally set to zero.
width and height
The important thing to remember about the width and height values of the viewbox is that they have nothing to do with the actual width and height of the svg. The actual width and height is set by the width and height attributes.
They only serve to define the coordinate space that will be used by the svg elements.
Example: here’s a 400 x 400 rectangle in an svg with a viewbox size of 500 x 500. (We'll get into how to draw shape like circles and rectangles next chapter)
1
2
3
4
5
6
<svg
width="500"
height="500"
viewbox="0 0 500 500">
<rect x="50" y="50" width="400" height="400" />
</svg>
Here’s the same 400x400 rectangle, except this time I’ve changed the viewbox size to 1000 x 1000
1
2
3
4
5
6
<svg
width="500"
height="500"
viewbox="0 0 1000 1000">
<rect x="50" y="50" width="400" height="400" />
</svg>
aspect ratio
But what if the aspect ratio of the viewbox is different than that of the viewport? For example, what if the viewport is a 500x500 square but the viewbox is a 1000x500 rectangle?
1
2
3
4
5
<svg
width="500"
height="500"
viewbox="0 0 1000 500">
</svg>That scenario is handled with the preserveAspectRatio attribute. It can be kind of confusing, and a more detailed discussion of this attribute can be found in the Aspect Ratio section. For now we’re going to keep the aspect ratio of the viewport and viewbox the same.
moving min-x and min-y
As stated above, the min-x and min-y values represent the origin point of the svg - the minimum x and y values visible in the svg coordinate space.
The min-x and min-y values are generally set to 0, as below:
1
2
3
4
5
<svg
width="500"
height="500"
viewbox="0 0 500 500">
</svg>
Let’s draw a rectangle and put it at the 0,0 point.
1
2
3
4
5
6
<svg
width="500"
height="500"
viewbox="0 0 500 500">
<rect x="0" y="0" width="250" height="250" />
</svg>
Now lets update the min-x and min-y to: -100, -100. Note that we haven’t changed the position of the rectangle at all. Only the start position of the viewbox coordinate space has changed.
1
2
3
4
5
6
<svg
width="500"
height="500"
viewbox="-100 -100 500 500">
<rect x="0" y="0" width="250" height="250" />
</svg>
xmlns (namespace)
The final attribute we’ll talk about is the namespace, which is only used with svg files, and not inline svgs. It essentially tells the browser that everything inside the file is an SVG, so that the browser knows what to do with it. Again, it’s only needed for svg files, and not inline svgs, so we won’t be discussing this during the course.
xmlns="http://www.w3.org/2000/svg"
1
<svg viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"></svg>