Add 'path' support to SVG for Fitbit Smartwatches

[Mark-D]

Please add 'path' support to svg in Fitbit OS. There is a large library of svg objects that use mostly 'path' elements to define them freely available on the web. By adding support for this, we could create a richer user experience.

It would also be easier to use 'path' elements to draw certain objects that currently require image files (e.g. images of a heart, footsteps, stairs etc.). Image files also use more memory than would be required by an equivalent svg 'path' definition.

Svg 'path' is also more flexible than an image. For example, there are currently two 'heart' images in Fitbit OS. One is a solid heart while the other is a heart outline. Both of these could easily be reproduced using a single svg path element and changing a single attribute to switch between a solid or outline heart.

Svg elements can also be scaled and rendered any size without losing quality. Currently, if you want differently sized images, you will either have a 'large' image that is then scaled down to the required size, or several differently sized images. Both of these options would require more memory than a path definition.

Moderator Edit: Clarified subject

[SunsetRunner]

Nice suggestion @Mark-D and thanks for sharing within the community. We agree that it would be helpful to use SVG to design more complex UI and we look forward to hearing what other developers think.

[jeremiahlee]

The lack of this feature specifically killed a beautiful watchface I designed.

[icedean]

Please add this feature!  This would make clock face components much more rich with smooth "vectorized" edges and scaling.  Thank you.

[1GR3]

SVG blend modes might be heavy to process but if used wisely they would surely increase the visual experience to a whole new level.

Just for comparison, screenshots of my app in simulator and a sketch made in codepen:

[rlhilton59]

Even just adding polygon support would be a big step forward.  Full path support would be even better and helpful for providing much nicer apps and watch faces.

[factchris]

Is path support still being looked at? I really could use it, especially as you can't currently dynamically create elements in the gui. Thanks!

[GeekBit]

I am also waiting for some drawing/canvas API support. Or the proposed SVG Path support. Wanted to draw a filled triangle but had to create that triangle using 8-bit grayscale PNG format.

[Qompium]

Svg path support would be great for saving some space and adding some extra details in my app. Any updates here?

[petrv]

Anything new about this one? It is a shame there is no response from FitBit on this one for more than 2 years 😞

[Alfinch]

Just wanted to add my voice to this - path support would be fantastic. I just bought a Sense to hack around with, and this limitation is going to make some things much harder to achieve. As rlhilton59 said, even the ability to create polygons would open up a world of possibilities.

[SnowyPear]

I just want to be able to draw a nice graph. We should rally have this 

[Alfinch]

@SnowyPearI've managed to create a graph for the watchface I'm working on, although it's just a massive group of lines, rather than a path:

<g id="graphLineTransform" transform="translate(168, 168)">
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
    <line /><line /><line /><line /><line /><line /><line /><line />
  </g>

I then calculate the x1, x2, y1, and y2 attributes for all of these based on a spline, which results in something which looks smooth enough (the red line):
Unfortunately this only works if you know exactly how many line segments you need, and without bezier curves it's not at all easy to calculate.