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.

    See also https://bugs.launchpad.net/inkscape/+bug/170049

  • 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)