# 9.1.3. SVG File Format¶

## 9.1.3.2. SVG Coordinate System¶

SVG uses the screen coordinate system where the X axis points towards the right direction and the Y axis points towards the bottom direction, thus the origin is at the upper left-hand corner of the drawing frame.

## 9.1.3.3. Inkscape Software¶

Inkscape can save a SVG file in several ways:

• simple: the file will only contains pure SVG
• Inkscape: the file will contains Inkscape extension
• optimised: perform some optimisations on the output
• compressed: file is compressed using the zip algorithm

Notes on how Inkscape generates SVG:

• As opposite to the SVG Specification, Inkscape set the origin at the bottom of the document, thus

$$\mathbf{Y}_{\mathrm{Inkscape}} = \mathbf{Page\ Height} - \mathbf{Y}_{\mathrm{SVG}}$$

The transformation is a composition of a Y axis parity and a translation on the Y axis of the page height.

• It uses a group as top layer and a transform

• It uses a mix of absolute and incremental coordinates

• It spoils in several ways the object’s coordinates: values are transformed and rounded.

Thus Inkscape should not be be used to make or edit a file which require accurate coordinates.

### 9.1.3.3.1. Inkscape SVG example¶

This example uses a margin of 20 and paint

• an horizontal line of length 100 from the origin (20, 20)
• a vertical line of length 100 from the origin
• a 45° line of length 80 from the origin
• the viewport is (0, 0, 140, 140)

Note: this extract is incomplete

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="140.00003mm" height="141mm" viewBox="0 0 140.00003 141">
<g id="layer1" transform="translate(2.037847e-4,-156)">
<path id="path-x"  d="m 19.999999,276.73109 99.999651,0.13765" />
<path id="path-y"  d="M 20.145247,277 V 177" />
<path id="path-45" d="m 20.084712,276.91488 79.830575,-79.8386" />
</g>
</svg>


This SVG file must be interpreted as follow

• Draw a line from (20, 276-156) to +(100, 0) (note: l is deduced from m),

which gives (20, 120) to (120, 120),

and in Inkscape coordinates (20, 20) to (120, 20) since 140 - 120 = 20

• Draw a line from (20, 276-156) to (20, 176-156),

which gives (20, 120) to (20, 20),

and in Inkscape coordinates (20, 20) to (20, 120)

• Draw a line from (20, 276-156) to +(80, -80),

which gives (20, 120) to (100, 40),

and in Inkscape coordinates (20, 20) to (100, 100)