Scalable Vector Graphics

Create a SVG Element

Click  to add a new element to a web page. Click "Drawing group":

An SVG element is created on the web page:

The new SVG element has a dotted border. You can change it if you want by changing properties under "border".

SVG Editing Commands

Moving SVG

Click these buttons to move the SVG element: . The value on the text box determines pixels of moving. By default the value is 10. That means, every time one of these buttons is clicked, the SVG element moves 10 pixels.

By default an SVG element is added as an inline element and positioned among other element. When you start moving an SVG element, it is changed to be positioned absolutely on the page. If you expend "position" category then you will see that "position" property become "absolute":

Make Duplications

Click button  to make a duplication of the SVG element.

Create drawing shapes

Click one of following buttons to add a new drawing shape to the SVG element. You may add as many drawing shapes as you want.

- Add a new polygon. For how to use polygons, see svg_polygon.html.

 - Add a new rectangle. For how to use rectangle, see svg_rect.html.

 - Add a new circle. For how to use polygons, see svg_circle.html.

 - Add a new ellipse. For how to use polygons, see svg_ellipse.html.

 - Add a new line. For how to use polygons, see svg_line.html.

 - Add a new poly-line. For how to use polygons, see svg_polyline.html.

 - Add a new text. For how to use polygons, see svg_text.html.