The paint order of SVG elements and their stroke and fill is configurable (#tilPost)

Dealing with SVG can be fiddly at times. Sometimes you only want to adjust the border aka stroke of a path or rect to find out that it changes the visual appearance in a way that you didn’t expect.
You can define an element’s stroke…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Dealing with SVG can be fiddly at times. Sometimes you only want to adjust the border aka stroke of a path or rect to find out that it changes the visual appearance in a way that you didn't expect.

You can define an element's stroke-width in CSS or a presentation attribute.

path {
  stroke-width: 3;
}
<path stroke-width="3"></path>

If you increase the stroke width by more than a few pixels you'll see that the stroke width will change to both sides - inside and inside of the SVG element.

I always started to change the path or width/height of the given element to avoid the stroke going over the fill too much. It turns out that you can also change the paint order of fill and stroke using paint-order.

path {
  // fill will go over stroke
  paint-order: stroke;
}
<!-- fill will go over stroke -->
<path stroke-width="3" paint-order="stroke"></path>

This way, the stroke is painted first followed by the fill color. You can then expand the stroke width as much as you want and it will look like it's expanding only to the outside because the fill color will be on top of the stroke. ?

Visualisation showing the effect of paint-order

If you want to learn more about this check the MDN article or play around with it on CodePen.


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-09T06:12:43+00:00) » The paint order of SVG elements and their stroke and fill is configurable (#tilPost). Retrieved from https://www.scien.cx/2019/09/30/the-paint-order-of-svg-elements-and-their-stroke-and-fill-is-configurable-tilpost/.
MLA
" » The paint order of SVG elements and their stroke and fill is configurable (#tilPost)." Stefan Judis | Sciencx - Monday September 30, 2019, https://www.scien.cx/2019/09/30/the-paint-order-of-svg-elements-and-their-stroke-and-fill-is-configurable-tilpost/
HARVARD
Stefan Judis | Sciencx Monday September 30, 2019 » The paint order of SVG elements and their stroke and fill is configurable (#tilPost)., viewed 2022-12-09T06:12:43+00:00,<https://www.scien.cx/2019/09/30/the-paint-order-of-svg-elements-and-their-stroke-and-fill-is-configurable-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » The paint order of SVG elements and their stroke and fill is configurable (#tilPost). [Internet]. [Accessed 2022-12-09T06:12:43+00:00]. Available from: https://www.scien.cx/2019/09/30/the-paint-order-of-svg-elements-and-their-stroke-and-fill-is-configurable-tilpost/
CHICAGO
" » The paint order of SVG elements and their stroke and fill is configurable (#tilPost)." Stefan Judis | Sciencx - Accessed 2022-12-09T06:12:43+00:00. https://www.scien.cx/2019/09/30/the-paint-order-of-svg-elements-and-their-stroke-and-fill-is-configurable-tilpost/
IEEE
" » The paint order of SVG elements and their stroke and fill is configurable (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2019/09/30/the-paint-order-of-svg-elements-and-their-stroke-and-fill-is-configurable-tilpost/. [Accessed: 2022-12-09T06:12:43+00:00]
rf:citation
» The paint order of SVG elements and their stroke and fill is configurable (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2019/09/30/the-paint-order-of-svg-elements-and-their-stroke-and-fill-is-configurable-tilpost/ | 2022-12-09T06:12:43+00:00
https://github.com/addpipe/simple-recorderjs-demo