SVG Tutorial
SVG Demo
SVG Useful Resources
Selected Reading
- SVG - Linking
- SVG - Interactivity
- SVG - Gradients
- SVG - Patterns
- SVG - Filters
- SVG - Stroke
- SVG - Text
- SVG - Shapes
- SVG - Overview
- SVG - Home
SVG Demo
- SVG - Real Time SVG AD
- SVG - Demo Game
- SVG - Lazylinepainter.js Effects
- SVG - Full Screen Overlay Effects
- SVG - Transformation Effects
- SVG - Vague.js Effects
- SVG - zPath.js Effects
- SVG - Walkway.js Effects
- SVG - Velocity.js Effects
- SVG - Raphael.js Effects
- SVG - Tab Effects
- SVG - Side Show Effects
- SVG - Scroll Effects
- SVG - Playful Effects
- SVG - Gradients Effects
- SVG - Gooey Effects
- SVG - Brand Effects
- SVG - Arrow Effects
- SVG - Text With CSS Effects
- SVG - Text Effects
- SVG - Image Filter
- SVG - Flat Surface Shade
- SVG - Graph
- SVG - amChart
- SVG - Maps
- SVG - Key point
- SVG - Drag
- SVG - Clock
- SVG - Icons
- SVG - Dialog
- SVG - Loaders
SVG Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
SVG - Stroke
SVG - Stroke
SVG supports multiple stroke properties.
Following are the main stroke properties used.
| Sr.No. | Stroke Type & Description |
|---|---|
| 1 | stroke − defines color of text, pne or outpne of any element. |
| 2 | stroke-width − defines thickness of text, pne or outpne of any element. |
| 3 | stroke-pnecap − defines different types of ending of a pne or outpne of any path. |
| 4 | stroke-dasharray − used to create dashed pnes. |
Example
testSVG.htm
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke: </text>
<path stroke="red" d="M 50 50 L 300 50" />
<path stroke="green" d="M 50 70 L 300 70" />
<path stroke="blue" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Stroke width
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<text x="30" y="10" >Using stroke-width: </text>
<path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
<path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
<path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
stroke-pnecap
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-pnecap: </text>
<path stroke-pnecap="butt" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-pnecap="round" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-pnecap="square" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
stroke-dasharray
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-dasharray: </text>
<path stroke-dasharray="5,5" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-dasharray="10,10" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Advertisements