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:

• connectors: line, simple or double arrow, zigzag.
• text, embedded HTML fragment (foreignObject), mathematic formula, image.
• basic shapes: square, rectangle (optionally with rounded corners), diamond, parallelogram, trapezium, triangles, circle, ellipse.
• polygon, polyline, open and close Bézier curves.
• regular polygons: pentagon, hexagon, heptagon, octagon, various stars
• 3D objects: cube, parallelepiped, cylinder, octahedron, pyramid.
• special symbols for electronics, chemistry, etc.

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

• For connectors (except for lines), basic shapes and 3D objects, you first select the position of the left corner by pressing the left mouse button. While holding down the button (drag), move the mouse to the position of the opposite corner, then release the button.
• For text and foreignObject, click on the position where you want to insert the element.
• For polygon and polyline, you click to generate a point at the corresponding position with the left mouse button. To indicate the last point, use a double-click. A right click or a Esc stops the interaction without an additional point.
• Fo Bézier curves, you process the same way as polygons except that you need to indicate the direction of the tangents too.

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:

• If the component is hollow then you need to click on outlines. Otherwise you can click inside it.
• If a polyline or a path is selected, then its control points are shown and can be selected individually. If the selected control point is part of a segment of a Bézier curve, then the corresponding Bézier handle is displayed.
• If the shift key is pressed, then each new element you click on is added to the selection.
• Several components can be selected at the same time, using the rectangular selection tool of the SVG panel.
• When components are grouped, these components cannot be selected individually in the formatted view. Only the group can be selected. But you may select them in the structure view.

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:

• group/ungroup components
• changing the level of components, to control overlay: send to back, one level down, one level up, bring to front
• rotating
• vertical and horizontal symmetry
• scaling, skewing
• aligning components: left, center, right, top, middle, bottom. If only one component is selected, the alignment is made according to the SVG canvas.
• distributing and spacing components

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:

• Opacity controls the global opacity of the graphic component (fill and stroke)
• Fill controls the fill color and its opacity
  • If the entry is not checked, the graphics is hollow
  • The colored button displays the current color
  • The palette button allows one to select another color
• Stroke controls the stroke color and its opacity
  • If the entry is not checked, the graphics doesn't have outlines
  • The colored button displays the current color
  • The palette button allows one to select another color