![]() |
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.
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:
line
in SVG,
rect
in SVG with no rx
or
ry
attributes,
rect
in SVG,
circle
in SVG,
ellipse
in SVG,
polyline
in SVG,
polygon
in SVG,
path
in SVG,
path
in SVG,
foreignObject
in SVG,
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:
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.
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:
fill
and
stroke
(example, fill=" #C8FF95"
stroke=" #000000"),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.