A Scalable Vector Graphics (SVG) file contains directives written in Extensible Markup Language (XML) which define a two-dimensional vector image. XML is extremely fussy: it is case-sensitive and all tags must either self-close or contain matching closing tags. A stand-alone SVG file (SVG instructions can also be embedded directly in HTML code) must begin with an XML declaration:
<?xml version="1.0"?>
<svg>
An SVG file must have the <svg> root element which contains all of the instructions for drawing the image:
<svg xmlns="http://www.w3.org/2000/svg"> ..... </svg>
ATTENTION! If the SVG code is embedded within an HTML document, then the namespace declaration is unnecessary and you can use just <svg> instead.
If the file contains internal links, then the <svg> tag must also define the xlink namespace.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
ATTENTION! This is true of SVG version 1.1, but version 2 has done away with the xlink namespace so this second namespace declaration is no longer required.
The <svg> tag has other possible attributes, including those which define the size of the SVG canvas and how the image should be scaled.
<svg width="absolutewidth" height="absoluteheight" viewBox="xmin ymin canvaswidth canvasheight" preserveAspectRatio="alignment [meet|slice]" xmlns="http://www.w3.org/2000/svg">
width, height
The width attribute gives the horizontal dimension and the height attribute gives the vertical dimension of the canvas. The values of absolutewidthand absoluteheight may be numbers or they may be numbers with units such as em or cm or in. If no units are specified, they are taken to mean pixels (px). These attributes may be used on their own or in conjunction with the viewBox attribute.
viewBox
The viewBox attribute defines the coordinate system underlying the canvas. The values xmin and ymin define the origin of the canvas which is the upper left corner of the canvas. The canvaswidth is measured to the right and the canvasheight is measured downwards from the point (xmin,ymin). The horizontal or x-axis is the same as the Cartesian coordinate system we learned in school, with positive x values to the right and negative x values to the left. However, the vertical or y-axis is reversed, with positive y values going down and negative y values going up.
preserveAspectRatio
The preserveAspectRatio attribute defines how to scale the image if the viewport (for instance, the size of your browser window) has different dimensions to the image. It is only used if you define a viewBox. It can take up to two values, with the first being one of the following:
| Value | Scaling | Alignment |
|---|---|---|
| none | non-uniform | |
| xMinYMin | uniform | Align xmin with the minimum x value of the viewport. Align ymin with the minimum y value of the viewport. |
| xMinYMid | uniform | Align xmin with the minimum x value of the viewport. Align the midpoint y value of the viewBox with the midpoint y value of the viewport. |
| xMinYMax | uniform | Align xmin with the minimum x value of the viewport. Align ymin + canvasheight with the maximum y value of the viewport. |
| xMidYMin | uniform | Align the midpoint x value of the viewBox with the midpoint x value of the viewport. Align ymin with the minimum y value of the viewport. |
| xMidYMid | uniform | Align the midpoint x value of the viewBox with the midpoint x value of the viewport. Align the midpoint y value of the viewBox with the midpoint y value of the viewport. |
| xMidYMax | uniform | Align the midpoint x value of the viewBox with the midpoint x value of the viewport. Align ymin + canvasheight with the maximum y value of the viewport. |
| xMaxYMin | uniform | Align xmin + canvaswidth with the maximum x value of the viewport. Align ymin with the minimum y value of the viewport. |
| xMaxYMid | uniform | Align xmin + canvaswidth with the maximum x value of the viewport. Align the midpoint y value of the viewBox with the midpoint y value of the viewport. |
| xMaxYMax | uniform | Align xmin + canvaswidth with the maximum x value of the viewport. Align ymin + canvasheight with the maximum y value of the viewport. |
Optionally, the preserveAspectRatio attribute may take a second value of meet or slice. The default value is meet.
| Value | Aspect Ratio | Description |
|---|---|---|
| meet | preserved | The entire viewBox is visible in the viewport and the viewBox is scaled up as much as possible. |
| slice | preserved | The entire viewport is covered by the viewBox and the viewBox is scaled down as much as possible. |
Example
In the following image, the black lines define the zero points (axes) of the coordinate system of the SVG canvas. The origin of the canvas (xmin,ymin) is shown by the blue dot in the upper left corner and the zero point (0,0) of the coordinate system is shown by the red dot. These two points do not have to coincide. The yellow quadrant is where both x and y are negative. The purple quadrant is where x is positive and y is negative. The white quadrant is where both x and y are positive. The green quadrant is where x is negative and y is positive.
The <svg> tag for this image looks something like this:
<svg width="400px" height="400px" viewBox="-20 -30 100 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
which gives the origin (upper left corner) of the canvas at the point (−20,−30) with a width of 100 units and a height of 100 units. Therefore, the x-values range from −20 to +80 and the y-values range from −30 to +70. The absolute size of the canvas is 400 pixels by 400 pixels (so every “unit” on the canvas is equal to 4 pixels). If it is necessary to scale the image, the scaling will be uniform and both xmin and ymin will be aligned with the minimum x- and y-values respectively of the viewport (ie, your browser window). There are no internal links so it is not necessary to define the xlink namespace.
Other attributes, such as baseProfile and version, are deprecated and should no longer be used.
<title>
The <title> element is a descriptive element and is not rendered by a browser. It provides a brief name for the content of the image and is usually placed after the <svg> element.
<title>Title of image</title>
<desc>
The <desc> element is a descriptive element and is not rendered by a browser. It provides a more detailed explanation of the image and is usually placed after the <title> element.
<desc>Description of image</desc>
<g>
Like <svg>, the group element <g> is a container element. It is used to group together related graphical elements.
<g id="unique identifier" [common attributes]> ..... </g>
The common attributes to the group might be colour or opacity or font size or some kind of transformation. Or the <g> tag may used simply to group elements which logically belong together. An SVG image of a star chart might have a group of constellation lines, a group of deep sky objects, a group of stars and a group of exterior items such as a title or a caption or a legend.