## Editing graphics

Amaya allows you to include vector graphics in Web pages, following the Scalable Vector Graphics (SVG) specification. SVG elements are handled as structured components, in the same way as HTML elements. Therefore, you can manipulate SVG graphics in the same way you manipulate other parts of HTML documents. All editing commands provided by Amaya for handling text are also available for graphics. There are also some additional controls for entering SVG elements.

### Creating graphics with the palette

To create a new SVG element in a document, just move the insertion point (the caret) to the position where you want to insert it, and then click the Graphics button . The Graphics button displays a palette that stays on the screen until you click the `Done` button. Just choose the element you want to create. The available graphics elements are:

- A line, `line` in SVG,
- A rectangle, `rect` in SVG with no `rx` or `ry` attributes,
- A rectangle with rounded corners, `rect` in SVG,
- A circle, `circle` in SVG,
- An ellipse, `ellipse` in SVG,
- A polyline, `polyline` in SVG,
- A polygon, `polygon` in SVG,
- An open curve, `path` in SVG,
- A closed curve, `path` in SVG,

- An embedded HTML fragment, `foreignObject` in SVG,
- A SVG text, `text` in SVG

When you select a shape in the palette and the selection is in the HTML structure of the document, Amaya creates a new SVG element just at the beginning of the current selection and the selected shape into this new SVG. Amaya generates SVG drawings as blocks, between paragraphs. If you wish to display a drawing inline, today you have let Amaya creates it between paragrahs then edit the source code to move it.

When the current selected element is a SVG element, the new shape is added to the current SVG drawing. The new created shape is added after and then can overlap previous ones.

The creation of a shape needs some direct interactions with the user:

- To create a rectangle, you must first select the position of the left corner by pressing the left mouse button. Keep the button pressed down and move to the position of the opposite corner, then release the button. The shape is now defined.
- To create a circle or an ellipse, you must first select the position of the center by pressing the left mouse button. Keep the button pressed down and move right and/or bottom, then release the button. The shape is now defined.
- For a polyline and polygon, enter each point by clicking the corresponding position with the left mouse button. To indicate the last point, click with the middle or right button.

You can insert an image within a SVG drawing. Choose Image from the Types menu or click on the image button from the button bar and proceed in the same way as in HTML.

For inserting a mathematical expression into a SVG drawing, you have just to click in the Math palette when the selection in within a SVG. Amaya will generate a SVG `foreignObject` to embed the MathML markup.

### Moving graphics

- By direct manipulation - combining the Control key with the Left button of the mouse within a shape allows you to move this shape.
- By editing attributes.

### Resizing graphics

- By direct manipulation - combining the Control key with the Middle or the Right button of the mouse within a shape allows you to resize this shape.
- By editing attributes.

### Painting graphics

With Amaya, you can paint (i.e., fill or stroke) SVG elements with a single color. The default `fill` color is `black` and the default `stroke` color is `transparent`. But you can change these values:

- Either by editing SVG attributes `fill` and `stroke` (example, fill=" #C8FF95" stroke=" #000000"),
- Or by editing the SVG attribute `style` with CSS properties `fill` and `stroke` (example, style="fill: #C8FF95; stroke: #000000").

The palette displayed by the menu entry Style/Colors allows you to generate the SVG `style` attribute. In the Amaya palette, a click with the left mouse button generates the stroke property and a click with the middle or right mouse button generates the fill property.

A SVG `text` is considered as a graphic shape, so the `fill` property paints the character contents and the `stroke` property paints the character border. Amaya applies the fill property to characters, but not the stroke property. That explains why a click with the left mouse button has no immediate effect, and a click with the middle or right mouse button paints the `text` element.