SVG - SPLessons

Chapter 7

SVG Stroke

SVG Stroke

This chapter demonstrates about the SVG stroke which consist of wide range of stroke properties which are applied to any type of elements following are the concepts covered in this chapter.

  • SVG stroke
  • SVG Properties

SVG stroke

Stroke attribute is used to define the border color to the particular shapes and paths. SVG properties applied to any type of lines, outlines and text of an element. The code below demonstrates the basic stroke property to the lines.

<!DOCTYPE html>
<html>
	<body>
		<svg height="80" width="300">
			<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>
	</body>
</html>

Result
By running the above code in a preferred browser then user will get the output as shown below.

SVG Properties

SVG have the several stroke properties to stroke the lines, outlines, text of elements, some of the svg properties are listed below.

stroke linecap

Stroke linecap property is defined as the different types of endings to an open path. The code below demonstrates the stroke line property is used to give stroking to the following lines.

<!DOCTYPE html>
<html>
	<body>
		<svg height="80" width="300">
			<g fill="none" stroke="red" 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> 
	</body>
</html>

Result
By running the above code in a preferred browser then user will get the output as shown below.

stroke width

Stroke linecap property is defined as the different types of endings to an open path. The code below demonstrates the stroke line property which gives stroking to the following lines as shown.

<!DOCTYPE html>
<html>
	<body>
		<svg height="80" width="300">
			<g fill="none" stroke="red">
				<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> 
	</body>
</html>

Result
By running the above code in a preferred browser then user will get the output as shown below.

stroke linejoin

Stroke linejoin is used to demonstrates how the corners look on a path and basic shapes these are defined by three types the figure below demonstrates the stroke line join.
The code below demonstrates the stroke line join as shown.

<html>
	<head>
		<style>
			contain-demo {
				margin: 20px auto;
				text-align: center;
				}
			.grapes {
				animation: draw 3s infinite;
				}
			@keyframes draw {
				50% {
				stroke-dashoffset: 0;
				}
			}
			.grapes-2 {
				animation: shift 3s infinite;
				}
			@keyframes shift {
				50% {
				stroke-dashoffset: 200px;
				}
			}
		</style>
	</head>
	<div class="contain-demo">  
		<svg width="250px" height="265px" viewBox="0 0 150 165">
			<path class="grapes" fill="none" stroke="#765373" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="470" stroke-dashoffset="470" 
			d=" M115.91,79.58c3.059,1.111,5.927,2.879,8.383,5.334c7.991,7.991,8.806,20.427,2.445,29.329c3.874,0.974,7.546,2.974,10.574,6.001
			c8.901,8.901,8.901,23.338,0,32.239c-8.901,8.901-23.338,8.901-32.239,0c-1.323-1.323-2.466-2.784-3.387-4.318
			c-0.138,0.159-0.296,0.318-0.455,0.476c-8.901,8.901-23.328,8.891-32.229-0.011c-2.985-2.985-4.975-6.605-5.959-10.425
			c-8.922,8.668-23.169,8.584-31.985-0.233c-8.34-8.34-8.859-21.539-1.566-30.482c-4.773-0.646-9.388-2.784-13.071-6.467
			c-8.901-8.901-8.901-23.338,0-32.239c3.493-3.493,7.853-5.631,12.383-6.372c2.911-0.476,5.895-0.392,8.774,0.265
			c-1.662-7.377,0.381-15.432,6.118-21.168c3.112-3.112,6.89-5.133,10.87-6.065c7.43-1.757,15.569,0.265,21.369,6.065    c2.477,2.477,4.265,5.366,5.345,8.457c0.466-0.572,0.963-1.111,1.482-1.63c8.901-8.901,23.328-8.912,32.229-0.011    C123.573,56.908,123.88,70.636,115.91,79.58z"/>
			<g>
				<path class="stem" fill="none" stroke="#59351C" stroke-width="5" stroke-linecap="round"
				d="M32.464,61.765
				c0,0-17.316-1.726-26.967-26.035"/>
				<path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				d="       M44.678,4.776c2.953,7.504,5.874,14.828,8.002,22.65c0.73,2.699,1.429,5.79,1.884,9.018c1.715,11.875,0.36,25.571-13.103,28.493
				c-0.021,0-0.053,0.011-0.074,0.011c-1.143,0.254-2.265,0.402-3.334,0.476c-3.588,0.243-6.742-0.455-9.251-2.011
				c-0.656-0.402-1.27-0.868-1.842-1.397c-0.497-0.455-0.942-0.942-1.355-1.482l-0.011-0.011c-2.053-2.688-3.101-6.403-2.794-11.029
				c0.762-11.537,6.065-17.898,15.061-24.354C37.862,25.14,49.42,16.842,44.678,4.776z"/>
			</g>
		</svg>
		<svg width="250px" height="265px" viewBox="0 0 150 165">
			<path class="grapes-2" fill="none" stroke="#765373" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="70"
			d=" M115.91,79.58c3.059,1.111,5.927,2.879,8.383,5.334c7.991,7.991,8.806,20.427,2.445,29.329c3.874,0.974,7.546,2.974,10.574,6.001
			c8.901,8.901,8.901,23.338,0,32.239c-8.901,8.901-23.338,8.901-32.239,0c-1.323-1.323-2.466-2.784-3.387-4.318
			c-0.138,0.159-0.296,0.318-0.455,0.476c-8.901,8.901-23.328,8.891-32.229-0.011c-2.985-2.985-4.975-6.605-5.959-10.425
			c-8.922,8.668-23.169,8.584-31.985-0.233c-8.34-8.34-8.859-21.539-1.566-30.482c-4.773-0.646-9.388-2.784-13.071-6.467
			c-8.901-8.901-8.901-23.338,0-32.239c3.493-3.493,7.853-5.631,12.383-6.372c2.911-0.476,5.895-0.392,8.774,0.265
			c-1.662-7.377,0.381-15.432,6.118-21.168c3.112-3.112,6.89-5.133,10.87-6.065c7.43-1.757,15.569,0.265,21.369,6.065    c2.477,2.477,4.265,5.366,5.345,8.457c0.466-0.572,0.963-1.111,1.482-1.63c8.901-8.901,23.328-8.912,32.229-0.011    C123.573,56.908,123.88,70.636,115.91,79.58z"/>
			<g>
				<path class="stem" fill="none" stroke="#59351C" stroke-width="5" stroke-linecap="round"
				d="M32.464,61.765
				c0,0-17.316-1.726-26.967-26.035"/>
				<path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				d="       M44.678,4.776c2.953,7.504,5.874,14.828,8.002,22.65c0.73,2.699,1.429,5.79,1.884,9.018c1.715,11.875,0.36,25.571-13.103,28.493
				c-0.021,0-0.053,0.011-0.074,0.011c-1.143,0.254-2.265,0.402-3.334,0.476c-3.588,0.243-6.742-0.455-9.251-2.011
				c-0.656-0.402-1.27-0.868-1.842-1.397c-0.497-0.455-0.942-0.942-1.355-1.482l-0.011-0.011c-2.053-2.688-3.101-6.403-2.794-11.029
				c0.762-11.537,6.065-17.898,15.061-24.354C37.862,25.14,49.42,16.842,44.678,4.776z"/>
			</g>
		</svg>
	</div>
</html>

Result
By running the above code in a preferred browser then user will get the output as shown below.

stroke dasharray

Stroke-dash array is used to create the dashed line with stroke for which user need to use the stroke-dash array attribute the as shown in the below code.

<!DOCTYPE html>
<html>
	<body>
		<svg height="80" width="300">
			<g fill="none" stroke="red" 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>
	</body>
</html>

Result
By running the above code in a preferred browser then user will get the output as shown below.

Summary

  • stroke property is used to stroke the SVG line,text etc.
  • SVG stroke is used as a vector graphic software.
  • stroke width is applied on the border of the lines.