The best SVG Stroke Properties Tutorial In 2024, In this tutorial you can learn
SVG Stroke Properties,SVG stroke property,Examples,SVG stroke-width attribute,Examples,SVG stroke-linecap property,Examples,SVG stroke-dasharray property,Examples,
SVG Stroke Properties
SVG Stroke Properties SVG offers a wide range of stroke attributes. In this chapter, we will look at the following:
stroke stroke-width stroke-linecap stroke-dasharray All stroke attributes can be applied to any type of lines, text and elements like a circular outline.
SVG stroke property Stroke attribute defines a line, or text element outline color:
Here is the SVG Code:
Examples <Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <G fill = "none"> <Path stroke = "red" d = "M5 20 l215 0" /> <Path stroke = "blue" d = "M5 40 l215 0" /> <Path stroke = "black" d = "M5 60 l215 0" /> </ G> </ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).
SVG stroke-width attribute Tstroke- width attributes define a line, or text element outline thickness:
Here is the SVG Code:
Examples <Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <G fill = "none" stroke = "black"> <Path stroke-width = "2" d = "M5 20 l215 0" /> <Path stroke-width = "4" d = "M5 40 l215 0" /> <Path stroke-width = "6" d = "M5 60 l215 0" /> </ G> </ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).
SVG stroke-linecap property strokelinecap attribute defines the end of an open path of different types:
Here is the SVG Code:
Examples <Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <G fill = "none" stroke = "black" stroke-width = "6"> <Path stroke-linecap = "butt" d = "M5 20 l215 0" /> <Path stroke-linecap = "round" d = "M5 40 l215 0" /> <Path stroke-linecap = "square" d = "M5 60 l215 0" /> </ G> </ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).
SVG stroke-dasharray property strokedasharray property used to create the dotted line:
Here is the SVG Code:
Examples <Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <G fill = "none" stroke = "black" stroke-width = "4"> <Path stroke-dasharray = "5,5" d = "M5 20 l215 0" /> <Path stroke-dasharray = "10,10" d = "M5 40 l215 0" /> <Path stroke-dasharray = "20,10,5,5,5,10" d = "M5 60 l215 0" /> </ G> </ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).