any chance of scalable (i.e. 9 slice) svgs?

[georgejecook]

or if not, any pointers, on how one might go about implementing it?

[Emasoft]

SVG are already scalable, being vector based.

For example for gradients I just use an SVG image. A simple rectangle drawn in Inkscape, where I can edit and preview all gradients colors, steps, orientation, etc. This is the svg file content:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="600" width="600" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 600 600">
 <defs>
  <linearGradient id="linearGradient4297" y2="600" gradientUnits="userSpaceOnUse" x2="300" x1="300">
   <stop stop-color="#e66aff" offset="0"/>
   <stop stop-color="#fef8ff" offset="1"/>
  </linearGradient>
 </defs>
 <rect style="color:#000000" height="600" width="600" y="0" x="0" fill="url(#linearGradient4297)"/>
</svg>

Then I use the SVG plugin to display it and resize it from the default size (viewBox of 600x600 pixels) to fit any iOS or Android app frame or button background. In this way artists in my team can change all graphic elements and color themes without my intervention, just editing the SVG files in Inkscape.

A 9-slice element is something different and more complex. Is the composition of both a regular svg image, and a 3x3 grid definition associated with it. Each sub element of the 3x3 grid is flagged with one of the following tags:

• "resizable horizontally"
• "resizable vertically"
• "resizable in both directions"
• "not resizable".

The renderer of the app should be aware of this and be able to render the svg image scaled according to the grid. Usually this is used to create frame border, setting the corners of the 3x3 grid as "not resizable", the left and right elements as "resizable vertically", and the top and bottom elements as "resizable horizontally". The central element must be set to "resizable in both directions". The Android SDK already implements this, while on iOS there is a more limited implementation. A cross platform implementation of this would be very useful for using 9-tiles on Xamarin.Forms. The Xamarin.Forms plugin for SVG should add a method to associate the 3x3 grid matrix to the current loaded svg image. It would be useful to load the 3x3 grid data from the SVG image itself, using some metadata. But currently there is no plugin that allows to edit that 3x3 grid in Inkscape or Illustrator and saving it in the SVG file along with the image. A dedicated editor or plugin should be created. Otherwise the grid should be defined by hand in the app source code, something very annoying, especially when the svg images are changed by artists during production.

[Emasoft]

I stand corrected: there is a way to apply 9-slice grid to an SVG element. And that is by using the CSS style attribute BORDER-IMAGE-SLICE. The SVG 1.1 format includes almost all CSS style attributes.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

Here is an example SVG button resized with border-image-slice: http://codepen.io/Emasoft/pen/qEsFr

It would be great to have this functionality supported by Xamarin.Forms.Plugins.