SVG to image

classic Classic list List threaded Threaded
15 messages Options
Reply | Threaded
Open this post in threaded view
|

SVG to image

Stephen MacLean via use-livecode
Hi all,

was I deaming when thinking we had a build-in way to convert an
SVG icon to an image in LC to be used as an icon of a button?

I can only find: "drawingSvgCompile" and "drawingSvgCompileFile" in the
dictionary and they don't seem to support SVG icons only XML/SVG files?
What am I missing?

Thanks for any hints!


Best

Klaus
--
Klaus Major
http://www.major-k.de
[hidden email]


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
Klaus,
I would display the SVG image, then do a screen capture of the rect of the image. I'm not at my computer, and forget the specific commands, and it might cause undesirable screen action, depending on what you want it to do, but it would work.
Bill

William Prothero
http://es.earthednet.org

> On Sep 16, 2018, at 8:27 AM, Klaus major-k via use-livecode <[hidden email]> wrote:
>
> Hi all,
>
> was I deaming when thinking we had a build-in way to convert an
> SVG icon to an image in LC to be used as an icon of a button?
>
> I can only find: "drawingSvgCompile" and "drawingSvgCompileFile" in the
> dictionary and they don't seem to support SVG icons only XML/SVG files?
> What am I missing?
>
> Thanks for any hints!
>
>
> Best
>
> Klaus
> --
> Klaus Major
> http://www.major-k.de
> [hidden email]
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
Hi William,

> Am 16.09.2018 um 17:37 schrieb prothero--- via use-livecode <[hidden email]>:
>
> Klaus,
> I would display the SVG image, then do a screen capture of the rect of the image. I'm not at my computer, and forget the specific commands, and it might cause undesirable screen action, depending on what you want it to do, but it would work.

yes, I know how to use the snapshot function, but I wanted to know if I am missing a
specific SVG command for this or if i had only been dreaming of such thing. :-)

The latter I'm afraid...

> Bill
>
> William Prothero
> http://es.earthednet.org
>
>> On Sep 16, 2018, at 8:27 AM, Klaus major-k via use-livecode <[hidden email]> wrote:
>>
>> Hi all,
>>
>> was I deaming when thinking we had a build-in way to convert an
>> SVG icon to an image in LC to be used as an icon of a button?
>>
>> I can only find: "drawingSvgCompile" and "drawingSvgCompileFile" in the
>> dictionary and they don't seem to support SVG icons only XML/SVG files?
>> What am I missing?

Best

Klaus

--
Klaus Major
http://www.major-k.de
[hidden email]


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
Good luck, Klaus.
Bill

William Prothero
http://es.earthednet.org

> On Sep 16, 2018, at 8:43 AM, Klaus major-k via use-livecode <[hidden email]> wrote:
>
> Hi William,
>
>> Am 16.09.2018 um 17:37 schrieb prothero--- via use-livecode <[hidden email]>:
>>
>> Klaus,
>> I would display the SVG image, then do a screen capture of the rect of the image. I'm not at my computer, and forget the specific commands, and it might cause undesirable screen action, depending on what you want it to do, but it would work.
>
> yes, I know how to use the snapshot function, but I wanted to know if I am missing a
> specific SVG command for this or if i had only been dreaming of such thing. :-)
>
> The latter I'm afraid...
>
>> Bill
>>
>> William Prothero
>> http://es.earthednet.org
>>
>>> On Sep 16, 2018, at 8:27 AM, Klaus major-k via use-livecode <[hidden email]> wrote:
>>>
>>> Hi all,
>>>
>>> was I deaming when thinking we had a build-in way to convert an
>>> SVG icon to an image in LC to be used as an icon of a button?
>>>
>>> I can only find: "drawingSvgCompile" and "drawingSvgCompileFile" in the
>>> dictionary and they don't seem to support SVG icons only XML/SVG files?
>>> What am I missing?
>
> Best
>
> Klaus
>
> --
> Klaus Major
> http://www.major-k.de
> [hidden email]
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
In reply to this post by Stephen MacLean via use-livecode
Import the source of a SVG icon widget to a PNG file:
+++++++++++++++++++++++++++++++++++++++++++++++++++++

The iconPath of an SVG icon is path data only (could be used as
"instructions" for a path in LCB).

So try to write a wrapper around it to make it valid SSVG data.

The problem is the bounding box of the path (the values for w
and h), there is no info about and it's hard to estimate from all
the control points of the path.

I tried just now to do it this way (works here, tested several times):

on mouseUp
  lock screen; lock messages
  put the iconPath of widget "SVG Icon" into path
  put 2048 into w -- estimate general width of the icons
  put 2048 into h -- estimate general height of the icons
  put merge(svgWrapper()) into t
  if there is no img "import" then create img "import"
  set text of img "import" to drawingSVGCompile(t)
  cropIt "import" --> because w and h may be too large
  set width of img "import" to 100 --> your target width
  set height of img "import" to 100 --> your target height
  set topleft of img "import" to 10,10
end mouseUp

function svgWrapper
  return "<?xml version=" &quote& "1.0" &quote& " encoding=" &quote& "UTF-8" &quote& "?>" &CR& \
        "<svg" &CR& \
        "   xmlns:svg=" &quote& "http://www.w3.org/2000/svg" &quote& "" &CR& \
        "   xmlns=" &quote& "http://www.w3.org/2000/svg" &quote& "" &CR& \
        "   version=" &quote& "1.0" &quote& "" &CR& \
        "   width=" &quote& "[[w]]" &quote& "  height=" &quote& "[[h]]" &quote& "" &CR& \
        ">" &CR& \
        "<path d=" &quote& "[[path]]" &quote& " />" &CR& \
        "</svg>"end svgWrapper
 
## CROP image ft to its opaque pixels [-hh fecit 2018]
## from my stack SVGHandles89 of "Sample Stacks"
  on cropIt ft
  put the width of img ft into w
  put the height of img ft into h
  put the maskdata of img ft into mData
  put numToByte(0) into c0
  -- left and right transparency limits
  put w into cmin; put 1 into cmax
  repeat with i=0 to h-1
    put i*w into h1
    repeat with j=1 to cmin
      if byte h1+j of mData is not c0 then
        put j into cmin; exit repeat
      end if
    end repeat
    repeat with j=w down to max(cmax,cmin)
      if byte h1+j of mData is not c0 then
        put j into cmax; exit repeat
      end if
    end repeat
  end repeat
  put max(0,cmin-1) into cmin
  put max(1+cmin,min(w,1+cmax)) into cmax
  -- top and bottom transparency limits
  put h into rmin; put 1 into rmax
  repeat with j=cmin to cmax
    repeat with i=0 to rmin-1
      if byte i*w+j of mData is not c0 then
        put i into rmin; exit repeat
      end if
    end repeat
    repeat with i=h-1 down to max(rmax,rmin)
      if byte i*w+j of mData is not c0 then
        put i into rmax; exit repeat
      end if
    end repeat
  end repeat
  put max(0,rmin-1) into rmin
  put max(1+rmin,min(h,1+rmax)) into rmax
  --
  put the left of img ft into L; put the top of img ft into T
  crop img ft to L+cmin,T+rmin,L+cmax,T+rmax
  -- LC Bug: resizes instead of cropping when image has angle <> 0
end cropIt



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
In reply to this post by Stephen MacLean via use-livecode
There is a problem with transparency in the result of
drawingSVGcompile that my "cropIt" should remove:

While an importer via javaScript (SVGHandles89 uses javaScript)
removes the transparency from the data, it does it not with the
result of drawingSVGcompile probably it doesn't use numToByte(0)
for transparency?

*** So just leave out the cropIt, the result is the same (and of
course much faster). But you have a lot of transparency in there
as long as we don't know the bounding box. ***

Perhaps drawing SVG compile could put this info into the result?


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
In reply to this post by Stephen MacLean via use-livecode
Perhaps the drawing library could do with 'CompileIcon' which does the wrapping as your code does and then compiles the resulting SVG XML.

In the interim - IIRC - there is an '_internal' command used in the drawing library which returns the bbox of an SVG path string which will allow you to compute width/height correctly.

Warmest Regards,

Mark.

Sent from my iPhone

> On 16 Sep 2018, at 17:50, hh via use-livecode <[hidden email]> wrote:
>
> Import the source of a SVG icon widget to a PNG file:
> +++++++++++++++++++++++++++++++++++++++++++++++++++++
>
> The iconPath of an SVG icon is path data only (could be used as
> "instructions" for a path in LCB).
>
> So try to write a wrapper around it to make it valid SSVG data.
>
> The problem is the bounding box of the path (the values for w
> and h), there is no info about and it's hard to estimate from all
> the control points of the path.
>
> I tried just now to do it this way (works here, tested several times):
>
> on mouseUp
>  lock screen; lock messages
>  put the iconPath of widget "SVG Icon" into path
>  put 2048 into w -- estimate general width of the icons
>  put 2048 into h -- estimate general height of the icons
>  put merge(svgWrapper()) into t
>  if there is no img "import" then create img "import"
>  set text of img "import" to drawingSVGCompile(t)
>  cropIt "import" --> because w and h may be too large
>  set width of img "import" to 100 --> your target width
>  set height of img "import" to 100 --> your target height
>  set topleft of img "import" to 10,10
> end mouseUp
>
> function svgWrapper
>  return "<?xml version=" &quote& "1.0" &quote& " encoding=" &quote& "UTF-8" &quote& "?>" &CR& \
>        "<svg" &CR& \
>        "   xmlns:svg=" &quote& "http://www.w3.org/2000/svg" &quote& "" &CR& \
>        "   xmlns=" &quote& "http://www.w3.org/2000/svg" &quote& "" &CR& \
>        "   version=" &quote& "1.0" &quote& "" &CR& \
>        "   width=" &quote& "[[w]]" &quote& "  height=" &quote& "[[h]]" &quote& "" &CR& \
>        ">" &CR& \
>        "<path d=" &quote& "[[path]]" &quote& " />" &CR& \
>        "</svg>"end svgWrapper
>
> ## CROP image ft to its opaque pixels [-hh fecit 2018]
> ## from my stack SVGHandles89 of "Sample Stacks"
>  on cropIt ft
>  put the width of img ft into w
>  put the height of img ft into h
>  put the maskdata of img ft into mData
>  put numToByte(0) into c0
>  -- left and right transparency limits
>  put w into cmin; put 1 into cmax
>  repeat with i=0 to h-1
>    put i*w into h1
>    repeat with j=1 to cmin
>      if byte h1+j of mData is not c0 then
>        put j into cmin; exit repeat
>      end if
>    end repeat
>    repeat with j=w down to max(cmax,cmin)
>      if byte h1+j of mData is not c0 then
>        put j into cmax; exit repeat
>      end if
>    end repeat
>  end repeat
>  put max(0,cmin-1) into cmin
>  put max(1+cmin,min(w,1+cmax)) into cmax
>  -- top and bottom transparency limits
>  put h into rmin; put 1 into rmax
>  repeat with j=cmin to cmax
>    repeat with i=0 to rmin-1
>      if byte i*w+j of mData is not c0 then
>        put i into rmin; exit repeat
>      end if
>    end repeat
>    repeat with i=h-1 down to max(rmax,rmin)
>      if byte i*w+j of mData is not c0 then
>        put i into rmax; exit repeat
>      end if
>    end repeat
>  end repeat
>  put max(0,rmin-1) into rmin
>  put max(1+rmin,min(h,1+rmax)) into rmax
>  --
>  put the left of img ft into L; put the top of img ft into T
>  crop img ft to L+cmin,T+rmin,L+cmax,T+rmax
>  -- LC Bug: resizes instead of cropping when image has angle <> 0
> end cropIt
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
I will point out that not everything will translate exactly between an icon
and a compiled drawing.  See this thread on the forum:
http://forums.livecode.com/viewtopic.php?f=10&t=30441

I created a stack that will take an SVG and display it in a browser widget,
an icon, and as a compiled image.  You will need to start with a full SVG
image file though.  The stack extracts the path info (assumes that it is a
path).

A large selection of icon collections is available here:
https://github.com/leungwensen/svg-icon


On Sun, Sep 16, 2018 at 12:27 PM Mark Waddingham via use-livecode <
[hidden email]> wrote:

> Perhaps the drawing library could do with 'CompileIcon' which does the
> wrapping as your code does and then compiles the resulting SVG XML.
>
> In the interim - IIRC - there is an '_internal' command used in the
> drawing library which returns the bbox of an SVG path string which will
> allow you to compute width/height correctly.
>
> Warmest Regards,
>
> Mark.
>
> Sent from my iPhone
>
> > On 16 Sep 2018, at 17:50, hh via use-livecode <
> [hidden email]> wrote:
> >
> > Import the source of a SVG icon widget to a PNG file:
> > +++++++++++++++++++++++++++++++++++++++++++++++++++++
> >
> > The iconPath of an SVG icon is path data only (could be used as
> > "instructions" for a path in LCB).
> >
> > So try to write a wrapper around it to make it valid SSVG data.
> >
> > The problem is the bounding box of the path (the values for w
> > and h), there is no info about and it's hard to estimate from all
> > the control points of the path.
> >
> > I tried just now to do it this way (works here, tested several times):
> >
> > on mouseUp
> >  lock screen; lock messages
> >  put the iconPath of widget "SVG Icon" into path
> >  put 2048 into w -- estimate general width of the icons
> >  put 2048 into h -- estimate general height of the icons
> >  put merge(svgWrapper()) into t
> >  if there is no img "import" then create img "import"
> >  set text of img "import" to drawingSVGCompile(t)
> >  cropIt "import" --> because w and h may be too large
> >  set width of img "import" to 100 --> your target width
> >  set height of img "import" to 100 --> your target height
> >  set topleft of img "import" to 10,10
> > end mouseUp
> >
> > function svgWrapper
> >  return "<?xml version=" &quote& "1.0" &quote& " encoding=" &quote&
> "UTF-8" &quote& "?>" &CR& \
> >        "<svg" &CR& \
> >        "   xmlns:svg=" &quote& "http://www.w3.org/2000/svg" &quote& ""
> &CR& \
> >        "   xmlns=" &quote& "http://www.w3.org/2000/svg" &quote& "" &CR&
> \
> >        "   version=" &quote& "1.0" &quote& "" &CR& \
> >        "   width=" &quote& "[[w]]" &quote& "  height=" &quote& "[[h]]"
> &quote& "" &CR& \
> >        ">" &CR& \
> >        "<path d=" &quote& "[[path]]" &quote& " />" &CR& \
> >        "</svg>"end svgWrapper
> >
> > ## CROP image ft to its opaque pixels [-hh fecit 2018]
> > ## from my stack SVGHandles89 of "Sample Stacks"
> >  on cropIt ft
> >  put the width of img ft into w
> >  put the height of img ft into h
> >  put the maskdata of img ft into mData
> >  put numToByte(0) into c0
> >  -- left and right transparency limits
> >  put w into cmin; put 1 into cmax
> >  repeat with i=0 to h-1
> >    put i*w into h1
> >    repeat with j=1 to cmin
> >      if byte h1+j of mData is not c0 then
> >        put j into cmin; exit repeat
> >      end if
> >    end repeat
> >    repeat with j=w down to max(cmax,cmin)
> >      if byte h1+j of mData is not c0 then
> >        put j into cmax; exit repeat
> >      end if
> >    end repeat
> >  end repeat
> >  put max(0,cmin-1) into cmin
> >  put max(1+cmin,min(w,1+cmax)) into cmax
> >  -- top and bottom transparency limits
> >  put h into rmin; put 1 into rmax
> >  repeat with j=cmin to cmax
> >    repeat with i=0 to rmin-1
> >      if byte i*w+j of mData is not c0 then
> >        put i into rmin; exit repeat
> >      end if
> >    end repeat
> >    repeat with i=h-1 down to max(rmax,rmin)
> >      if byte i*w+j of mData is not c0 then
> >        put i into rmax; exit repeat
> >      end if
> >    end repeat
> >  end repeat
> >  put max(0,rmin-1) into rmin
> >  put max(1+rmin,min(h,1+rmax)) into rmax
> >  --
> >  put the left of img ft into L; put the top of img ft into T
> >  crop img ft to L+cmin,T+rmin,L+cmax,T+rmax
> >  -- LC Bug: resizes instead of cropping when image has angle <> 0
> > end cropIt
> >
> >
> >
> > _______________________________________________
> > use-livecode mailing list
> > [hidden email]
> > Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> > http://lists.runrev.com/mailman/listinfo/use-livecode
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
Hi Brian,

> Am 16.09.2018 um 22:14 schrieb Brian Milby via use-livecode <[hidden email]>:
>
> I will point out that not everything will translate exactly between an icon
> and a compiled drawing.  See this thread on the forum:
> http://forums.livecode.com/viewtopic.php?f=10&t=30441
>
> I created a stack that will take an SVG and display it in a browser widget,
> an icon, and as a compiled image.  You will need to start with a full SVG
> image file though.  The stack extracts the path info (assumes that it is a
> path).
>
> A large selection of icon collections is available here:
> https://github.com/leungwensen/svg-icon

don't worry:
....
import snapshot from rect(the rect of widget "Your SVG") of widget "Your SVG"
...
works fine for my needs. :-)


Best

Klaus
--
Klaus Major
http://www.major-k.de
[hidden email]


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
In reply to this post by Stephen MacLean via use-livecode
BoundingBox widget / Compile iconPath to image
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

The real point that came up here is how to get the bounding
box of an SVG path that is used as iconPath of the svgIcon
widget. With that it is simple to prepare the path as input
for drawingSVGcompile.

I wrote this evening a widget that computes the bounding box.

A demo stack, incl. an installer button for this "BB widget",
shows the 35 lines of script (incl. the SVG template) needed
to do the steps for "compile iconPath to image" described
above. See

http://livecodeshare.runrev.com/stack/900

Conversion via JavaScript is of course (currently) better as
drawingSVGCompile. Jonathan Lynch showed this technique to
the community before a year or so, and there are some stacks
on "Sample Stacks/revOnline" that use this technique.

DrawingSVGCompile is (as Mark wrote) still beta.
On the other hand it does a pretty good job with complicated
but not-too-complex SVGs, e.g. the "postscript-tiger".

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
Jonathan's stack is very cool.  I wasn't minimizing the work in the engine
though, just pointing out that particular images would need to be tested to
see which method provides the needed results.  There can be significant
differences in the object size depending on which version is used (path,
full SVG, compiled SVG) - and it isn't always what you would expect.  Most
of the time, the compiled SVG is the smallest and since support is built
into the engine it would be a good choice where the particular image
supports it.

I'll need to take your stack/widget and see how what it generates compares
to conversions from the source svg file (for the Font Awesome stuff).
Since you are adding back information that was stripped when converting to
an icon, my guess is that the results should be pretty much the same.

@Klaus - have you thought about just using the svg icon widget instead of a
button?  I've done that in my SvgIconTool stack and used a behavior to make
it behave somewhat like a button would (hilite on mouseDown, etc.).

Brian

On Sun, Sep 16, 2018 at 7:25 PM hh via use-livecode <
[hidden email]> wrote:

> BoundingBox widget / Compile iconPath to image
> ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
>
> The real point that came up here is how to get the bounding
> box of an SVG path that is used as iconPath of the svgIcon
> widget. With that it is simple to prepare the path as input
> for drawingSVGcompile.
>
> I wrote this evening a widget that computes the bounding box.
>
> A demo stack, incl. an installer button for this "BB widget",
> shows the 35 lines of script (incl. the SVG template) needed
> to do the steps for "compile iconPath to image" described
> above. See
>
> http://livecodeshare.runrev.com/stack/900
>
> Conversion via JavaScript is of course (currently) better as
> drawingSVGCompile. Jonathan Lynch showed this technique to
> the community before a year or so, and there are some stacks
> on "Sample Stacks/revOnline" that use this technique.
>
> DrawingSVGCompile is (as Mark wrote) still beta.
> On the other hand it does a pretty good job with complicated
> but not-too-complex SVGs, e.g. the "postscript-tiger".
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
Hi Brian,

> Am 17.09.2018 um 06:06 schrieb Brian Milby via use-livecode <[hidden email]>:
>
> Jonathan's stack is very cool.  I wasn't minimizing the work in the engine
> though, just pointing out that particular images would need to be tested to
> see which method provides the needed results.  There can be significant
> differences in the object size depending on which version is used (path,
> full SVG, compiled SVG) - and it isn't always what you would expect.  Most
> of the time, the compiled SVG is the smallest and since support is built
> into the engine it would be a good choice where the particular image
> supports it.
>
> I'll need to take your stack/widget and see how what it generates compares
> to conversions from the source svg file (for the Font Awesome stuff).
> Since you are adding back information that was stripped when converting to
> an icon, my guess is that the results should be pretty much the same.
>
> @Klaus - have you thought about just using the svg icon widget instead of a
> button?  I've done that in my SvgIconTool stack and used a behavior to make
> it behave somewhat like a button would (hilite on mouseDown, etc.).

sometimes I don't need a workaround but just an answer to what I am asking.
And this has already been answered some esoteric replies ago. :-)

Thank you!

> Brian
>
> On Sun, Sep 16, 2018 at 7:25 PM hh via use-livecode <
> [hidden email]> wrote:
>
>> BoundingBox widget / Compile iconPath to image
>> ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
>>
>> The real point that came up here is how to get the bounding
>> box of an SVG path that is used as iconPath of the svgIcon
>> widget. With that it is simple to prepare the path as input
>> for drawingSVGcompile.
>>
>> I wrote this evening a widget that computes the bounding box.
>>
>> A demo stack, incl. an installer button for this "BB widget",
>> shows the 35 lines of script (incl. the SVG template) needed
>> to do the steps for "compile iconPath to image" described
>> above. See
>>
>> http://livecodeshare.runrev.com/stack/900
>>
>> Conversion via JavaScript is of course (currently) better as
>> drawingSVGCompile. Jonathan Lynch showed this technique to
>> the community before a year or so, and there are some stacks
>> on "Sample Stacks/revOnline" that use this technique.
>>
>> DrawingSVGCompile is (as Mark wrote) still beta.
>> On the other hand it does a pretty good job with complicated
>> but not-too-complex SVGs, e.g. the "postscript-tiger".

Best

Klaus

--
Klaus Major
http://www.major-k.de
[hidden email]


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
In reply to this post by Stephen MacLean via use-livecode
> Brian wrote:
> I'll need to take your stack/widget and see how what it generates
> compares to conversions from the source svg file (for the Font
> Awesome stuff). Since you are adding back information that was
> stripped when converting to an icon, my guess is that the results
> should be pretty much the same.

There ARE changes;
I translate the path to have a bounding box with topleft 0,0 and
use this translated path.
This prevents horizotal and especially vertical offsets (which
is often present and effectively adds unneeded transparency at top).

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
Ok, so your results should be the same as the "trimmed" version of the
icons in this repo:
https://github.com/leungwensen/svg-icon

For most of the icons on that site, the removal of pad is fine.  There are
a few where the pad is actually important since there are multiple icons
where some are designed to have blank space.  The best examples that I can
find are the WiFi strength icons in the Metro set.
https://leungwensen.github.io/svg-icon/#metro

Since the repo contains the full SVG of the icons (in both trimmed and
untrimmed versions), if anyone needs one of these icons untrimmed, they can
go to the repo and use the full SVG file directly.  I only mention this
because when I originally wrote the SvgIconTool I noticed that some of the
icons looked odd due to the padding removal.

That demo stack and widget are very effective.  I switched over to a couple
different icon sets from that site and everything works great.  What is
interesting is that some of the compiled icons look better when compiled
using the template compared to the SVG file on the site.  I'll need to look
at that some more to see if I can figure out why.  One difference is that
the files use viewBox instead of H & W.

Thanks for another useful widget!

On Mon, Sep 17, 2018 at 9:56 AM hh via use-livecode <
[hidden email]> wrote:

> > Brian wrote:
> > I'll need to take your stack/widget and see how what it generates
> > compares to conversions from the source svg file (for the Font
> > Awesome stuff). Since you are adding back information that was
> > stripped when converting to an icon, my guess is that the results
> > should be pretty much the same.
>
> There ARE changes;
> I translate the path to have a bounding box with topleft 0,0 and
> use this translated path.
> This prevents horizotal and especially vertical offsets (which
> is often present and effectively adds unneeded transparency at top).
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: SVG to image

Stephen MacLean via use-livecode
I just did a little bit of comparison of the path before and after your
widget translated it.  The path data is quite a bit different (besides just
going to 6 decimal places).  Something about how the path is adjusted makes
it work better with the path compiler, but it does increase the compiled
image size.

On Tue, Sep 18, 2018 at 12:11 AM Brian Milby <[hidden email]> wrote:

> Ok, so your results should be the same as the "trimmed" version of the
> icons in this repo:
> https://github.com/leungwensen/svg-icon
>
> For most of the icons on that site, the removal of pad is fine.  There are
> a few where the pad is actually important since there are multiple icons
> where some are designed to have blank space.  The best examples that I can
> find are the WiFi strength icons in the Metro set.
> https://leungwensen.github.io/svg-icon/#metro
>
> Since the repo contains the full SVG of the icons (in both trimmed and
> untrimmed versions), if anyone needs one of these icons untrimmed, they can
> go to the repo and use the full SVG file directly.  I only mention this
> because when I originally wrote the SvgIconTool I noticed that some of the
> icons looked odd due to the padding removal.
>
> That demo stack and widget are very effective.  I switched over to a
> couple different icon sets from that site and everything works great.  What
> is interesting is that some of the compiled icons look better when compiled
> using the template compared to the SVG file on the site.  I'll need to look
> at that some more to see if I can figure out why.  One difference is that
> the files use viewBox instead of H & W.
>
> Thanks for another useful widget!
>
> On Mon, Sep 17, 2018 at 9:56 AM hh via use-livecode <
> [hidden email]> wrote:
>
>> > Brian wrote:
>> > I'll need to take your stack/widget and see how what it generates
>> > compares to conversions from the source svg file (for the Font
>> > Awesome stuff). Since you are adding back information that was
>> > stripped when converting to an icon, my guess is that the results
>> > should be pretty much the same.
>>
>> There ARE changes;
>> I translate the path to have a bounding box with topleft 0,0 and
>> use this translated path.
>> This prevents horizotal and especially vertical offsets (which
>> is often present and effectively adds unneeded transparency at top).
>>
>> _______________________________________________
>> use-livecode mailing list
>> [hidden email]
>> Please visit this url to subscribe, unsubscribe and manage your
>> subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode
>>
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode