# Basic SVG Examples

Shows some of the basic svg elements when placed in FO.

# Examples

## Introduction

These examples show the areas of SVG currently implemented.

This is provided so that others can see how to write the svg elements and the result to expect.

## Graphic Elements

### SVG Examples

examples

The SVG xml data is capable of any type of drawing, from simple lines and shapes to complex shading, colouring and transformations.

Currently only a small set of the possibilities are implemented.

### Basic Shapes

Lines can be draw, they map directly to PDF data. ex-lines The example above shows some lines.

The rectangle is a simple shape, which maps directly to PDF data. ex-rect The example above is a simple rectangle, circle and ellipse.

The circle and ellipse are drawn by creating four curves that make up the shape.

All shapes can have style applied to them. Style can also be inherited from a surrounding <svg:g> element.

### Curves and Paths

ex-paths Paths have no effect by themselves unless there is some style applied. The default styling is set by the svg area.

There are many possible parts to a path. There are simple moveto, lineto and closepath commands. There are also a number of curve commands that create Bezier curves etc.

### Poly Elements

ex-poly Polylines and Polygons are multi-point lines made up of straight lines. A polygon has a close path at the end. Note how the numbers in the points property can be over a number of lines to make it easier to read.

The only difference between the polyline and the polygon is that a polygon has a close path at the end.

### Styling

ex-style Most elements can have style. The style information is a list of properties separated by a ';'. The property name and value are separated by a ':'. Notice how the style of the sub-element overrides that of all the ones in the heirarchy, the element also inherits all the other style data.

### G Element

ex-g The G element can contain any other graphic element, including other G elements. The purpose of this is to enable style and transform to apply to a group of graphic elements. The elements have no other relationship except they are drawn together.

### Transform

The transform of an element can do all the usual mathematical transforms. These can be represented by a matrix for use in the pdf. The options include translate, scale, rotate, shear etc.

The transform of an element is accumulative from its ancestors. That is, if a transform is applied to a <svg:g> element then any graphic element also has that transform applied to it. If the child element has a transform then its transform is also applied after the transform of the parent.

ex-transform

### Text Elements

ex-text Text can be placed in any position and with style.

### Clipping, Masking

Not yet implemented. The SVG area is clipped to start with.

### Text Paths

ex-textpath The above example shows the <svg:use> and textPath elements in action.

### Images

ex-image The above example shows the <svg:image> with position and sizing elements in action.

### SVG Element

ex-misc Doing some silly stuff with svg elements.