Basic Renderer usage:
A basic example of a chart created using the above tool can be seen here: https://www.highcharts.com/demo/renderer
Other basic examples can be found in the API above.
Advanced Renderer real example usage:
Let's say we have a requirement to render two buttons in the top-left corner of our chart that changes the series type on click.
An example implementation of the above can be found here: https://jsfiddle.net/BlackLabel/a71jqexz
Another approach to using Renderer in a more advanced way could be to connect the top edges of columns. It’s possible thanks to the path() method.
An example implementation of the above can be found here: https://jsfiddle.net/BlackLabel/pfocak32/
Another example of implementation of a basic custom tooltip similar to the Highcharts default one can be found here: https://jsfiddle.net/BlackLabel/bfL91kmd
As you can see, SVG Renderer is a powerful tool very useful when we need to render/add/show/implement something that is not implemented in Highcharts core.