Transforming SVG's to Data.PAth Statements

[BicycleMark]

I have this outstanding question on SO: https://stackoverflow.com/questions/62964603/determining-path-data-in-xamarin-forms-4-7-from-an-svg-starting-point

[pictos]

@BicycleMark, I opened the SVG file using the VS Code and I was able to see all the 15 paths... It works with the Notepad as well.

[BicycleMark]

Well For me too. I even posted the SVG in them but the paths are not equivalent. Path1 (XAML) <> Path1 (SVG)

Here is path 1) from XAML

how is that equivalent to path 1) from SVG?

[BicycleMark]

Is there a save as XAML in inkscape? How do I generate the 15 Vectors in XAML

[BicycleMark]

Here is a sample SVG File i need to Translate to XAML. How do I do It?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:ns1="http://sozi.baierouge.fr"
    id="svg4376"
    viewBox="0 0 48 48"
    sodipodi:version="0.32"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
    inkscape:version="0.46"
    sodipodi:docname="face-smile.svg"
    sodipodi:docbase="/home/jimmac/gfx/ximian/tango-icon-theme/scalable/emotes"
  >
  <defs
      id="defs3"
    >
    <radialGradient
        id="radialGradient2714"
        fx="29.158"
        fy="15.756"
        cx="29.288"
        gradientUnits="userSpaceOnUse"
        cy="15.721"
        r="8.9021"
        inkscape:collect="always"
      >
      <stop
          id="stop3292"
          style="stop-color:#fffcde"
          offset="0"
      />
      <stop
          id="stop3294"
          style="stop-color:#f6e76a"
          offset=".64486"
      />
      <stop
          id="stop3296"
          style="stop-color:#ffb738"
          offset="1"
      />
    </radialGradient
    >
    <radialGradient
        id="aigrd2"
        gradientUnits="userSpaceOnUse"
        cy="39.593"
        cx="25.053"
        gradientTransform="matrix(1.25 0 0 1.25 -6.4794 -13.372)"
        r="15.757"
      >
      <stop
          id="stop8602"
          style="stop-color:#777777"
          offset="0"
      />
      <stop
          id="stop8604"
          style="stop-color:#000000"
          offset="1"
      />
    </radialGradient
    >
    <radialGradient
        id="radialGradient4571"
        cx="24.714"
        gradientUnits="userSpaceOnUse"
        cy="38.571"
        r="19.714"
        gradientTransform="matrix(1 0 0 .33333 0 25.714)"
        inkscape:collect="always"
      >
      <stop
          id="stop4567"
          style="stop-color:#000000"
          offset="0"
      />
      <stop
          id="stop4569"
          style="stop-color:#000000;stop-opacity:0"
          offset="1"
      />
    </radialGradient
    >
  </defs
  >
  <sodipodi:namedview
      id="base"
      bordercolor="#666666"
      inkscape:window-x="223"
      inkscape:window-y="109"
      pagecolor="#ffffff"
      inkscape:showpageshadow="false"
      inkscape:grid-bbox="true"
      inkscape:zoom="11.313708"
      inkscape:pageshadow="2"
      showgrid="false"
      borderopacity="0.19607843"
      inkscape:current-layer="layer1"
      inkscape:cx="25.411306"
      inkscape:cy="24.058534"
      inkscape:window-width="770"
      inkscape:pageopacity="0.0"
      inkscape:window-height="739"
      inkscape:document-units="px"
      fill="#edd400"
  />
  <g
      id="layer1"
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
    >
    <path
        id="path4563"
        sodipodi:rx="19.714285"
        sodipodi:ry="6.5714288"
        style="opacity:.53165;fill-rule:evenodd;color:#000000;fill:url(#radialGradient4571)"
        sodipodi:type="arc"
        d="m44.429 38.571a19.714 6.5714 0 1 1 -39.429 0 19.714 6.5714 0 1 1 39.429 0z"
        sodipodi:cy="38.571430"
        sodipodi:cx="24.714285"
    />
    <path
        id="path4320"
        sodipodi:rx="8.6620579"
        sodipodi:ry="8.6620579"
        style="stroke-linejoin:round;fill-rule:evenodd;color:#000000;stroke:#9c8c0a;stroke-linecap:round;stroke-width:.48004;fill:url(#radialGradient2714)"
        sodipodi:type="arc"
        d="m39.775 19.009a8.6621 8.6621 0 1 1 -17.324 0 8.6621 8.6621 0 1 1 17.324 0z"
        transform="matrix(2.0831 0 0 2.0831 -40.547 -16.492)"
        sodipodi:cy="19.008621"
        sodipodi:cx="31.112698"
    />
    <path
        id="path4322"
        sodipodi:rx="8.6620579"
        sodipodi:ry="8.6620579"
        style="opacity:.67722;stroke-linejoin:round;color:#000000;stroke:#ffffff;stroke-linecap:round;stroke-width:.50511;fill:none"
        sodipodi:type="arc"
        d="m39.775 19.009a8.6621 8.6621 0 1 1 -17.324 0 8.6621 8.6621 0 1 1 17.324 0z"
        transform="matrix(1.9798 0 0 1.9798 -37.331 -14.527)"
        sodipodi:cy="19.008621"
        sodipodi:cx="31.112698"
    />
    <path
        id="path2659"
        sodipodi:nodetypes="czczc"
        style="opacity:0.36;color:#000000;fill:#ffffff"
        d="m37.285 24.72c-3.017 5.225-6.544 8.99-12.823 8.99-6.1 0-10.565-4.34-13.352-9.167 2.549 3.056 6.283 6.567 13.087 6.567 8.131 0 9.552-2.907 13.088-6.39z"
    />
    <path
        id="path8606"
        sodipodi:nodetypes="czczc"
        style="fill:url(#aigrd2)"
        d="m37.285 24.013c-3.017 5.225-6.544 8.99-12.823 8.99-6.1 0-10.565-4.34-13.352-9.167 2.549 3.056 6.283 6.566 13.087 6.566 8.131 0 9.552-2.906 13.088-6.389z"
    />
    <g
        id="g8666"
        transform="translate(.35355 2.3927)"
      >
      <path
          id="path8610"
          style="opacity:0.36;fill:#ffffff"
          d="m21.398 15.321c0 2.5-1.125 4.5-2.5 4.5s-2.625-2-2.625-4.5 1.125-4.5 2.5-4.5 2.5 2 2.5 4.5h0.125z"
      />
      <path
          id="path8612"
          style="opacity:0.36;fill:#ffffff"
          d="m30.689 15.321c0 2.5-1.125 4.5-2.5 4.5s-2.5-2-2.5-4.5 1.125-4.5 2.5-4.5 2.5 2 2.5 4.5z"
      />
      <path
          id="path8614"
          style="fill:#000000"
          d="m21.398 14.696c0 2.5-1.125 4.5-2.5 4.5s-2.5-2-2.5-4.5 1.125-4.5 2.5-4.5 2.5 2 2.5 4.5z"
      />
      <path
          id="path8616"
          style="fill:#000000"
          d="m30.689 14.696c0 2.5-1.125 4.5-2.5 4.5s-2.5-2-2.5-4.5 1.125-4.5 2.5-4.5 2.5 2 2.5 4.5z"
      />
    </g
    >
  </g
  >
  <metadata
    >
    <rdf:RDF
      >
      <cc:Work
        >
        <dc:format
          >image/svg+xml</dc:format
        >
        <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage"
        />
        <cc:license
            rdf:resource="http://creativecommons.org/licenses/publicdomain/"
        />
        <dc:publisher
          >
          <cc:Agent
              rdf:about="http://openclipart.org/"
            >
            <dc:title
              >Openclipart</dc:title
            >
          </cc:Agent
          >
        </dc:publisher
        >
        <dc:title
          >tango face smile</dc:title
        >
        <dc:date
          >2010-03-08T08:40:05</dc:date
        >
        <dc:description
          >Smiley icon from Tango Project: http://tango.freedesktop.org/Tango_Desktop_Project&#13;\n&lt;br&gt;&lt;br&gt;&#13;\nTango Project icons are Public Domain.</dc:description
        >
        <dc:source
          >https://openclipart.org/detail/30217/tango-face-smile-by-warszawianka</dc:source
        >
        <dc:creator
          >
          <cc:Agent
            >
            <dc:title
              >warszawianka</dc:title
            >
          </cc:Agent
          >
        </dc:creator
        >
        <dc:subject
          >
          <rdf:Bag
            >
            <rdf:li
              >emote</rdf:li
            >
            <rdf:li
              >happy</rdf:li
            >
            <rdf:li
              >icon</rdf:li
            >
            <rdf:li
              >smile</rdf:li
            >
            <rdf:li
              >smiley</rdf:li
            >
          </rdf:Bag
          >
        </dc:subject
        >
      </cc:Work
      >
      <cc:License
          rdf:about="http://creativecommons.org/licenses/publicdomain/"
        >
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#Reproduction"
        />
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#Distribution"
        />
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
        />
      </cc:License
      >
    </rdf:RDF
    >
  </metadata
  >
</svg
>

[davidortinau]

I wouldn't translate that to XAML. It's a complex composition that is better consumed in another way.

Instead, use Resizetizer to auto-gen the bitmaps from that SVG file and use those resources, or use FFImage to load the SVG.

To specifically answer how you "could" do this, you need firstly to wait for radial gradients to be released in 4.8. Then you can easily port each path and host them inside a container, like a Grid.

Porting just one path for example:

SVG:

<path
          id="path8610"
          style="opacity:0.36;fill:#ffffff"
          d="m21.398 15.321c0 2.5-1.125 4.5-2.5 4.5s-2.625-2-2.625-4.5 1.125-4.5 2.5-4.5 2.5 2 2.5 4.5h0.125z"
      />

XAML

<Path
    Fill="#56FFFFFF"
    Data="m21.398 15.321c0 2.5-1.125 4.5-2.5 4.5s-2.625-2-2.625-4.5 1.125-4.5 2.5-4.5 2.5 2 2.5 4.5h0.125z"
/>

So rather than using style you can move that to the Fill property which also takes an alpha for opacity. The d is the Data.

But once you start getting into transforms and translations, you're better off going a different direction unless you have a tool to autogenerate the XAML. That's my opinion anyway.