Import SVG with Multi-Path and Two colors

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

Import SVG with Multi-Path and Two colors

Stephen Barncard via use-livecode
I would like to import an SVG that has multiple paths and which two colors. Using Illustrator or Inkscape, merge compound path make them all the same color

<path class="cls-3" d="M22.5,169.6a26.31,26.31,0,0,0,12.
4,3.3c6,0,9.3-2.8,9.3-7,0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9,0-8.4,7-14.7,18.1-14.7a26.52,26.52,0,0,1,12.3,2.6l-2.3,7.5a21.56,21.56,0,0,0-10.2-2.4c-5.9,0-8.5,3.2-8.5,6.2,0,4,3,5.8,9.8,8.4,8.9,3.3,13.2,7.8,13.2,15.2,0,8.2-6.2,15.4-19.5,15.4-5.4,0-11-1.5-13.8-3.2ZM52,114.5l-11.5,9.1H33l8.7-9.1Z"/><path
class="cls-3"
d="M73.6,129.2c-.3,10.9-.5,27.4-.5,49.3V180c-1.7.1-4.3.2-7.8.2l-2-.2v-2.2c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43,16.43,0,0,1,6-1l4.4.1v2.8Z"/><path
class="cls-3"
d="M112.1,180H101.6a272.79,272.79,0,0,1-19.9-52.3l9.4-1.9c4.4,18.5,9.7,33.3,15.7,44.3,6.1-11,11.3-25.8,15.7-44.3l9.4,1.9A262.07,262.07,0,0,1,112.1,180Z"/><path
class="cls-3"
d="M169.9,180.8c-.7-4.3-1.7-8.7-2.9-13.3H141.2c-1.2,4.6-2.1,9-2.8,13.3l-10.3-1.6a95.11,95.11,0,0,1,3.2-11.6c-.4,0-1.3-.1-2.7-.2l.2-8.3h5.1a164,164,0,0,1,6.9-16c2.7-5.4,5.4-10.7,8.1-16.2l10.3-.5,8.4,17.1a150.36,150.36,0,0,1,7.2,17.7c.9,2.8,1.8,5.6,2.8,8.4a92.94,92.94,0,0,1,2.5,9.7Zm-15.7-43.5A142.72,142.72,0,0,0,144,159c7.3.2,14.1.2,20.3.2-2-5-3.5-8.6-4.6-10.8A104.39,104.39,0,0,0,154.2,137.3Z"/><path
class="cls-4"
d="M23.8,72.3a26.31,26.31,0,0,0,12.4,3.3c6,0,9.3-2.8,9.3-7,0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9,0-8.4,7-14.7,18.1-14.7A26.52,26.52,0,0,1,53,33.1l-2.3,7.5a21.56,21.56,0,0,0-10.2-2.4c-5.9,0-8.5,3.2-8.5,6.2,0,4,3,5.8,9.8,8.4C50.7,56.1,55,60.6,55,68c0,8.2-6.2,15.4-19.5,15.4-5.4,0-11-1.5-13.8-3.2Zm29.6-55L41.9,26.4H34.3L43,17.3Z"/><path
class="cls-4"
d="M74.9,31.9c-.4,11-.5,27.4-.5,49.4v1.5c-1.7.1-4.3.2-7.8.2l-2-.2V80.6c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43,16.43,0,0,1,6-1l4.4.1v2.7Z"/><path
class="cls-4"
d="M113.5,82.7H103A272.79,272.79,0,0,1,83.1,30.4l9.4-1.9c4.4,18.5,9.7,33.3,15.7,44.3q9.15-16.5,15.7-44.3l9.4,1.9A263.57,263.57,0,0,1,113.5,82.7Z"/><path
class="cls-4"
d="M171.2,83.5c-.7-4.3-1.7-8.7-2.9-13.3H142.5c-1.2,4.6-2.1,9-2.8,13.3l-10.3-1.6a95.11,95.11,0,0,1,3.2-11.6c-.4,0-1.3-.1-2.7-.2l.2-8.3h5.1a164,164,0,0,1,6.9-16c2.7-5.4,5.4-10.7,8.1-16.2l10.3-.5,8.4,17.1a150.36,150.36,0,0,1,7.2,17.7c.9,2.8,1.8,5.6,2.8,8.4a92.94,92.94,0,0,1,2.5,9.7ZM155.6,40a142.72,142.72,0,0,0-10.2,21.7c7.3.2,14.1.2,20.3.2-2-5-3.5-8.6-4.6-10.8C159.1,46.7,157.2,43,155.6,40Z"/>

But the following SVG imports fine as an image in LC and has multiple colors. Granted they are all circles, but can't the above by turned into this format?

<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="home1" transform="translate(-48.000000, -48.000000)">
            <g id="home-colors" transform="translate(49.000000, 49.000000)">
                <circle id="Oval" stroke="#FFFFFF" stroke-width="1.21" fill-opacity="0.364182692" fill="#000000" cx="31.46" cy="31.46" r="31.46"></circle>
                <g id="Group-3" transform="translate(13.310000, 12.100000)">
                    <circle id="Oval" fill="#F4333B" cx="17.80515" cy="4.62825" r="4.62825"></circle>
                    <circle id="Oval-Copy-5" fill="#32AE60" cx="17.80515" cy="35.22915" r="4.62825"></circle>
                    <circle id="Oval-Copy-4" fill="#FC7C04" cx="31.09095" cy="12.25125" r="4.62825"></circle>
                    <circle id="Oval-Copy-9" fill="#B34AFF" cx="17.69625" cy="19.87425" r="4.62825"></circle>
                    <circle id="Oval-Copy-7" fill="#F3CB11" cx="31.09095" cy="27.60615" r="4.62825"></circle>
                    <circle id="Oval-Copy-3" fill="#4B87FF" cx="4.62825" cy="12.25125" r="4.62825"></circle>
                    <circle id="Oval-Copy-6" fill="#45BFB4" cx="4.62825" cy="27.60615" r="4.62825"></circle>
                </g>
            </g>
        </g>
    </g>

BR
_______________________________________________
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
|

Happy New Year!

Stephen Barncard via use-livecode
Wishing everyone a healthy and fantastic new year!   Make it great! Happy coding!

Regards, Sphere

Sannyasin Brahmanathaswami via use-livecode <[hidden email]> schreef op 31 december 2019 20:39:36 CET:

>I would like to import an SVG that has multiple paths and which two
>colors. Using Illustrator or Inkscape, merge compound path make them
>all the same color
>
><path class="cls-3" d="M22.5,169.6a26.31,26.31,0,0,0,12.
>4,3.3c6,0,9.3-2.8,9.3-7,0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9,0-8.4,7-14.7,18.1-14.7a26.52,26.52,0,0,1,12.3,2.6l-2.3,7.5a21.56,21.56,0,0,0-10.2-2.4c-5.9,0-8.5,3.2-8.5,6.2,0,4,3,5.8,9.8,8.4,8.9,3.3,13.2,7.8,13.2,15.2,0,8.2-6.2,15.4-19.5,15.4-5.4,0-11-1.5-13.8-3.2ZM52,114.5l-11.5,9.1H33l8.7-9.1Z"/><path
>class="cls-3"
>d="M73.6,129.2c-.3,10.9-.5,27.4-.5,49.3V180c-1.7.1-4.3.2-7.8.2l-2-.2v-2.2c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43,16.43,0,0,1,6-1l4.4.1v2.8Z"/><path
>class="cls-3"
>d="M112.1,180H101.6a272.79,272.79,0,0,1-19.9-52.3l9.4-1.9c4.4,18.5,9.7,33.3,15.7,44.3,6.1-11,11.3-25.8,15.7-44.3l9.4,1.9A262.07,262.07,0,0,1,112.1,180Z"/><path
>class="cls-3"
>d="M169.9,180.8c-.7-4.3-1.7-8.7-2.9-13.3H141.2c-1.2,4.6-2.1,9-2.8,13.3l-10.3-1.6a95.11,95.11,0,0,1,3.2-11.6c-.4,0-1.3-.1-2.7-.2l.2-8.3h5.1a164,164,0,0,1,6.9-16c2.7-5.4,5.4-10.7,8.1-16.2l10.3-.5,8.4,17.1a150.36,150.36,0,0,1,7.2,17.7c.9,2.8,1.8,5.6,2.8,8.4a92.94,92.94,0,0,1
>,2.5,9.7Zm-15.7-43.5A142.72,142.72,0,0,0,144,159c7.3.2,14.1.2,20.3.2-2-5-3.5-8.6-4.6-10.8A104.39,104.39,0,0,0,154.2,137.3Z"/><path
>class="cls-4"
>d="M23.8,72.3a26.31,26.31,0,0,0,12.4,3.3c6,0,9.3-2.8,9.3-7,0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9,0-8.4,7-14.7,18.1-14.7A26.52,26.52,0,0,1,53,33.1l-2.3,7.5a21.56,21.56,0,0,0-10.2-2.4c-5.9,0-8.5,3.2-8.5,6.2,0,4,3,5.8,9.8,8.4C50.7,56.1,55,60.6,55,68c0,8.2-6.2,15.4-19.5,15.4-5.4,0-11-1.5-13.8-3.2Zm29.6-55L41.9,26.4H34.3L43,17.3Z"/><path
>class="cls-4"
>d="M74.9,31.9c-.4,11-.5,27.4-.5,49.4v1.5c-1.7.1-4.3.2-7.8.2l-2-.2V80.6c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43,16.43,0,0,1,6-1l4.4.1v2.7Z"/><path
>class="cls-4"
>d="M113.5,82.7H103A272.79,272.79,0,0,1,83.1,30.4l9.4-1.9c4.4,18.5,9.7,33.3,15.7,44.3q9.15-16.5,15.7-44.3l9.4,1.9A263.57,263.57,0,0,1,113.5,82.7Z"/><path
>class="cls-4"
>d="M171.2,83.5c-.7-4.3-1.7-8.7-2.9-13.3H142.5c-1.2,4.6-2.1,9-2.8,13.3l-10.3-1.6a95.11,95.11,0,0,1,3.2-11.6c-.4,0-1.3-.1-2.7-.2l.2-8.3h5.1a164,164,0,0,1,6.9-16c2.
>7-5.4,5.4-10.7,8.1-16.2l10.3-.5,8.4,17.1a150.36,150.36,0,0,1,7.2,17.7c.9,2.8,1.8,5.6,2.8,8.4a92.94,92.94,0,0,1,2.5,9.7ZM155.6,40a142.72,142.72,0,0,0-10.2,21.7c7.3.2,14.1.2,20.3.2-2-5-3.5-8.6-4.6-10.8C159.1,46.7,157.2,43,155.6,40Z"/>
>
>But the following SVG imports fine as an image in LC and has multiple
>colors. Granted they are all circles, but can't the above by turned
>into this format?
>
><g id="Icons" stroke="none" stroke-width="1" fill="none"
>fill-rule="evenodd">
>        <g id="home1" transform="translate(-48.000000, -48.000000)">
>       <g id="home-colors" transform="translate(49.000000, 49.000000)">
><circle id="Oval" stroke="#FFFFFF" stroke-width="1.21"
>fill-opacity="0.364182692" fill="#000000" cx="31.46" cy="31.46"
>r="31.46"></circle>
>           <g id="Group-3" transform="translate(13.310000, 12.100000)">
><circle id="Oval" fill="#F4333B" cx="17.80515" cy="4.62825"
>r="4.62825"></circle>
><circle id="Oval-Copy-5" fill="#32AE60" cx="17.80515" cy="35.22915"
>r="4.62825"></circle>
><circle id="Oval-Copy-4" fill="#FC7C04" cx="31.09095" cy="12.25125"
>r="4.62825"></circle>
><circle id="Oval-Copy-9" fill="#B34AFF" cx="17.69625" cy="19.87425"
>r="4.62825"></circle>
><circle id="Oval-Copy-7" fill="#F3CB11" cx="31.09095" cy="27.60615"
>r="4.62825"></circle>
><circle id="Oval-Copy-3" fill="#4B87FF" cx="4.62825" cy="12.25125"
>r="4.62825"></circle>
><circle id="Oval-Copy-6" fill="#45BFB4" cx="4.62825" cy="27.60615"
>r="4.62825"></circle>
>                </g>
>            </g>
>        </g>
>    </g>
>
>BR
>_______________________________________________
>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

--
Verstuurd vanaf mijn Android apparaat met K-9 Mail.
_______________________________________________
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: Happy New Year!

Stephen Barncard via use-livecode
Back at you and the entire LC community!

Ralph DiMola
IT Director
Evergreen Information Services
[hidden email]

-----Original Message-----
From: use-livecode [mailto:[hidden email]] On Behalf
Of Jjs via use-livecode
Sent: Wednesday, January 01, 2020 4:20 AM
To: How to use LiveCode
Cc: Jjs
Subject: Happy New Year!

Wishing everyone a healthy and fantastic new year!   Make it great! Happy
coding!

Regards, Sphere

Sannyasin Brahmanathaswami via use-livecode <[hidden email]>
schreef op 31 december 2019 20:39:36 CET:

>I would like to import an SVG that has multiple paths and which two
>colors. Using Illustrator or Inkscape, merge compound path make them
>all the same color
>
><path class="cls-3" d="M22.5,169.6a26.31,26.31,0,0,0,12.
>4,3.3c6,0,9.3-2.8,9.3-7,0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9,
>0-8.4,7-14.7,18.1-14.7a26.52,26.52,0,0,1,12.3,2.6l-2.3,7.5a21.56,21.56,
>0,0,0-10.2-2.4c-5.9,0-8.5,3.2-8.5,6.2,0,4,3,5.8,9.8,8.4,8.9,3.3,13.2,7.
>8,13.2,15.2,0,8.2-6.2,15.4-19.5,15.4-5.4,0-11-1.5-13.8-3.2ZM52,114.5l-1
>1.5,9.1H33l8.7-9.1Z"/><path
>class="cls-3"
>d="M73.6,129.2c-.3,10.9-.5,27.4-.5,49.3V180c-1.7.1-4.3.2-7.8.2l-2-.2v-2
>.2c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43,16.43,0,0,1,6-1l4.4.1v
>2.8Z"/><path
>class="cls-3"
>d="M112.1,180H101.6a272.79,272.79,0,0,1-19.9-52.3l9.4-1.9c4.4,18.5,9.7,
>33.3,15.7,44.3,6.1-11,11.3-25.8,15.7-44.3l9.4,1.9A262.07,262.07,0,0,1,1
>12.1,180Z"/><path
>class="cls-3"
>d="M169.9,180.8c-.7-4.3-1.7-8.7-2.9-13.3H141.2c-1.2,4.6-2.1,9-2.8,13.3l
>-10.3-1.6a95.11,95.11,0,0,1,3.2-11.6c-.4,0-1.3-.1-2.7-.2l.2-8.3h5.1a164
>,164,0,0,1,6.9-16c2.7-5.4,5.4-10.7,8.1-16.2l10.3-.5,8.4,17.1a150.36,150
>.36,0,0,1,7.2,17.7c.9,2.8,1.8,5.6,2.8,8.4a92.94,92.94,0,0,1
>,2.5,9.7Zm-15.7-43.5A142.72,142.72,0,0,0,144,159c7.3.2,14.1.2,20.3.2-2-
>5-3.5-8.6-4.6-10.8A104.39,104.39,0,0,0,154.2,137.3Z"/><path
>class="cls-4"
>d="M23.8,72.3a26.31,26.31,0,0,0,12.4,3.3c6,0,9.3-2.8,9.3-7,0-3.9-2.6-6.
>2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9,0-8.4,7-14.7,18.1-14.7A26.52,26.52,0
>,0,1,53,33.1l-2.3,7.5a21.56,21.56,0,0,0-10.2-2.4c-5.9,0-8.5,3.2-8.5,6.2
>,0,4,3,5.8,9.8,8.4C50.7,56.1,55,60.6,55,68c0,8.2-6.2,15.4-19.5,15.4-5.4
>,0-11-1.5-13.8-3.2Zm29.6-55L41.9,26.4H34.3L43,17.3Z"/><path
>class="cls-4"
>d="M74.9,31.9c-.4,11-.5,27.4-.5,49.4v1.5c-1.7.1-4.3.2-7.8.2l-2-.2V80.6c
>0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43,16.43,0,0,1,6-1l4.4.1v2.7
>Z"/><path
>class="cls-4"
>d="M113.5,82.7H103A272.79,272.79,0,0,1,83.1,30.4l9.4-1.9c4.4,18.5,9.7,3
>3.3,15.7,44.3q9.15-16.5,15.7-44.3l9.4,1.9A263.57,263.57,0,0,1,113.5,82.
>7Z"/><path
>class="cls-4"
>d="M171.2,83.5c-.7-4.3-1.7-8.7-2.9-13.3H142.5c-1.2,4.6-2.1,9-2.8,13.3l-10.3
-1.6a95.11,95.11,0,0,1,3.2-11.6c-.4,0-1.3-.1-2.7-.2l.2-8.3h5.1a164,164,0,0,1
,6.9-16c2.

>7-5.4,5.4-10.7,8.1-16.2l10.3-.5,8.4,17.1a150.36,150.36,0,0,1,7.2,17.7c.
>9,2.8,1.8,5.6,2.8,8.4a92.94,92.94,0,0,1,2.5,9.7ZM155.6,40a142.72,142.72
>,0,0,0-10.2,21.7c7.3.2,14.1.2,20.3.2-2-5-3.5-8.6-4.6-10.8C159.1,46.7,15
>7.2,43,155.6,40Z"/>
>
>But the following SVG imports fine as an image in LC and has multiple
>colors. Granted they are all circles, but can't the above by turned
>into this format?
>
><g id="Icons" stroke="none" stroke-width="1" fill="none"
>fill-rule="evenodd">
>        <g id="home1" transform="translate(-48.000000, -48.000000)">
>       <g id="home-colors" transform="translate(49.000000, 49.000000)">
><circle id="Oval" stroke="#FFFFFF" stroke-width="1.21"
>fill-opacity="0.364182692" fill="#000000" cx="31.46" cy="31.46"
>r="31.46"></circle>
>           <g id="Group-3" transform="translate(13.310000, 12.100000)">
><circle id="Oval" fill="#F4333B" cx="17.80515" cy="4.62825"
>r="4.62825"></circle>
><circle id="Oval-Copy-5" fill="#32AE60" cx="17.80515" cy="35.22915"
>r="4.62825"></circle>
><circle id="Oval-Copy-4" fill="#FC7C04" cx="31.09095" cy="12.25125"
>r="4.62825"></circle>
><circle id="Oval-Copy-9" fill="#B34AFF" cx="17.69625" cy="19.87425"
>r="4.62825"></circle>
><circle id="Oval-Copy-7" fill="#F3CB11" cx="31.09095" cy="27.60615"
>r="4.62825"></circle>
><circle id="Oval-Copy-3" fill="#4B87FF" cx="4.62825" cy="12.25125"
>r="4.62825"></circle>
><circle id="Oval-Copy-6" fill="#45BFB4" cx="4.62825" cy="27.60615"
>r="4.62825"></circle>
>                </g>
>            </g>
>        </g>
>    </g>
>
>BR
>_______________________________________________
>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

--
Verstuurd vanaf mijn Android apparaat met K-9 Mail.
_______________________________________________
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: Import SVG with Multi-Path and Two colors

Stephen Barncard via use-livecode
In reply to this post by Stephen Barncard via use-livecode
Aloha Swami,

Does this work for you?


———————Code------------------

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">

<g fill="red" stroke="green" stroke-width="5">

<path class="S1 fill=#ccc" d="M23.8 72.3a26.31 26.31 0 0012.4 3.3c6 0 9.3-2.8 9.3-7 0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9 0-8.4 7-14.7 18.1-14.7A26.52 26.52 0 0153 33.1l-2.3 7.5a21.56 21.56 0 00-10.2-2.4c-5.9 0-8.5 3.2-8.5 6.2 0 4 3 5.8 9.8 8.4C50.7 56.1 55 60.6 55 68c0 8.2-6.2 15.4-19.5 15.4-5.4 0-11-1.5-13.8-3.2zm29.6-55l-11.5 9.1h-7.6l8.7-9.1z"/>

<path class="I1" d="M74.9 31.9c-.4 11-.5 27.4-.5 49.4v1.5c-1.7.1-4.3.2-7.8.2l-2-.2v-2.2c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43 16.43 0 016-1l4.4.1v2.7z"/>

<path class="V1" d="M113.5 82.7H103a272.79 272.79 0 01-19.9-52.3l9.4-1.9c4.4 18.5 9.7 33.3 15.7 44.3q9.15-16.5 15.7-44.3l9.4 1.9a263.57 263.57 0 01-19.8 52.3z"/>

<path class="A1" d="M171.2 83.5c-.7-4.3-1.7-8.7-2.9-13.3h-25.8c-1.2 4.6-2.1 9-2.8 13.3l-10.3-1.6a95.11 95.11 0 013.2-11.6c-.4 0-1.3-.1-2.7-.2l.2-8.3h5.1a164 164 0 016.9-16c2.7-5.4 5.4-10.7 8.1-16.2l10.3-.5 8.4 17.1a150.36 150.36 0 017.2 17.7c.9 2.8 1.8 5.6 2.8 8.4a92.94 92.94 0 012.5 9.7zM155.6 40a142.72 142.72 0 00-10.2 21.7c7.3.2 14.1.2 20.3.2-2-5-3.5-8.6-4.6-10.8-2-4.4-3.9-8.1-5.5-11.1z"/>

</g>

<g fill="#6495ED" stroke="#32AE60" stroke-width="5">

<path class="S2" d="M22.5 169.6a26.31 26.31 0 0012 4c6 0 9.3-2.8 9.3-7 0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9 0-8.4 7-14.7 18.1-14.7a26.52 26.52 0 0112.3 2.6l-2.3 7.5a21.56 21.56 0 00-10.2-2.4c-5.9 0-8.5 3.2-8.5 6.2 0 4 3 5.8 9.8 8.4 8.9 3.3 13.2 7.8 13.2 15.2 0 8.2-6.2 15.4-19.5 15.4-5.4 0-11-1.5-13.8-3.2zM52 114.5l-11.5 9.1H33l8.7-9.1z"/>

<path class="I2" d="M73.6 129.2c-.3 10.9-.5 27.4-.5 49.3v1.5c-1.7.1-4.3.2-7.8.2l-2-.2v-2.2c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43 16.43 0 016-1l4.4.1v2.8z"/>

<path class="V2" d="M112.1 180h-10.5a272.79 272.79 0 01-19.9-52.3l9.4-1.9c4.4 18.5 9.7 33.3 15.7 44.3 6.1-11 11.3-25.8 15.7-44.3l9.4 1.9a262.07 262.07 0 01-19.8 52.3z"/>

<path class="A2" d="M169.9 180.8c-.7-4.3-1.7-8.7-2.9-13.3h-25.8c-1.2 4.6-2.1 9-2.8 13.3l-10.3-1.6a95.11 95.11 0 013.2-11.6c-.4 0-1.3-.1-2.7-.2l.2-8.3h5.1a164 164 0 016.9-16c2.7-5.4 5.4-10.7 8.1-16.2l10.3-.5 8.4 17.1a150.36 150.36 0 017.2 17.7c.9 2.8 1.8 5.6 2.8 8.4a92.94 92.94 0 012.5 9.7zm-15.7-43.5A142.72 142.72 0 00144 159c7.3.2 14.1.2 20.3.2-2-5-3.5-8.6-4.6-10.8a104.39 104.39 0 00-5.5-11.1z"/>

</g>

</svg>

———————————End-Code——————————

Cheers,
Debdoot


> On Dec 31, 2019, at 11:39 AM, Sannyasin Brahmanathaswami via use-livecode <[hidden email]> wrote:
>
> I would like to import an SVG that has multiple paths and which two colors. Using Illustrator or Inkscape, merge compound path make them all the same color
>
> <path class="cls-3" d="M22.5,169.6a26.31,26.31,0,0,0,12. 4,3.3c6,0,9.3-2.8,9.3-7,0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9,0-8.4,7-14.7,18.1-14.7a26.52,26.52,0,0,1,12.3,2.6l-2.3,7.5a21.56,21.56,0,0,0-10.2-2.4c-5.9,0-8.5,3.2-8.5,6.2,0,4,3,5.8,9.8,8.4,8.9,3.3,13.2,7.8,13.2,15.2,0,8.2-6.2,15.4-19.5,15.4-5.4,0-11-1.5-13.8-3.2ZM52,114.5l-11.5,9.1H33l8.7-9.1Z"/><path class="cls-3" d="M73.6,129.2c-.3,10.9-.5,27.4-.5,49.3V180c-1.7.1-4.3.2-7.8.2l-2-.2v-2.2c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43,16.43,0,0,1,6-1l4.4.1v2.8Z"/><path class="cls-3" d="M112.1,180H101.6a272.79,272.79,0,0,1-19.9-52.3l9.4-1.9c4.4,18.5,9.7,33.3,15.7,44.3,6.1-11,11.3-25.8,15.7-44.3l9.4,1.9A262.07,262.07,0,0,1,112.1,180Z"/><path class="cls-3" d="M169.9,180.8c-.7-4.3-1.7-8.7-2.9-13.3H141.2c-1.2,4.6-2.1,9-2.8,13.3l-10.3-1.6a95.11,95.11,0,0,1,3.2-11.6c-.4,0-1.3-.1-2.7-.2l.2-8.3h5.1a164,164,0,0,1,6.9-16c2.7-5.4,5.4-10.7,8.1-16.2l10.3-.5,8.4,17.1a150.36,150.36,0,0,1,7.2,17.7c.9,2.8,1.8,5.6,2.8,8.4a92.94,92.94,0,0,1,2.5,9.7Zm-15.7-43.5A142.72,142.72,0,0,0,144,159c7.3.2,14.1.2,20.3.2-2-5-3.5-8.6-4.6-10.8A104.39,104.39,0,0,0,154.2,137.3Z"/><path class="cls-4" d="M23.8,72.3a26.31,26.31,0,0,0,12.4,3.3c6,0,9.3-2.8,9.3-7,0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9,0-8.4,7-14.7,18.1-14.7A26.52,26.52,0,0,1,53,33.1l-2.3,7.5a21.56,21.56,0,0,0-10.2-2.4c-5.9,0-8.5,3.2-8.5,6.2,0,4,3,5.8,9.8,8.4C50.7,56.1,55,60.6,55,68c0,8.2-6.2,15.4-19.5,15.4-5.4,0-11-1.5-13.8-3.2Zm29.6-55L41.9,26.4H34.3L43,17.3Z"/><path class="cls-4" d="M74.9,31.9c-.4,11-.5,27.4-.5,49.4v1.5c-1.7.1-4.3.2-7.8.2l-2-.2V80.6c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43,16.43,0,0,1,6-1l4.4.1v2.7Z"/><path class="cls-4" d="M113.5,82.7H103A272.79,272.79,0,0,1,83.1,30.4l9.4-1.9c4.4,18.5,9.7,33.3,15.7,44.3q9.15-16.5,15.7-44.3l9.4,1.9A263.57,263.57,0,0,1,113.5,82.7Z"/><path class="cls-4" d="M171.2,83.5c-.7-4.3-1.7-8.7-2.9-13.3H142.5c-1.2,4.6-2.1,9-2.8,13.3l-10.3-1.6a95.11,95.11,0,0,1,3.2-11.6c-.4,0-1.3-.1-2.7-.2l.2-8.3h5.1a164,164,0,0,1,6.9-16c2.7-5.4,5.4-10.7,8.1-16.2l10.3-.5,8.4,17.1a150.36,150.36,0,0,1,7.2,17.7c.9,2.8,1.8,5.6,2.8,8.4a92.94,92.94,0,0,1,2.5,9.7ZM155.6,40a142.72,142.72,0,0,0-10.2,21.7c7.3.2,14.1.2,20.3.2-2-5-3.5-8.6-4.6-10.8C159.1,46.7,157.2,43,155.6,40Z"/>
>
> But the following SVG imports fine as an image in LC and has multiple colors. Granted they are all circles, but can't the above by turned into this format?
>
> <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
>        <g id="home1" transform="translate(-48.000000, -48.000000)">
>            <g id="home-colors" transform="translate(49.000000, 49.000000)">
>                <circle id="Oval" stroke="#FFFFFF" stroke-width="1.21" fill-opacity="0.364182692" fill="#000000" cx="31.46" cy="31.46" r="31.46"></circle>
>                <g id="Group-3" transform="translate(13.310000, 12.100000)">
>                    <circle id="Oval" fill="#F4333B" cx="17.80515" cy="4.62825" r="4.62825"></circle>
>                    <circle id="Oval-Copy-5" fill="#32AE60" cx="17.80515" cy="35.22915" r="4.62825"></circle>
>                    <circle id="Oval-Copy-4" fill="#FC7C04" cx="31.09095" cy="12.25125" r="4.62825"></circle>
>                    <circle id="Oval-Copy-9" fill="#B34AFF" cx="17.69625" cy="19.87425" r="4.62825"></circle>
>                    <circle id="Oval-Copy-7" fill="#F3CB11" cx="31.09095" cy="27.60615" r="4.62825"></circle>
>                    <circle id="Oval-Copy-3" fill="#4B87FF" cx="4.62825" cy="12.25125" r="4.62825"></circle>
>                    <circle id="Oval-Copy-6" fill="#45BFB4" cx="4.62825" cy="27.60615" r="4.62825"></circle>
>                </g>
>            </g>
>        </g>
>    </g>
>
> BR
> _______________________________________________
> 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: Import SVG with Multi-Path and Two colors

Stephen Barncard via use-livecode
Aloha Swami,

Noticed a bit of garbage in the previous code.
This one’s better.

Cheers
-dd

———————————

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">

<g fill="red" stroke="green" stroke-width="5">

<path class="S1" d="M23.8 72.3a26.31 26.31 0 0012.4 3.3c6 0 9.3-2.8 9.3-7 0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9 0-8.4 7-14.7 18.1-14.7A26.52 26.52 0 0153 33.1l-2.3 7.5a21.56 21.56 0 00-10.2-2.4c-5.9 0-8.5 3.2-8.5 6.2 0 4 3 5.8 9.8 8.4C50.7 56.1 55 60.6 55 68c0 8.2-6.2 15.4-19.5 15.4-5.4 0-11-1.5-13.8-3.2zm29.6-55l-11.5 9.1h-7.6l8.7-9.1z"/>

<path class="I1" d="M74.9 31.9c-.4 11-.5 27.4-.5 49.4v1.5c-1.7.1-4.3.2-7.8.2l-2-.2v-2.2c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43 16.43 0 016-1l4.4.1v2.7z"/>

<path class="V1" d="M113.5 82.7H103a272.79 272.79 0 01-19.9-52.3l9.4-1.9c4.4 18.5 9.7 33.3 15.7 44.3q9.15-16.5 15.7-44.3l9.4 1.9a263.57 263.57 0 01-19.8 52.3z"/>

<path class="A1" d="M171.2 83.5c-.7-4.3-1.7-8.7-2.9-13.3h-25.8c-1.2 4.6-2.1 9-2.8 13.3l-10.3-1.6a95.11 95.11 0 013.2-11.6c-.4 0-1.3-.1-2.7-.2l.2-8.3h5.1a164 164 0 016.9-16c2.7-5.4 5.4-10.7 8.1-16.2l10.3-.5 8.4 17.1a150.36 150.36 0 017.2 17.7c.9 2.8 1.8 5.6 2.8 8.4a92.94 92.94 0 012.5 9.7zM155.6 40a142.72 142.72 0 00-10.2 21.7c7.3.2 14.1.2 20.3.2-2-5-3.5-8.6-4.6-10.8-2-4.4-3.9-8.1-5.5-11.1z"/>

</g>

<g fill="#6495ED" stroke="#32AE60" stroke-width="5">

<path class="S2" d="M22.5 169.6a26.31 26.31 0 0012 4c6 0 9.3-2.8 9.3-7 0-3.9-2.6-6.2-9.1-8.5-8.4-3-13.8-7.5-13.8-14.9 0-8.4 7-14.7 18.1-14.7a26.52 26.52 0 0112.3 2.6l-2.3 7.5a21.56 21.56 0 00-10.2-2.4c-5.9 0-8.5 3.2-8.5 6.2 0 4 3 5.8 9.8 8.4 8.9 3.3 13.2 7.8 13.2 15.2 0 8.2-6.2 15.4-19.5 15.4-5.4 0-11-1.5-13.8-3.2zM52 114.5l-11.5 9.1H33l8.7-9.1z"/>

<path class="I2" d="M73.6 129.2c-.3 10.9-.5 27.4-.5 49.3v1.5c-1.7.1-4.3.2-7.8.2l-2-.2v-2.2c0-.1.1-8.5.2-25.3.2-10.1.1-18.5-.2-25.2a16.43 16.43 0 016-1l4.4.1v2.8z"/>

<path class="V2" d="M112.1 180h-10.5a272.79 272.79 0 01-19.9-52.3l9.4-1.9c4.4 18.5 9.7 33.3 15.7 44.3 6.1-11 11.3-25.8 15.7-44.3l9.4 1.9a262.07 262.07 0 01-19.8 52.3z"/>

<path class="A2" d="M169.9 180.8c-.7-4.3-1.7-8.7-2.9-13.3h-25.8c-1.2 4.6-2.1 9-2.8 13.3l-10.3-1.6a95.11 95.11 0 013.2-11.6c-.4 0-1.3-.1-2.7-.2l.2-8.3h5.1a164 164 0 016.9-16c2.7-5.4 5.4-10.7 8.1-16.2l10.3-.5 8.4 17.1a150.36 150.36 0 017.2 17.7c.9 2.8 1.8 5.6 2.8 8.4a92.94 92.94 0 012.5 9.7zm-15.7-43.5A142.72 142.72 0 00144 159c7.3.2 14.1.2 20.3.2-2-5-3.5-8.6-4.6-10.8a104.39 104.39 0 00-5.5-11.1z"/>

</g>

</svg>





_______________________________________________
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: Import SVG with Multi-Path and Two colors

Stephen Barncard via use-livecode
Sorry, that doesn’t work, I just get a white box

I needed the background to be opaque and was trying to do that in SVG widget

Anyway, I had my designer send another opaque version from the output from Sketch

Now, using Image As Control --> Image File [choose below in a file:}

it works. But it is not possibly to put this in the Path field, of the  SVG icon.

So, Mark W. has done some magic in the engine for Import As Control, that is not possible in LCB/SVG widget.

This "image" will do the job. it is scales with no lossy pixels!

<?xml version="1.0" encoding="UTF-8"?>
<svg width="65px" height="65px" viewBox="0 0 65 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
    <title>home-colors</title>
    <desc>Created with Sketch.</desc>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="home1" transform="translate(-48.000000, -48.000000)">
            <g id="home-colors" transform="translate(49.000000, 49.000000)">
                <circle id="Oval" stroke="#FFFFFF" stroke-width="1.21" fill="#444444" cx="31.46" cy="31.46" r="31.46"></circle>
                <g id="Group-3" transform="translate(13.310000, 12.100000)">
                    <circle id="Oval" fill="#F4333B" cx="17.80515" cy="4.62825" r="4.62825"></circle>
                    <circle id="Oval-Copy-5" fill="#32AE60" cx="17.80515" cy="35.22915" r="4.62825"></circle>
                    <circle id="Oval-Copy-4" fill="#FC7C04" cx="31.09095" cy="12.25125" r="4.62825"></circle>
                    <circle id="Oval-Copy-9" fill="#B34AFF" cx="17.69625" cy="19.87425" r="4.62825"></circle>
                    <circle id="Oval-Copy-7" fill="#F3CB11" cx="31.09095" cy="27.60615" r="4.62825"></circle>
                    <circle id="Oval-Copy-3" fill="#4B87FF" cx="4.62825" cy="12.25125" r="4.62825"></circle>
                    <circle id="Oval-Copy-6" fill="#45BFB4" cx="4.62825" cy="27.60615" r="4.62825"></circle>
                </g>
            </g>
        </g>
    </g>
</svg>

Aloha Swami,

Noticed a bit of garbage in the previous code.
This one’s better.

Cheers
-dd


_______________________________________________
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: Import SVG with Multi-Path and Two colors

Stephen Barncard via use-livecode
Hi all,

> Am 02.01.2020 um 21:51 schrieb Sannyasin Brahmanathaswami via use-livecode <[hidden email]>:
>
> ...
> Now, using Image As Control --> Image File [choose below in a file:}
> it works. But it is not possibly to put this in the Path field, of the  SVG icon.
> So, Mark W. has done some magic in the engine for Import As Control, that is not possible in LCB/SVG widget.
> This "image" will do the job. it is scales with no lossy pixels!

yes, very cool!

After importing that SVG file, it IS in fact an image object and we can use
it immediatley as an icon in a button.

But that raises the (naive?) question:
Why do we have to convert a SVG widget with "drawingSvgCompile"
to be able to use a SVG as an Icon in a button?

> <?xml version="1.0" encoding="UTF-8"?>
> <svg width="65px" height="65px" viewBox="0 0 65 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
>    <title>home-colors</title>
>    <desc>Created with Sketch.</desc>
>    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
>        <g id="home1" transform="translate(-48.000000, -48.000000)">
>            <g id="home-colors" transform="translate(49.000000, 49.000000)">
>                <circle id="Oval" stroke="#FFFFFF" stroke-width="1.21" fill="#444444" cx="31.46" cy="31.46" r="31.46"></circle>
>                <g id="Group-3" transform="translate(13.310000, 12.100000)">
>                    <circle id="Oval" fill="#F4333B" cx="17.80515" cy="4.62825" r="4.62825"></circle>
>                    <circle id="Oval-Copy-5" fill="#32AE60" cx="17.80515" cy="35.22915" r="4.62825"></circle>
>                    <circle id="Oval-Copy-4" fill="#FC7C04" cx="31.09095" cy="12.25125" r="4.62825"></circle>
>                    <circle id="Oval-Copy-9" fill="#B34AFF" cx="17.69625" cy="19.87425" r="4.62825"></circle>
>                    <circle id="Oval-Copy-7" fill="#F3CB11" cx="31.09095" cy="27.60615" r="4.62825"></circle>
>                    <circle id="Oval-Copy-3" fill="#4B87FF" cx="4.62825" cy="12.25125" r="4.62825"></circle>
>                    <circle id="Oval-Copy-6" fill="#45BFB4" cx="4.62825" cy="27.60615" r="4.62825"></circle>
>                </g>
>            </g>
>        </g>
>    </g>
> </svg>

Best

Klaus

--
Klaus Major
https://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: Import SVG with Multi-Path and Two colors

Stephen Barncard via use-livecode
An even better questions is, why can't an imported image have a file path property as well as a button? This is really where the file path SHOULD be. Think of it. We import an image. We create a button. We tell the button to use the imported image as an icon. We then tell the BUTTON where the IMAGE file path is! Wha???

As I have moaned about before, this has the effect of delinking any buttons copied from one stack to the other. Even when the image is ALSO coied, it gets a new ID, so the button link breaks. This makes groups of objects very non-portable. It may be better for me to not use buttons, and just use images, but there are reasons why buttons are better. For one, a button can have a different image assigned for different states eg. enabled, disabled etc.

I'll check the feature requests to see if this one has been put up. I am almost certain I have requested this in the past.

Bob S


> On Jan 2, 2020, at 13:02 , Klaus major-k via use-livecode <[hidden email]> wrote:
>
> Hi all,
>
>> Am 02.01.2020 um 21:51 schrieb Sannyasin Brahmanathaswami via use-livecode <[hidden email]>:
>>
>> ...
>> Now, using Image As Control --> Image File [choose below in a file:}
>> it works. But it is not possibly to put this in the Path field, of the  SVG icon.
>> So, Mark W. has done some magic in the engine for Import As Control, that is not possible in LCB/SVG widget.
>> This "image" will do the job. it is scales with no lossy pixels!
>
> yes, very cool!
>
> After importing that SVG file, it IS in fact an image object and we can use
> it immediatley as an icon in a button.
>
> But that raises the (naive?) question:
> Why do we have to convert a SVG widget with "drawingSvgCompile"
> to be able to use a SVG as an Icon in a button?


_______________________________________________
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