Using SVG in an Interface
Wed, Feb 22, 2017
I found a myriad of beautiful SVG animations and visual experiments, but it was not clear how to leverage SVG to enhance UIs. That was until I overheard two of my coworkers discussing how to implement a radial meter to track memory usage in Bluemix. One of them suggested using strokedash-offset and I immediately jumped into the conversation eager to share my new found knowledge.
I was thrilled because this was the perfect opportunity to use SVG in an interface.
Using stroke-dasharray and strokedash-offset, we were able to quickly implement a meter for memory usage.
stroke-dasharray - is used to turn the stroke of an SVG element/path into a dashed pattern.
strokedash-offset - specifies the distance into the pattern to start the dash.
By setting stroke-dasharray equal to the length of a shape’s perimeter, stroke-dashoffset can be used to control the amount of visible stroke. Animating or transitioning the offset gives the appearance that the shape is being drawn.
Here is an example of how to use the properties to create a radial meter.