Two of the main benefits of using SVG images and displaying them in picture variables are that they can be scaled programmatically and that they can be interactive and respond to mouse events. The best Picture Format (from a Picture Variable's Display properties) for that is "Truncated (non-centered)".

For resizing and scaling, this lets the SVG and your code handle everything. The image is put in the picture variable exactly as is with no scaling, centering or any other formatting. This lets you resize the SVG image based on the size of picture variable as you wish.

The "On Background" setting also does this but it interferes with mouse events. "On Background" puts your image on the background and allows the user to drag the image around on the background even if drag and drop has been turned off for the form object. This means that mouse events are not handled as normal, since they must be used for the built in drag mechanism. In general you may not want a user dragging your SVG image around in a picture variable.

For these reasons, "Truncated (non-centered)" is the best display format for completely programmatically controlled SVG images.