Skip to content

Instantly share code, notes, and snippets.

@BicycleMark

BicycleMark/MonkeyFace.svg

Last active July 17, 2020 19:59
Show Gist options
  • Save BicycleMark/84dd4d04560311f4b91f93a6d2d03e4e to your computer and use it in GitHub Desktop.
Save BicycleMark/84dd4d04560311f4b91f93a6d2d03e4e to your computer and use it in GitHub Desktop.
Download ZIP
How to Transform SVG to a series of Path Statements for Shape(Path.Data)
Raw
monkeyFace Xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ShapesDemos.MonkeyFaceDemoPage"
Title="Monkey face demo">
<Grid HorizontalOptions="Center"
VerticalOptions="Center">
<!-- Path data from SVG athttps://openclipart.org/detail/86599/monkey-face -->
<Path Fill="#FF502D16" Data="M122.037181 73.3037037 C122.037181 109.1 94.9029248 138.118519 61.4299587 138.118519 C27.9581001 138.118519 0.822736364 109.1 0.822736364 73.3037037 C0.822736364 37.5074074 27.9569926 8.48888889 61.4299587 8.48888889 C94.9018174 8.48888889 122.037181 37.5074074 122.037181 73.3037037 L122.037181 73.3037037 Z"/>
<Path Fill="#FFA05A2C" Data="M106.19796 83.3331702 C106.19796 108.901749 87.6972207 129.629096 64.8746074 129.629096 C42.0527494 129.629096 23.5512546 108.901749 23.5512546 83.3331702 C23.5512546 57.7645917 42.0519943 37.0372443 64.8746074 37.0372443 C87.6964653 37.0372443 106.19796 57.7645917 106.19796 83.3331702 L106.19796 83.3331702 Z"/>
<Path Fill="#FF502D16" Data="M399.5909 72.5324074 C399.5909 108.328704 372.456644 137.347222 338.983678 137.347222 C305.511819 137.347222 278.376455 108.328704 278.376455 72.5324074 C278.376455 36.7361111 305.510712 7.71759259 338.983678 7.71759259 C372.455536 7.71759259 399.5909 36.7361111 399.5909 72.5324074 L399.5909 72.5324074 Z"/>
<Path Fill="#FFA05A2C" Data="M383.751679 82.5618739 C383.751679 108.130453 365.25094 128.8578 342.428326 128.8578 C319.606469 128.8578 301.104974 108.130453 301.104974 82.5618739 C301.104974 56.9932954 319.605713 36.265948 342.428326 36.265948 C365.250184 36.265948 383.751679 56.9932954 383.751679 82.5618739 L383.751679 82.5618739 Z"/>
<Path Fill="#FF502D16" Data="M201.239669 0 C411.099174 18.7805556 397.256198 277.296296 198.487603 361.111111 C-19.7024793 254.833333 9.68595041 9.06481481 201.239669 0 Z"/>
<Path Fill="#FFD38D5F" Data="M201.239669 58.9472222 C377.297521 12.8824074 325.305785 234.169444 205.371901 250.308333 C89.5206612 249.289815 2.2892562 10.5398148 201.239669 58.9472222 Z"/>
<Path Fill="#FF241F1C" Data="M267.387938 122.225395 C267.600827 141.380032 256.658967 156.769338 242.947772 156.599025 C229.236577 156.428712 217.949569 140.763291 217.73668 121.608655 C217.523791 102.454017 228.465651 87.0647113 242.176846 87.2350243 C255.888041 87.4053373 267.175049 103.070758 267.387938 122.225395 Z" />
<Path Fill="#FF241F1C" Data="M175.101775 122.379402 C174.888887 141.534039 163.601877 157.19946 149.890683 157.369773 C136.179488 157.540086 125.237629 142.15078 125.450517 122.996143 C125.663406 103.841505 136.950414 88.1760849 150.661609 88.0057719 C164.372804 87.8354589 175.314664 103.224764 175.101775 122.379402 Z" />
<Path Fill="#FFD38D5F" Data="M326.308234 269.31113 C326.308234 341.333278 270.498044 399.718537 201.650289 399.718537 C132.804813 399.718537 76.992345 341.333278 76.992345 269.31113 C76.992345 197.288981 132.802535 138.903722 201.650289 138.903722 C270.495765 138.903722 326.308234 197.288981 326.308234 269.31113 L326.308234 269.31113 Z"/>
<Path Fill="#FF241F1C" Data="M104.702479 345.225 C169.520661 360.787037 234.338843 366.664815 299.157025 341.8375 C243.776033 368.156019 181.991736 377.384722 104.702479 345.225 L104.702479 345.225 Z"/>
<Path Fill="#FF241F1C" Data="M198.066116 174.993519 C195.075124 227.067593 194.034463 279.123148 199.177686 331.113889 C193.755041 286.700926 191.76 237.113889 198.066116 174.993519 Z"/>
<Path Fill="#FF241F1C" Data="M183.330579 195.215741 C183.330579 203.3125 181.172149 209.875926 178.509669 209.875926 C175.847107 209.875926 173.68876 203.312222 173.68876 195.215741 C173.68876 187.118981 175.84719 180.555556 178.509669 180.555556 C181.172231 180.555556 183.330579 187.119259 183.330579 195.215741 Z"/>
<Path Fill="#FF241F1C" Data="M220.107438 195.061111 C220.107438 203.15787 217.949008 209.721296 215.286529 209.721296 C212.623967 209.721296 210.46562 203.157593 210.46562 195.061111 C210.46562 186.964352 212.62405 180.400926 215.286529 180.400926 C217.949091 180.400926 220.107438 186.96463 220.107438 195.061111 Z"/>
<Path Fill="#FFE3DEDB" Data="M263.347107 112.197222 C262.180579 131.525926 252.966942 138.837963 240.640496 141.500926 C248.209256 142.496667 252.414876 151.85 259.983471 136.771574 C261.643719 128.885556 265.049835 122.658611 263.34686 112.196574 L263.347107 112.197222 Z"/>
<Path Fill="#FFE3DEDB" Data="M167.917355 108.428704 C171.621488 126.532407 164.771901 136.184259 153.840496 142.568519 C161.206612 141.06213 167.485124 148.2975 170.858678 132.046296 C170.461355 124.281759 172.118099 117.480556 167.917686 108.428704 L167.917355 108.428704 Z"/>
</Grid>
</ContentPage>
Display the source blob
Display the rendered blob
Raw
MonkeyFace.svg
<?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:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:ns1="http://sozi.baierouge.fr"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg5825"
sodipodi:docname="New document 35"
viewBox="0 0 482.5 431.67"
version="1.1"
inkscape:version="0.47 r22583"
>
<sodipodi:namedview
id="base"
bordercolor="#666666"
inkscape:pageshadow="2"
inkscape:window-y="58"
pagecolor="#ffffff"
inkscape:window-height="839"
inkscape:window-maximized="0"
inkscape:zoom="1"
inkscape:window-x="117"
showgrid="false"
borderopacity="1.0"
inkscape:current-layer="layer1"
inkscape:cx="252.01705"
inkscape:cy="218.33333"
inkscape:window-width="693"
inkscape:pageopacity="0.0"
inkscape:document-units="px"
/>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer"
transform="translate(-152.5 -86.667)"
>
<g
id="g6873"
>
<path
id="path5837-9"
sodipodi:rx="164.16667"
sodipodi:ry="140"
style="fill:#502d16"
sodipodi:type="arc"
d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
transform="matrix(.44670 0 0 0.5 133.14 -40)"
sodipodi:cy="411.66666"
sodipodi:cx="207.5"
/>
<path
id="path5837-9-3"
sodipodi:rx="164.16667"
sodipodi:ry="140"
style="fill:#a05a2c"
sodipodi:type="arc"
d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
transform="matrix(.30457 0 0 .35714 166.8 29.643)"
sodipodi:cy="411.66666"
sodipodi:cx="207.5"
/>
<path
id="path5837-9-38"
sodipodi:rx="164.16667"
sodipodi:ry="140"
style="fill:#502d16"
sodipodi:type="arc"
d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
transform="matrix(.44670 0 0 0.5 468.98 -40.833)"
sodipodi:cy="411.66666"
sodipodi:cx="207.5"
/>
<path
id="path5837-9-3-4"
sodipodi:rx="164.16667"
sodipodi:ry="140"
style="fill:#a05a2c"
sodipodi:type="arc"
d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
transform="matrix(.30457 0 0 .35714 502.64 28.81)"
sodipodi:cy="411.66666"
sodipodi:cx="207.5"
/>
<path
id="path5835"
sodipodi:nodetypes="ccc"
style="fill:#502d16"
d="m395 86.667c253.93 20.283 237.18 299.48-3.33 390-264.01-114.78-228.45-380.21 3.33-390z"
/>
<path
id="path5952"
sodipodi:nodetypes="ccc"
style="fill:#d38d5f"
d="m395 150.33c213.03-49.75 150.12 189.24 5 206.67-140.18-1.1-245.73-258.95-5-206.67z"
/>
<path
id="path6770-6"
sodipodi:rx="30"
sodipodi:ry="37.5"
style="fill:#241f1c"
sodipodi:type="arc"
d="m101.67 289.17c0 20.711-13.431 37.5-30 37.5s-30-16.789-30-37.5 13.431-37.5 30-37.5 30 16.789 30 37.5z"
transform="matrix(.99459 .10389 -.10389 .99459 403.76 -76.714)"
sodipodi:cy="289.16666"
sodipodi:cx="71.666664"
/>
<path
id="path6770"
sodipodi:rx="30"
sodipodi:ry="37.5"
style="fill:#241f1c"
sodipodi:type="arc"
d="m101.67 289.17c0 20.711-13.431 37.5-30 37.5s-30-16.789-30-37.5 13.431-37.5 30-37.5 30 16.789 30 37.5z"
transform="matrix(.99459 -.10389 .10389 .99459 232.01 -60.99)"
sodipodi:cy="289.16666"
sodipodi:cx="71.666664"
/>
<path
id="path5837"
sodipodi:rx="164.16667"
sodipodi:ry="140"
style="fill:#d38d5f"
sodipodi:type="arc"
d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
transform="matrix(.91878 0 0 1.006 204.85 -36.617)"
sodipodi:cy="411.66666"
sodipodi:cx="207.5"
/>
<path
id="path6722"
sodipodi:nodetypes="ccc"
style="fill:#241f1c"
d="m278.19 459.51c78.43 16.807 156.86 23.155 235.29-3.6585-67.011 28.424-141.77 38.391-235.29 3.6585z"
/>
<path
id="path6722-5"
sodipodi:nodetypes="ccc"
style="fill:#241f1c"
d="m391.16 275.66c-3.6191 56.24-4.8783 112.46 1.345 168.61-6.5614-47.966-8.9754-101.52-1.345-168.61z"
/>
<path
id="path6746"
sodipodi:rx="5.8333335"
sodipodi:ry="15.833333"
style="fill:#241f1c"
sodipodi:type="arc"
d="m138.33 327.5c0 8.7445-2.6117 15.833-5.8333 15.833-3.2217 0-5.8333-7.0888-5.8333-15.833 0-8.7445 2.6117-15.833 5.8333-15.833 3.2217 0 5.8333 7.0888 5.8333 15.833z"
transform="translate(235,-30)"
sodipodi:cy="327.5"
sodipodi:cx="132.5"
/>
<path
id="path6746-0"
sodipodi:rx="5.8333335"
sodipodi:ry="15.833333"
style="fill:#241f1c"
sodipodi:type="arc"
d="m138.33 327.5c0 8.7445-2.6117 15.833-5.8333 15.833-3.2217 0-5.8333-7.0888-5.8333-15.833 0-8.7445 2.6117-15.833 5.8333-15.833 3.2217 0 5.8333 7.0888 5.8333 15.833z"
transform="translate(279.5 -30.167)"
sodipodi:cy="327.5"
sodipodi:cx="132.5"
/>
<path
id="path6830"
sodipodi:nodetypes="cccc"
style="fill:#e3dedb"
d="m470.15 207.84c-1.4115 20.875-12.56 28.772-27.475 31.648 9.1582 1.0754 14.247 11.177 23.405-5.1077 2.0089-8.5169 6.1303-15.242 4.0697-26.541z"
/>
<path
id="path6830-8"
sodipodi:nodetypes="cccc"
style="fill:#e3dedb"
d="m354.68 203.77c4.482 19.552-3.806 29.976-17.033 36.871 8.913-1.6269 16.51 6.1873 20.592-11.364-0.48076-8.3857 1.5239-15.731-3.5586-25.507z"
/>
</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
>Monkey Face</dc:title
>
<dc:date
>2010-09-25T05:06:29</dc:date
>
<dc:description
>Based on a photo of my favorite cuddly monkey Jefro.</dc:description
>
<dc:source
>https://openclipart.org/detail/86599/monkey-face-by-stevepetmonkey</dc:source
>
<dc:creator
>
<cc:Agent
>
<dc:title
>stevepetmonkey</dc:title
>
</cc:Agent
>
</dc:creator
>
<dc:subject
>
<rdf:Bag
>
<rdf:li
>Jungle Animal</rdf:li
>
<rdf:li
>Monkey</rdf:li
>
<rdf:li
>Monkey Face</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
>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment