EN
CSS - what is the difference between svg fill and stroke?
1
answers
3
points
What is the difference between fill and stroke when it comes to color SVG images?
1 answer
3
points
Both fill and stroke attributes are used for coloring the SVG element.
From the documentation:
fillsets the color inside the object,strokesets the color of the line drawn around the object.
Note:
In both cases, you can use the same color naming schemes that you use in HTML - color names (e.g.
red), rgb values (e.g.rgb(255,0,0)), rgba values (e.g.rgb(255,0,0, 0.5)), hex values (e.g.#fa0000), etc.
Practical example
Run the example below to see the difference between elements colored with fill and stroke.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.fill-green {
fill: green; /* fills whole svg element with green color */
}
.stroke-green {
stroke-width: 10px; /* sets stroke width (border width) */
stroke: green; /* sets stroke color */
fill: none; /* removes fill so we can see the border effect */
}
</style>
</head>
<body>
<svg class="fill-green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height:100px;">
<path d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
<svg class="stroke-green" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 520 520" style="height:100px;">
<path d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
</body>
</html>
References
0 comments
Add comment