# Scalable Vector Graphic (SVG)

#### svg.html

### About SVG

SVGs are part of the HTML5 standard and provide us with the means of creating graphical elements that can be displayed in the browser.
A main concept about SVGs is that we do not define our graphical elements pixel by pixel but rather what element we want, e.g. a circle, and what properties it should have, e.g. size, color,... One advantage of this approach is that resizing of the elements does not decrease their quality.

### Coordinate System

The coordinate system of SVGs has its origin at the top left corner and has its x axis to the right and its y axis downwards.

### Order

Another important thing to note is that the depth ordering of elements is defined by the order in which they are drawn, superimposing the new over the old ones.

### Creating a simple SVG

Look at the source code. The following graphic is simpy created using HTML-tags. You first create an svg, add width and height, and inside of it you put the elements you need. Later in D3, we will do this dynamically.

### More elements

You can use a lot of different elements in your SVG, for example:

- rect - Rectangles
- line - Line
- path - Path
- text - Text
- g - Container to group SVG elements
- circle - Circle
- polygon - Polygon

List of all SVG elements

### More about SVG

SVG Tutorial on www.w3schools.com
List of all SVG elements