Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
.. include:: /abbreviation.txt
.. _svg-ressources-page:
=================
SVG File Format
=================
Reference Documentations
------------------------
* `Scalable Vector Graphics (SVG) W3C Home Page <https://www.w3.org/Graphics/SVG>`_
* `An SVG Primer for Today's Browsers W3C Working Draft — September 2010 <https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html>`_
* `Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011 <https://www.w3.org/TR/SVG11/>`_
* `Mozilla SVG Documentation <https://developer.mozilla.org/en-US/docs/Web/SVG>`_
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.
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
:math:`\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.**
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**
.. code-block:: text
<?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)