The coming of SVG

[Mark Waddingham]

On 2017-11-05 15:15, hh via use-livecode wrote:
> Until now I saw it like that:
> <canvas>, <svg> and <picture> are HTML5 tags.
> And <canvas> and <svg> are different concepts. Roughly
> 
> <svg> is more an XML-based vector graphics format,

Yes - SVG is a way of encoding a sequence of vector graphics commands 
using XML.

> <canvas> is more an API for drawing on a bitmap surface.

True - but you can also view the canvas as an element which allows you 
to use 2D vector graphics commands from JavaScript to draw, and then 
display.

The HTML5 canvas element (and the canvas API as specified by W3C as it 
stands) is a proper subset of the LCB canvas (or will be after I've 
finished making a small tweak or two with regards separate stroke/fill 
paints).

Indeed, by extension you can view both the LCB and HTML5 Canvas APIs as 
the procedural way to render SVG (HTML5 Canvas API is not quite fully 
featured enough to make this mapping 1-1, but the LCB Canvas is almost 
that, and will become that).

Looking at things from this point of view, the control we are discussing 
is the deferred / data-driven way to display such vector graphics 
commands (without having to create separate graphic objects and such).

When thought about from this point of view, it almost becomes 'obvious' 
that canvas is the correct choice - the only difference between the 
canvas in LCS and the canvas in LCB, is that the canvas in LCB requires 
you to execute a sequence of commands whereas the proposed control in 
LCS is a sequence of deferred commands, which are executed when the 
control needs to be rendered.

> Will it be possible to edit properties:
> 
> Getting and setting the points of a graphic?
> Getting and setting the imagedata of a placed image?
> Getting and setting the specific data of an SVG?

That is definitely a potential future direction. The canvas control's 
'content' is (at present) a sequence of commands representing the SVG 
tags which render something, along with state setting commands for 
stroke/fill/transform.

There is no reason why, in the future, you shouldn't be able to edit 
already existing commands - although for the time being you would need 
to rewrite and set the svgText property.

> Can it be used for exactly one of the objects or also a mix of the
> three, say an SVGicon on top of an image?

Yes - you could create an SVG fragment which describes those objects, 
and then set the svgText.

The svgText property is the same idea as the htmlText property of a 
field - it is a fully faithful representation of the field's content, 
encoded as string using HTML (well HTML-like).

> For example:
> A lot of people are not able to write SVG, they are simply copying
> out of programs like 'inkscape' and would like to paste the code
> into a property of the control. Will that be possible?

Yes - the, you will be able to set the svgText to SVG generated from any 
program. The SVG compiler removes anything it doesn't understand (as per 
the requirements of the SVG spec), and renders what is left. i.e. There 
is no need to externally process the SVG source in any way (unless you 
want to tweak it of course).

Warmest Regards,

Mark.

-- 
Mark Waddingham ~ mark at livecode.com ~ http://www.livecode.com/
LiveCode: Everyone can create apps