Import SVG with Multi-Path and Two colors

dev dev at digifilm.com
Thu Jan 2 00:12:00 EST 2020


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 <use-livecode at lists.runrev.com> 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
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
> 






More information about the use-livecode mailing list