Inline SVG

Using inline SVG — SVG that is pasted or added directly in HTML and not externally — opens up a range of options for styling. You can use CSS to style the SVG to match text colour. You can also style SVG based on events like hover.

You can take it all the way by animating SVG paths directly too.

See the Pen Inline SVG Control by Dave Cross (@davecross) on CodePen.