|
|
# SVG
|
|
|
## General information about SVG, path-elements and Bezier curves
|
|
|
|
|
|
Bezier curves of order n consist of n points (P0 to Pn):
|
|
|
1. Start
|
|
|
2. n-2 control-points
|
|
|
4. End
|
|
|
|
|
|
In case of quadratic Bezier curves (which will be our concern) they have four points:
|
|
|
1. Start
|
|
|
2. C1
|
|
|
3. C2
|
|
|
4. End
|
|
|
|
|
|
Now, let's take a look at SVG's path-element:
|
|
|
```xml
|
|
|
<path
|
|
|
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
|
|
d="m 40.406102,887.70732 c 0,0 23.233508,-203.04066 275.771648,-219.2031 252.53813,-16.16245 211.12188,-8.08122 295.97469,104.04571 84.85282,112.12693 -215.16249,203.04066 -215.16249,203.04066"
|
|
|
id="path3809"
|
|
|
inkscape:connector-curvature="0" />
|
|
|
```
|
|
|
For this application, only the "d"-tag is relevant! This tag specifies the path that has to be drawn:
|
|
|
```
|
|
|
d="m 40.406102,887.70732 c 0,0 23.233508,-203.04066 275.771648,-219.2031 252.53813,-16.16245 211.12188,-8.08122 295.97469,104.04571 84.85282,112.12693 -215.16249,203.04066 -215.16249,203.04066"
|
|
|
```
|
|
|
[Here](http://www.selfsvg.info/?section=3.5) the single commands for SVG-paths are explained. As we need to handle Bezier curves, the "c"-command is of interest. The command defines a quadratic Bezier curve via 4 control-points (uppercase: points are absolute; lowercase: points are relative to starting point), where the starting point is assumed as the "current position". In this particular case, this is defined by the "m"-command (Move-To) as (40.406102,887.70732).
|
|
|
|
|
|
So the first part of our path would be:
|
|
|
+ Starting from (40.406102,887.70732)
|
|
|
+ Having relative control-points (0,0) and (23.233508,-203.04066)
|
|
|
+ Going to (275.771648,-219.2031)
|
|
|
|
|
|
After these 3 parameters for the first curve, other numbers follow, without a command. In SVG, this indicates that the following parameters imply a new command of the same type, having the last end-point as it's starting-point. So, in this case, we have 2 more curves!
|
|
|
|
|
|
Paths ending with a "z"-command define a closed form. |