Several questions about the SDK's SVG

[hbehrens]

Thank you for putting up such an extensive documentation page. I am excited to read about the possibilities it provides!

I am about to take my first steps with the Fitbit SDK and do have a few questions regarding the SVG variant you provide:

general:

• are floating point coordinates supported? If not, how do I center a <circle> element on the screen?
• do all elements support transforms or only <g>? If so, does this include masks?
• will multiple transform directives be concatenated, e.g. translate(..) rotate(...) translate(...)?
• can I provide the resulting transform matrix manually with matrix(...) or matrix3d(...) ?
• will elements outside the viewport efficiently be skipped over during drawing?
• according to your CSS documentation, there’s no way to provide an alpha component (e.g. rgba(...) or #RRGGBBAA), is this correct?

<line>:

• when using <line>, does the coordinate x1="0" y1="0" describe the center of the top left pixel or its top left corner?

<image>:

• is there a way to repeat the content of an image or will the content always be stretched to fully fill the rectangle described by width and height regardless of the actual bitmap dimensions?
• can I set href to (arbitrary) PNG/JPEG files I previously stored at runtime using writeFileSync()?

<text>:

• is there a way to position text according to its base line (e.g. alignment-baseline attribute)?

<arc>:

• what happens if sweep-angle describes multiple revolutions? Will it just be clamped to 360?
• what happens if sweep-angle is negative? will there be nothing drawn or will the values conceptually be adjusted accordingly as in new-start-angle = start-angle + sweep-angle, new-sweep-angle = -sweep-angle?
• is it ok, to pass negative values for start-angle? Or do I need to make sure it’s 0 <= start-angle < 360?
• what happens for negative values for arc-width? Will the arc “expand” to the outside?
• is it safe to pass values for arc-width that exceed the radius?
• what happens if the bounding box of the arc doesn’t describe a square (width != height)?

<gradientRect>:

• will transforms be applied to the gradient as well?

<mask>:

• how will an <image> inside a mask affect content? Will it be treated as a solid <rect>, will the luminance be used, or its alpha channel?
• can I use a <gradientRect> for masking? If colors don't support alpha, will their luminance be used?

[JonFitbit]

Hi Heiko,

These are some excellent questions. I'd like to spend a bit of time to answer them properly, and ideally also update the SVG documentation to include examples of this too.

I will add another reply when I have all of your answers.

Thanks for taking the time to provide such a comprehensive list of questions!

Jon

[UnsolvedCypher]

Hi Jon,

Is there any update on this? In particular, I am curious about the alignment-baseline attribute, since without it it's not currently possible to center text vertically as far as I can see. While Fitbit does provide some ways to center text on the whole page, I need it centered inside of another element.