YouTip

# SVG Stroke Attribute The `stroke` attribute in SVG is used to define the color of the outline (border) of a graphical element. It can be applied to any graphical element with an outline, such as ``, ``, ``, and others. ### Basic Syntax **Attribute Explanation:** * The `stroke` attribute defines the color of the outline of a graphical element. You can use color names, hexadecimal color values, RGB values, RGBA values, and more to represent colors. * If you don't want to display an outline, set the `stroke` attribute to "none". SVG provides a wide range of stroke attributes: * stroke * stroke-width * stroke-linecap * stroke-dasharray All stroke attributes can be applied to any type of line, text, and elements, just like the outline of a circle. The following code draws a red-filled rectangle and specifies a blue outline. ### SVG Stroke Attributes The `stroke` attribute defines the color of the outline for lines, text, or elements: Here's the SVG code: ## Example [Try it out »](#) Click to view: (#). ### SVG stroke-width Attribute The `stroke-width` attribute defines the thickness of the outline for lines, text, or elements: Here's the SVG code: ## Example [Try it out »](#) Click to view: (#). ### SVG stroke-linecap Attribute The `stroke-linecap` attribute defines different types of endings for open paths: Here's the SVG code: ## Example [Try it out »](#) Click to view: (#). * * * ## SVG stroke-dasharray Attribute The `stroke-dasharray` attribute defines the pattern of dashes and gaps in a stroke: Here's the SVG code: ## Example [Try it out »](#) Click to view: (#).