svg lines and strokes

4.2 Stroke characteristics

4.2.1 stroke-width

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <!-- horizontal line with stroke-width default 1px-->
    <line x1="0" y1="20" x2="200" y2="20" style="stroke:black;"/>
    <!-- horizontal line with stroke-width 10px-->
    <line x1="60" y1="20" x2="100" y2="20" style="stroke:black; stroke-width:10px;"/>
    <!-- vertical line -->
    <line x1="20" y1="0" x2="20" y2="200" style="stroke:black"/>
    <!-- vertical line with stroke-width 10px -->
    <line x1="20" y1="60" x2="20" y2="100" style="stroke:black; stroke-width:10px;"/>
    <!-- diagonal line -->
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:black"/>
    <!-- diagonal line with stroke-width 10px -->
    <line x1="60" y1="60" x2="100" y2="100" style="stroke:black; stroke-width:10px;"/>
</svg>

4.2.2 stroke colors can be given by: names, rgb, rgba, #******, #***

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <!-- aqua-->
    <line x1="10" y1="10" x2="190" y2="10" style="stroke-width:8px; stroke:aqua"/>
    <!-- black -->
    <line x1="10" y1="20" x2="190" y2="20" style="stroke-width:8px; stroke:black"/>
    <!-- blue-->
    <line x1="10" y1="30" x2="190" y2="30" style="stroke-width:8px; stroke:blue;"/>
    <!-- fuchsia -->
    <line x1="10" y1="40" x2="190" y2="40" style="stroke-width:8px; stroke:fuchsia;"/>  
    <!-- gray-->
    <line x1="10" y1="50" x2="190" y2="50" style="stroke-width:8px; stroke:gray;"/>
    <!-- green -->
    <line x1="10" y1="60" x2="190" y2="60" style="stroke-width:8px; stroke:green;"/>  
    <!-- lime-->
    <line x1="10" y1="70" x2="190" y2="70" style="stroke-width:8px; stroke:lime"/>
    <!-- maroon -->
    <line x1="10" y1="80" x2="190" y2="80" style="stroke-width:8px; stroke:maroon;"/>  
    <!-- navy-->
    <line x1="10" y1="90" x2="190" y2="90" style="stroke-width:8px; stroke:navy"/>
    <!-- olive -->
    <line x1="10" y1="100" x2="190" y2="100" style="stroke-width:8px; stroke:olive"/>
    <!-- purple-->
    <line x1="10" y1="110" x2="190" y2="110" style="stroke-width:8px; stroke:purple;"/>
    <!-- red -->
    <line x1="10" y1="120" x2="190" y2="120" style="stroke-width:8px; stroke:red;"/>  
    <!-- silver-->
    <line x1="10" y1="130" x2="190" y2="130" style="stroke-width:8px; stroke:silver;"/>
    <!-- teal -->
    <line x1="10" y1="140" x2="190" y2="140" style="stroke-width:8px; stroke:teal;"/>  
    <!-- white-->
    <line x1="10" y1="150" x2="190" y2="150" style="stroke-width:8px; stroke:white;"/>
    <!-- yellow -->
    <line x1="10" y1="160" x2="190" y2="160" style="stroke-width:8px; stroke:yellow;"/>     
    <!-- rgba -->
    <line x1="10" y1="180" x2="190" y2="180" style= "stroke-width:8px; stroke:rgba(44, 95, 45,0.5);"/> 
</svg>

4.2.3 stroke stroke-opacity

<svg width="200px" height="130px" viewBox="0 0 200 130" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10"  x2="190" y2="10" style="stroke-width:8px; stroke:black; stroke-opacity:0.1"/>
    <line x1="10" y1="20"  x2="190" y2="20" style="stroke-width:8px; stroke:black; stroke-opacity:0.2"/>
    <line x1="10" y1="30"  x2="190" y2="30" style="stroke-width:8px; stroke:black; stroke-opacity:0.3"/>
    <line x1="10" y1="40"  x2="190" y2="40" style="stroke-width:8px; stroke:black; stroke-opacity:0.4"/>
    <line x1="10" y1="50"  x2="190" y2="50" style="stroke-width:8px; stroke:black; stroke-opacity:0.5"/>
    <line x1="10" y1="60"  x2="190" y2="60" style="stroke-width:8px; stroke:black; stroke-opacity:0.6"/>
    <line x1="10" y1="70"  x2="190" y2="70" style="stroke-width:8px; stroke:black; stroke-opacity:0.7"/>
    <line x1="10" y1="80"  x2="190" y2="80" style="stroke-width:8px; stroke:black; stroke-opacity:0.8"/>
    <line x1="10" y1="90"  x2="190" y2="90" style="stroke-width:8px; stroke:black; stroke-opacity:0.9"/>
    <line x1="10" y1="100" x2="190" y2="100" style="stroke-width:8px; stroke:black; stroke-opacity:1"/>
</svg>

4.2.4 stroke-dasharray attribute

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <line x1="10"   y1="30"  x2="180" y2="30" style="stroke-width:1px; stroke:black; stroke-dasharray:20,5;"/>
    <line x1="10"   y1="60"  x2="180" y2="60" style="stroke-width:1px; stroke:black; stroke-dasharray:5,3;"/>
    <line x1="10"   y1="90"  x2="180" y2="90" style="stroke-width:1px; stroke:black; stroke-dasharray:1,1;"/>
    <line x1="10"  y1="120"  x2="180" y2="120" style="stroke-width:1px; stroke:black; stroke-dasharray:2,2;"/>
    <line x1="10"  y1="150"  x2="180" y2="150" style="stroke-width:1px; stroke:black; stroke-dasharray:9;"/>
    <line x1="10"  y1="180"  x2="180" y2="180" style="stroke-width:1px; stroke:black; stroke-dasharray:1;"/>
</svg>