Smalltalk › Amber Smalltalk

SVG anyone?

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

10 messages Options

Rudi Angela-2

SVG anyone?

I'd like to be able to also use SVG with Amber, so I was wondering: has anyone done anything along these lines?

And if not: how would you go about implementing SVG support? Just by defining TagBrush subclasses for SVG elements? Or a separate SVGCanvas?

abergel

Re: SVG anyone?

Just wondering why Svg and not using the canvas?

Alexandre

Le 9 oct. 2011 à 13:11, Rudi Angela <[hidden email]> a écrit :

> I'd like to be able to also use SVG with Amber, so I was wondering: has anyone done anything along these lines?
> And if not: how would you go about implementing SVG support? Just by defining TagBrush subclasses for SVG elements? Or a separate SVGCanvas?
>
>

Rudi Angela-2

Re: SVG anyone?

I want to also be able to integrate drawings made elsewhere (e.g. with Adobe Illustrator of Inkscape).

abergel

Re: SVG anyone?

Ok, good reason

Alexandre

Le 9 oct. 2011 à 14:19, Rudi Angela <[hidden email]> a écrit :

> I want to also be able to integrate drawings made elsewhere (e.g. with Adobe Illustrator of Inkscape).

Bernat Romagosa

Re: SVG anyone?

It should be quite straightforward:

HTMLCanvas >> svg

^ self tag: 'svg'

And then, for instance:

HTMLCanvas >> line

^ self tag: 'line'

MyWidget >> renderOn: html

html svg

with: [ html line at:'x1' put: 30;

at: 'y1' put: 40;

at: 'x2' put: 130;

at: 'y2' put: 140 ]

Untried, but I think it should work :)

Cheers,

2011/10/9 Alexandre Bergel <[hidden email]>

Ok, good reason

Alexandre

Le 9 oct. 2011 à 14:19, Rudi Angela <[hidden email]> a écrit :

> I want to also be able to integrate drawings made elsewhere (e.g. with Adobe Illustrator of Inkscape).

--
Bernat Romagosa.

Raimon Grau

Re: SVG anyone?

In reply to this post by Rudi Angela-2

On Sun, Oct 9, 2011 at 7:19 PM, Rudi Angela <[hidden email]> wrote:
> I want to also be able to integrate drawings made elsewhere (e.g. with Adobe
> Illustrator of Inkscape).

You can try raphael.js [1], a svg lib in javascript. I just
translated the simplest example and worked ok in amber.

HTH,

Rai

1. http://raphaeljs.com/

--
"Circular logic is the best type of logic because it's circular"
blog -> http://puntoblogspot.blogspot.com

Hannes Hirzel

Re: SVG anyone?

Or for ready-made pictures (Adobe Illustrator or Inkscape as Rudi
asks) maybe something like

renderContentOn: html
html html: self svgString

svgString
^ '<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="800">
......'

--Hannes

On 10/10/11, Raimon Grau <[hidden email]> wrote:

> On Sun, Oct 9, 2011 at 7:19 PM, Rudi Angela <[hidden email]> wrote:
>> I want to also be able to integrate drawings made elsewhere (e.g. with
>> Adobe
>> Illustrator of Inkscape).
>
> You can try raphael.js [1], a svg lib in javascript. I just
> translated the simplest example and worked ok in amber.
>
> HTH,
>
> Rai
>
> 1. http://raphaeljs.com/
>
> --
> "Circular logic is the best type of logic because it's circular"
> blog -> http://puntoblogspot.blogspot.com
>

Bernat Romagosa

Re: SVG anyone?

I'm afraid we don't have #html: in Amber, but you can always do:

something asJQuery append: aRawHtmlString

Cheers,

2011/10/10 H. Hirzel <[hidden email]>

Or for ready-made pictures (Adobe Illustrator or Inkscape as Rudi
asks) maybe something like

renderContentOn: html
html html: self svgString

svgString
^ '<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="800">
......'

--Hannes

On 10/10/11, Raimon Grau <[hidden email]> wrote:
> On Sun, Oct 9, 2011 at 7:19 PM, Rudi Angela <[hidden email]> wrote:
>> I want to also be able to integrate drawings made elsewhere (e.g. with
>> Adobe
>> Illustrator of Inkscape).
>
> You can try raphael.js [1], a svg lib in javascript. I just
> translated the simplest example and worked ok in amber.
>
> HTH,
>
> Rai
>
> 1. http://raphaeljs.com/
>
> --
> "Circular logic is the best type of logic because it's circular"
> blog -> http://puntoblogspot.blogspot.com
>

--
Bernat Romagosa.

Hannes Hirzel

Re: SVG anyone?

Good suggestion, Bernat

'div.main' asJQuery append:
'<svg><polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" /></svg>'

(example from: http://www.w3schools.com/svg/tryit.asp?filename=trysvg_polyline2
)

works fine (tested in FF4 and Chrome 12); tried out on page
http://localhost:4000 (the entry page)

--Hannes

On 10/10/11, Bernat Romagosa <[hidden email]> wrote:

> I'm afraid we don't have #html: in Amber, but you can always do:
>
> something asJQuery append: aRawHtmlString
>
> Cheers,
>
> 2011/10/10 H. Hirzel <[hidden email]>
>
>> Or for ready-made pictures (Adobe Illustrator or Inkscape as Rudi
>> asks) maybe something like
>>
>> renderContentOn: html
>> html html: self svgString
>>
>> svgString
>> ^ '<svg xmlns="http://www.w3.org/2000/svg"
>> xmlns:xlink="http://www.w3.org/1999/xlink"
>> height="800">
>> ......'
>>
>>
>> --Hannes
>>
>> On 10/10/11, Raimon Grau <[hidden email]> wrote:
>> > On Sun, Oct 9, 2011 at 7:19 PM, Rudi Angela <[hidden email]>
>> wrote:
>> >> I want to also be able to integrate drawings made elsewhere (e.g. with
>> >> Adobe
>> >> Illustrator of Inkscape).
>> >
>> > You can try raphael.js [1], a svg lib in javascript. I just
>> > translated the simplest example and worked ok in amber.
>> >
>> > HTH,
>> >
>> > Rai
>> >
>> > 1. http://raphaeljs.com/
>> >
>> > --
>> > "Circular logic is the best type of logic because it's circular"
>> > blog -> http://puntoblogspot.blogspot.com
>> >
>>
>
>
>
> --
> Bernat Romagosa.
>

Daniel Lyons

Re: SVG anyone?

In reply to this post by Raimon Grau

Hi,

On Monday, October 10, 2011 2:25:52 AM UTC-6, Raimon Grau wrote:

On Sun, Oct 9, 2011 at 7:19 PM, Rudi Angela wrote:
> I want to also be able to integrate drawings made elsewhere (e.g. with Adobe
> Illustrator of Inkscape).
You can try raphael.js [1], a svg lib in javascript. I just
translated the simplest example and worked ok in amber.

Hate to be dense, but could you share this simple example you translated into Raphael? I know Raphael but am just starting to learn Amber.

Thanks!