0

i am looking to render svg image on canvas with layers.My aim is to transfer svg image on canvas layer wise. As SVG String contain tag by which we can decompose on flutter. but i did not find any solution after a lot of research what i need to select and manipulate each layer by resizing and dragging. if anybody assist me, i will be thankful to him.

enter image description here

Suppose this simple SVG String

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="300" viewBox="312.07142857142856 203.98000000000002 233.02999999999997 122.98027586206888" xml:space="preserve"><defs></defs>
<desc>Create with Free Logo Design v1.0</desc>
<defs>
</defs>
<defs></defs><rect x="0" y="0" width="100%" height="100%" fill="rgba(0, 0, 0, 0)"></rect>
<g transform="matrix(1 0 0 1 469.77 247.73)" id="Layer_1">
<polygon style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;" points="-50,-43.21 36.43,43.21 50,43.21 -36.41,-43.21 -50,-43.21 "></polygon>
</g>
<g transform="matrix(1 0 0 1 494.6 247.73)" id="Layer_1">
<polygon style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;" points="-50,-43.21 36.43,43.21 50,43.21 -36.42,-43.21 -50,-43.21 "></polygon>
</g>
<g transform="matrix(1 0 0 1 361.98 237.81)" id="Layer_1">
<polygon style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;" points="7.97,-18.1 7.97,14 3.47,18.09 -7.97,18.09 -7.97,-18.1 7.97,-18.1 "></polygon>
</g>
<g transform="matrix(1 0 0 1 403.87 247.81)" id="Layer_1">
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;" transform=" translate(-115.3, -127.06)" d="M 119.05 83.73 L 81.37 118.06 L 65.44 132.59 L 24 170.38 L 174.09 170.38 L 206.59 170.17 Z M 174.05 160.73000000000002 L 48.76 160.73000000000002 L 76.87 135.11 L 81.37 131.01000000000002 L 118.78 97 L 183.35 160.76 Z" stroke-linecap="round"></path>
</g>
<g transform="matrix(1 0 0 1 405.2 259.14)" id="Layer_1">
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(227,6,19); fill-rule: nonzero; opacity: 1;" transform=" translate(-116.63, -138.39)" d="M 103.13 124.89 L 103.13 151.89 L 130.13 151.89 L 130.13 124.88999999999999 Z M 120.5 142.26 L 112.73 142.26 L 112.73 134.48999999999998 L 120.5 134.48999999999998 Z" stroke-linecap="round"></path>
</g>
<g transform="matrix(1 0 0 1 371.45 309.98)" style="" id="Layer_1">
        <text xml:space="preserve" font-family="Roboto-Bold, Roboto" font-size="29.16" font-style="normal" font-weight="700" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(227,6,19); fill-rule: nonzero; opacity: 1; white-space: pre;"><tspan x="-56.7" y="9.16">company</tspan></text>
</g>
</svg>
Karamat Subhani
  • 104
  • 1
  • 7
  • go to https://pub.dev/packages/flutter_svg and find `loadPicture` – pskink Jul 01 '23 at 13:41
  • i already tried this. this package convert whole svg into a image(svg on canvas). main concern that i want to convert one svg which contain group tags/element in svg image into multiple layers. i already tried this https://pub.dev/documentation/flutter_svg/latest/ it will be helpful if you share any code. – Karamat Subhani Jul 01 '23 at 14:42
  • so pass one layer to `SvgStringLoader`, not all layers – pskink Jul 01 '23 at 14:47
  • i have update my question with simple SVG, can you help me for one layer to pass one layers please to canvas. – Karamat Subhani Jul 01 '23 at 14:53
  • https://marketsplash.com/tutorials/dart/dart-xml/ – pskink Jul 01 '23 at 15:06
  • and for resizing / rotating / dragging check https://gist.github.com/pskink/a8a497c11365e65dda48648ac07e302b#file-flow_resizer_minimal-dart – pskink Jul 02 '23 at 09:03
  • thank you so much. as you have provided github gist. i run above code. as i needed about handling layers that is very close to my expectation.but there can be some bug. rotating and corner of layout is not resizing equally. thank you so much again for your precious help. – Karamat Subhani Jul 02 '23 at 18:37
  • what is not "resizing equally"? – pskink Jul 02 '23 at 18:42
  • i mean to say there are two rectangles, red and green. when we drag from from any edges that works fine. when we select any corner, try to resize it does not work. i also want to mentioned, when i add any icon for testing purpose in container that have been used. then icon is not being resized. similarly not resizing against it's axis. – Karamat Subhani Jul 02 '23 at 19:00
  • 1. https://www.mediafire.com/view/a7i9lokfqskdtwk/cornerimage.png/file 2. https://www.mediafire.com/view/9a3t2wqyr4ym0ji/Screenshot_2023-07-02_at_11.58.28_PM.png/file 3. https://www.mediafire.com/view/llsp33z8qz40rc8/Screenshot_2023-07-02_at_11.59.23_PM.png/file – Karamat Subhani Jul 02 '23 at 19:01
  • it does not resize from corners since it resizes from sides - you can change the code in any way you want, more complex versions are flow_resizer.dart , flow_resizer_v2.dart and flow_resizer_v3.dart – pskink Jul 02 '23 at 19:06
  • it will be helpful for me if you will share me SVG code. as i have read this document this is just for parsing https://marketsplash.com/tutorials/dart/dart-xml/. or please if possible can you share any helping material more in detail. – Karamat Subhani Jul 02 '23 at 19:10
  • basically if your SVG has N elayers (N `` nodes) you have to create N svg files each one containing only one `g` node - all of them using `xml` package – pskink Jul 02 '23 at 19:15
  • thank you so much. now it's working perfect. i have used flutter_painter for this to handle canvas related operations. i also have done to separate layers of svg successfully. Thanks again. – Karamat Subhani Jul 02 '23 at 20:35
  • great, feel free to post a self answer then – pskink Jul 03 '23 at 03:50

0 Answers0