Editing SVG graphics

Amaya enables you to include vector graphics in web pages, following the Scalable Vector Graphics (SVG) specification. The goal is not create all SVG elements and attributes, but to implement a subset of the language that is sufficient for the drawings that scientific authors include in their documents.

Amaya handles SVG elements as structured components, in the same way as HTML elements. Therefore, you can manipulate SVG graphics in the structure view as you manipulate other parts of HTML documents.

All editing commands provided by Amaya for handling text are also available for handling graphics.

Warning: SVG authoring is under development. You may find bugs and the user interface may change in the future.

Creating graphics

To draw graphics, you need a SVG canvas. The canvas can be either the document itself or a <svg> element inside a XML document. A SVG document is created by the File->New->New Drawing command. A tab of the Elements tool allows you to create a SVG canvas and graphic components inside a XML document.

When the user asks the creation of a SVG canvas into a XML document, Amaya looks for a place around the insert point where such a <svg> element can be inserted. The element is created with a default width and height. Later, when the SVG canvas is selected, the user can resize it.

If the user tries to create a graphics outside a SVG canvas, a <svg> element is automatically generated to include the new graphic component.

When the user clicks within a SVG canvas, the SVG tool is presented and the user can create graphic components:

In formatted view, the position and size of all these created components are indicated by direct interaction:

When a line, an arrow, a polygon or a polyline is created the shift key may be hit to force an approximation of 15°.

When the selection is in structure view, components are created with default position and size.

Selecting graphics

In formatted view, the rules to select graphics are the following:

Applying transformations to graphics

To apply transformations to a component, you must first select it. Available transformations are proposed in the SVG tool but also in the contextual menu displayed with the right click.

Possible transformations are:

Styling graphics

You can change some style attributes of graphic components at any time with the Style panel. When a SVG component is selected, the Style panel changes to display specific style attributes: