YouTip

# SVG Polyline The `` element in SVG is used to draw a polyline, which is one of the basic shapes commonly used in SVG. Unlike the `` element, the line drawn by `` is unclosed, meaning the start and end points are not automatically connected. Using the `` element, you can create multiple connected line segments and control properties such as the vertex coordinates, fill color, and stroke color. ### Basic Syntax <polyline points="x1,y1 x2,y2 x3,y3 ..." fill="none" stroke="stroke-color" stroke-width="width" /> **Attribute Explanation:** * The `points` attribute defines the coordinates of each vertex of the polyline. The coordinates of multiple vertices are separated by spaces or commas, and each pair of coordinates is separated by a comma. * The `fill` attribute is used to define the fill color of the polyline. It is usually set to "none" to indicate no fill. * The `stroke` attribute defines the stroke color of the polyline. * The `stroke-width` attribute defines the stroke width of the polyline. The following code draws a polyline with a black stroke and a width of 2 pixels. Its vertex coordinates are (50, 50), (100, 150), (150, 100), and (200, 200), forming multiple connected line segments. ### Example 1 The `` element is used to create any shape that consists only of straight lines: Here is the SVG code: ## Example [Try it »](#) Click to view: (#). ### Example 2 Another example with only straight lines: Here is the SVG code: ## Example [Try it »](#) Click to view: (#).