macSVG can be used to create several kinds of simple graphics elements simply by selecting a tool in the SVG tool palette, then “drawing” the element in the web view. This page discusses how to draw these elements: <rect>, <circle>, <ellipse>, <polyline>, <polygon>, and <line>.
This video demonstrates how to draw those basic elements in the web view:
The rect element
A new <rect> element can be drawn in the web view by selecting the rect tool in the SVG tool palette, then clicking in the web view to set the origin for the upper left corner of the rect, then dragging to set the width and height of the rect.
To edit a <rect> element, select the rect in the web view with the arrow cursor in the stroke or fill area, or select the element in the document outline view, then use the mouse to reposition or resize the rect. The rect can be repositioned by click-and-drag mouse operations. The handles allow the rect to be resized with click-and-drag operations.
The W3C SVG documentation for the <rect> element is here: https://www.w3.org/TR/SVG/shapes.html#RectElement
The circle element
A new <circle> element can be drawn in the web view by selecting the circle tool in the SVG tool palette, then clicking in the web view to set the origin for the upper left corner of the circle, then dragging to set the radius of the circle.
To edit a <circle> element, select the circle in the web view with the arrow cursor in the stroke or fill area, or select the element in the document outline view, then use the mouse to reposition or resize the circle. The circle can be repositioned by click-and-drag mouse operations. The handles allow the circle radius to be resized with click-and-drag operations.
The W3C SVG documentation for the <circle> element is here: https://www.w3.org/TR/SVG/shapes.html#CircleElement
The ellipse element
A new <ellipse> element can be drawn in the web view by selecting the ellipse tool in the SVG tool palette, then clicking in the web view to set the origin for the upper left corner of the ellipse, then dragging to set the x-radius and y-radius of the ellipse.
To edit an <ellipse> element, select the ellipse in the web view with the arrow cursor in the stroke or fill area, or select the element in the document outline view, then use the mouse to reposition or resize the ellipse. The ellipse can be repositioned by click-and-drag mouse operations. The handles allow the circle radius to be resized with click-and-drag operations.
The W3C SVG documentation for the <ellipse> element is here: https://www.w3.org/TR/SVG/shapes.html#EllipseElement
The polyline and polygon elements
A new <polyline> or <polygon> element can be drawn in the web view by selecting the polyline or polygon tool in the SVG tool palette, then clicking in the web view to set each point for the element. The final point can be set by double-clicking for the final point, or pressing the escape (‘esc’) key on the keyboard.
To edit an <polyline> or <polygon> element, the arrow cursor can be used to reposition the element, and the crosshair cursor can be used to edit the individual points in the polyline or polygon.
When the polyline or polygon tool is selected in the SVG tools palette, the points Attribute Editor will be displayed by default.
The W3C SVG documentation for the <polyline> element is here: https://www.w3.org/TR/SVG/shapes.html#PolylineElement
The W3C SVG documentation for the <polygon> element is here: https://www.w3.org/TR/SVG/shapes.html#PolygonElement
The line element
A new <line> element can be drawn in the web view by selecting the line tool in the SVG tool palette, then clicking in the web view to set the starting point for the line, then dragging to set the end point for the line.
To edit an <edit> element, select the line in the web view with the arrow cursor in the stroke or fill area, or select the element in the document outline view, then use the mouse to reposition the line with click-and-drag mouse operations. Use the crosshair cursor to reposition the individual end points of the line.
The W3C SVG documentation for the <line> element is here: https://www.w3.org/TR/SVG/shapes.html#LineElement
Previous page: Overview of macSVG
Next page: SVG <path> Elements
Full index: macSVG User Guide