fill inside the wave shape on svg - reactjs

i made a wave svg from bgjar.com and i need to fill inside the wave a gradient color or atleast a light red color similar to the output picture
what i have
what i need
raw svg code
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="320" height="270" preserveAspectRatio="none" viewBox="0 0 320 270">
<g mask="url("#SvgjsMask1038")" fill="none">
<path d="M -58.93643021614276,150 C -52.94,134.6 -40.94,68 -28.93643021614276,73 C -16.94,78 -10.94,164.8 1.0635697838572398,175 C 13.06,185.2 19.06,117.6 31.06356978385724,124 C 43.06,130.4 49.06,219 61.06356978385724,207 C 73.06,195 79.06,67.6 91.06356978385725,64 C 103.06,60.4 109.06,183.4 121.06356978385725,189 C 133.06,194.6 139.06,101 151.06356978385725,92 C 163.06,83 169.06,147.2 181.06356978385725,144 C 193.06,140.8 199.06,73.2 211.06356978385725,76 C 223.06,78.8 229.06,153 241.06356978385725,158 C 253.06,163 259.06,95.4 271.06356978385725,101 C 283.06,106.6 291.28,182.6 301.06356978385725,186 C 310.85,189.4 316.21,131.6 320,118" stroke="rgba(255, 22, 102, 1)" stroke-width="2"></path>
</g>
<defs>
<mask id="SvgjsMask1038">
<rect width="320" height="270" fill="#ffffff"></rect>
</mask>
</defs>
</svg>


You can modify this one...
<svg
id="chart"
width="1000"
height="500"
viewBox="0 0 1000 500"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M 0,271.24815576685774 C 10.599999999999996,240.48688897649592 31.800000000000004,158.67494027213138 53,117.44182181504868 C 74.2,76.20870335796599 84.80000000000001,75.17380226445499 106,65.08256348144425 C 127.2,54.99132469843352 137.8,2.3375166629619457 159,66.98562789999504 C 180.2,131.63373913702813 190.79999999999998,367.39699461622166 212,388.3231196666097 C 233.2,409.24924471699785 243.8,230.5326737765239 265,171.6162531519355 C 286.2,112.69983252734713 296.8,88.54554102750788 318,93.74101654366785 C 339.2,98.93649205982783 349.8,186.35380781584786 371,197.5936307327354 C 392.2,208.83345364962292 402.8,173.57178815030994 424,149.94013112810546 C 445.2,126.30847410590097 455.8,86.12464938994711 477,79.43534562171294 C 498.2,72.74604185347877 508.8,102.00812370837183 530,116.49361228693465 C 551.2,130.97910086549746 561.8,146.70996863245625 583,151.86278851452704 C 604.2,157.01560839659783 614.8,105.06597744397455 636,142.25771169728864 C 657.2,179.44944595060275 667.8,352.8024986694471 689,337.8214597810976 C 710.2,322.84042089274806 720.8,103.54739853063538 742,67.35251725554093 C 763.2,31.157635980446486 773.8,130.46694719017148 795,156.84705340562533 C 816.2,183.2271596210792 826.8,166.55203838147713 848,199.2530483328103 C 869.2,231.95405828414346 879.8,290.7332238327917 901,320.3521031622911 C 922.2,349.9709824917905 932.8,334.22449767297155 954,347.3474449803073 C 975.2,360.470392287643 996.4,378.2429607552373 1007,385.9668396989698,L 1000 500,L 0 500Z" fill="#321834" />
<path d="M 0,271.24815576685774 C 10.599999999999996,240.48688897649592 31.800000000000004,158.67494027213138 53,117.44182181504868 C 74.2,76.20870335796599 84.80000000000001,75.17380226445499 106,65.08256348144425 C 127.2,54.99132469843352 137.8,2.3375166629619457 159,66.98562789999504 C 180.2,131.63373913702813 190.79999999999998,367.39699461622166 212,388.3231196666097 C 233.2,409.24924471699785 243.8,230.5326737765239 265,171.6162531519355 C 286.2,112.69983252734713 296.8,88.54554102750788 318,93.74101654366785 C 339.2,98.93649205982783 349.8,186.35380781584786 371,197.5936307327354 C 392.2,208.83345364962292 402.8,173.57178815030994 424,149.94013112810546 C 445.2,126.30847410590097 455.8,86.12464938994711 477,79.43534562171294 C 498.2,72.74604185347877 508.8,102.00812370837183 530,116.49361228693465 C 551.2,130.97910086549746 561.8,146.70996863245625 583,151.86278851452704 C 604.2,157.01560839659783 614.8,105.06597744397455 636,142.25771169728864 C 657.2,179.44944595060275 667.8,352.8024986694471 689,337.8214597810976 C 710.2,322.84042089274806 720.8,103.54739853063538 742,67.35251725554093 C 763.2,31.157635980446486 773.8,130.46694719017148 795,156.84705340562533 C 816.2,183.2271596210792 826.8,166.55203838147713 848,199.2530483328103 C 869.2,231.95405828414346 879.8,290.7332238327917 901,320.3521031622911 C 922.2,349.9709824917905 932.8,334.22449767297155 954,347.3474449803073 C 975.2,360.470392287643 996.4,378.2429607552373 1007,385.9668396989698" fill="none" stroke="#FF1666" stroke-width="4px" />
</svg>

Related

Unable to resize logo using parameter value

I'm running a Hugo website using Tella Theme. I would to enlarge the logo.
config.toml has a parameter for sizing:
[params.logo]
main = "img/logo/bnb_logo_transparent.svg"
alt = "Logo"
size = "h-14"
h-14 appears too small size. I've tried modifying the size to enlarge the logo size but the logo disappears with any other value besides h-14. What can I do to resize the logo appropriately?
See attached images.
I also began trying to use custom.css but I'm not sure if I'm applying it correctly or how Hugo reads a custom css file. There are also two custom.css files available - one under css folder and one under static folder.

I have found your website here: https://www.bikenorthbergen.org
The problem is that you have to much whitespace around your logo. I have updated it (I opened the SVG in Inkscape and made the document fit the image). You can find the new logo here:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
x="0px"
y="0px"
viewBox="0 0 523.5517 246.81982"
xml:space="preserve"
id="svg84"
sodipodi:docname="bnb_logo_transparent.svg"
width="523.5517"
height="246.81982"
inkscape:version="1.2.2 (1:1.2.2+202212051550+b0a8486541)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs88" /><sodipodi:namedview
id="namedview86"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="1.1689453"
inkscape:cx="128.3208"
inkscape:cy="122.3325"
inkscape:window-width="3440"
inkscape:window-height="1391"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg84" />
<g
fill="#004d40"
id="g32"
transform="translate(-248.31403,-261.80909)"> <path
d="m 526.05713,294.41211 c 5.77441,2.31006 8.79492,6.84033 8.79492,13.41455 0,11.45996 -6.30762,16.70117 -19.98828,16.70117 h -26.47363 c -4.44141,0 -7.10693,-2.66504 -7.10693,-7.10693 v -45.30664 c 0,-4.44189 2.66553,-7.10693 7.10693,-7.10693 h 24.69678 c 13.68066,0 19.98828,5.24121 19.98828,16.6123 0,5.77441 -2.39844,10.12744 -7.01807,12.61475 z m -13.50342,-5.41895 c 4.7085,0 7.1958,-1.86572 7.1958,-5.86328 0,-3.99756 -2.4873,-6.04102 -7.1958,-6.04102 h -18.03369 v 11.9043 z m 1.42139,23.45312 c 4.79736,0 7.28467,-2.04346 7.28467,-6.12988 0,-3.99756 -2.4873,-5.95215 -7.28467,-5.95215 h -19.45508 v 12.08203 z"
id="path2" /> <path
d="m 540.89307,268.82715 c 0,-4.17529 2.75391,-6.84033 6.84033,-6.84033 4.17578,0 6.92969,2.66504 6.92969,6.84033 0,4.17529 -2.75391,7.01807 -6.92969,7.01807 -4.08643,0 -6.84033,-2.84277 -6.84033,-7.01807 z m 12.97021,18.92236 v 30.82617 c 0,3.99756 -2.30957,6.48535 -6.12988,6.48535 -3.73096,0 -6.04053,-2.48779 -6.04053,-6.48535 v -30.82617 c 0,-3.99756 2.30957,-6.39648 6.04053,-6.39648 3.82031,0 6.12988,2.39893 6.12988,6.39648 z"
id="path4" /> <path
d="m 601.74609,314.22266 c 1.15479,1.33252 1.86523,2.75391 1.86523,4.79736 0,3.64209 -2.39844,6.04102 -6.04102,6.04102 -2.04297,0 -3.73096,-0.88867 -5.06348,-2.57666 l -11.72656,-14.56885 -5.50781,4.26416 v 6.396 c 0,3.99756 -2.30957,6.48535 -6.12988,6.48535 -3.73096,0 -6.04053,-2.48779 -6.04053,-6.48535 v -50.28125 c 0,-3.99805 2.30957,-6.48535 6.04053,-6.48535 3.82031,0 6.12988,2.4873 6.12988,6.48535 v 30.38184 l 17.50098,-15.36865 c 1.33252,-1.24365 2.75391,-1.95459 4.53076,-1.95459 3.46436,0 5.86328,2.31006 5.86328,5.86328 0,2.04346 -0.62207,3.46484 -2.31006,4.79736 l -11.19336,8.88379 12.08203,13.3252 z"
id="path6" /> <path
d="m 630.70752,325.59375 c -14.125,0 -23.5415,-9.06104 -23.5415,-22.38672 0,-13.32568 9.4165,-22.38672 23.09766,-22.38672 12.25928,0 21.76465,8.88379 21.76465,19.09961 v 0.71094 c 0,3.81982 -2.4873,6.30713 -6.21826,6.30713 h -26.20703 c 1.33252,5.06396 5.33008,8.17334 11.10449,8.17334 3.82031,0 6.57422,-1.15527 9.23926,-3.64258 1.06592,-1.06592 2.4873,-1.68799 3.99756,-1.68799 3.19824,0 5.33008,2.04346 5.33008,5.2417 0,1.33252 -0.44385,2.4873 -1.24365,3.55322 -3.90869,4.53076 -9.86084,7.01807 -17.32324,7.01807 z M 619.60303,298.5874 h 20.87646 c -0.97705,-4.44189 -5.15234,-7.28467 -10.21582,-7.28467 -5.2417,0 -9.68359,2.84277 -10.66064,7.28467 z"
id="path8" /> <path
d="m 536.54004,341.74951 v 45.57324 c 0,4.88623 -2.93164,8.08447 -7.28467,8.08447 -3.02051,0 -5.77441,-1.15527 -7.90674,-3.90918 l -26.91748,-35.35693 h -0.17773 v 32.33643 c 0,4.35303 -2.39844,6.92969 -6.48486,6.92969 -3.99756,0 -6.48535,-2.57666 -6.48535,-6.92969 v -45.57275 c 0,-4.88623 3.19824,-8.08447 7.4624,-8.08447 3.37598,0 5.59668,1.06641 7.55127,3.55371 l 27.09521,35.62354 h 0.17773 v -32.24805 c 0,-4.35303 2.4873,-6.9292 6.48486,-6.9292 4.08643,0 6.48535,2.57617 6.48535,6.9292 z"
id="path10" /> <path
d="m 567.72168,351.1665 c 13.76953,0 23.18604,9.06104 23.18604,22.38672 0,13.23682 -9.4165,22.38672 -23.18604,22.38672 -13.68115,0 -23.09766,-9.1499 -23.09766,-22.38672 0,-13.32568 9.4165,-22.38672 23.09766,-22.38672 z m 0,33.66895 c 6.396,0 10.74902,-4.61963 10.74902,-11.28223 0,-6.75146 -4.35303,-11.28223 -10.74902,-11.28223 -6.30762,0 -10.66064,4.53076 -10.66064,11.28223 0,6.6626 4.35303,11.28223 10.66064,11.28223 z"
id="path12" /> <path
d="m 628.84033,357.47363 c 0,3.73145 -2.4873,6.04102 -6.04053,6.04102 -7.729,0 -12.08203,3.46484 -12.08203,12.70361 v 12.70361 c 0,3.99756 -2.30957,6.48535 -6.12988,6.48535 -3.73096,0 -6.04053,-2.48779 -6.04053,-6.48535 V 358.0957 c 0,-3.99756 2.30957,-6.39648 6.04053,-6.39648 3.73145,0 6.04102,2.31006 6.12988,6.04102 h 0.17773 c 2.4873,-4.17529 6.48535,-6.30713 11.9043,-6.30713 3.55322,0 6.04053,2.2207 6.04053,6.04053 z"
id="path14" /> <path
d="m 664.81836,388.47754 c -2.66504,4.9751 -7.81738,7.4624 -14.83594,7.4624 -10.57129,0 -16.79004,-6.48486 -16.79004,-17.58936 v -34.55762 c 0,-3.99756 2.31006,-6.48535 6.04102,-6.48535 3.81982,0 6.12988,2.48779 6.12988,6.48535 v 8.43945 h 12.43701 c 3.64209,0 5.95215,2.04346 5.95215,5.50781 0,3.55371 -2.31006,5.59668 -5.95215,5.59668 h -12.43701 v 15.45752 c 0,3.82031 1.9541,6.04102 5.24121,6.04102 2.04346,0 3.37598,-0.88818 4.88623,-2.75391 1.15479,-1.51025 2.75391,-2.2207 4.53027,-2.2207 3.19824,0 5.5083,2.30957 5.5083,5.68555 0,1.06592 -0.2666,2.04297 -0.71094,2.93115 z"
id="path16" /> <path
d="m 714.03418,370.88818 v 18.03369 c 0,3.99756 -2.31006,6.48535 -6.12988,6.48535 -3.73145,0 -6.04102,-2.48779 -6.04102,-6.48535 v -16.6123 c 0,-6.57422 -3.02051,-10.03857 -8.88379,-10.03857 -6.12939,0 -9.68311,4.17529 -9.68311,11.19336 v 15.45752 c 0,3.99756 -2.30957,6.48535 -6.12939,6.48535 -3.73145,0 -6.04102,-2.48779 -6.04102,-6.48535 v -50.28125 c 0,-3.99805 2.30957,-6.48535 6.04102,-6.48535 3.81982,0 6.12939,2.4873 6.12939,6.48535 v 17.67822 h 0.17773 c 2.84277,-3.28711 7.10693,-5.15234 12.70361,-5.15234 11.6377,0 17.85645,6.9292 17.85645,19.72168 z"
id="path18" /> <path
d="m 526.05713,435.104 c 5.77441,2.31006 8.79492,6.84033 8.79492,13.41455 0,11.45996 -6.30762,16.70117 -19.98828,16.70117 h -26.47363 c -4.44141,0 -7.10693,-2.66504 -7.10693,-7.10693 v -45.30664 c 0,-4.44189 2.66553,-7.10693 7.10693,-7.10693 h 24.69678 c 13.68066,0 19.98828,5.24121 19.98828,16.6123 0,5.77441 -2.39844,10.12744 -7.01807,12.61475 z m -13.50342,-5.41895 c 4.7085,0 7.1958,-1.86572 7.1958,-5.86328 0,-3.99756 -2.4873,-6.04102 -7.1958,-6.04102 h -18.03369 v 11.9043 z m 1.42139,23.45264 c 4.79736,0 7.28467,-2.04297 7.28467,-6.12939 0,-3.99756 -2.4873,-5.95215 -7.28467,-5.95215 h -19.45508 v 12.08154 z"
id="path20" /> <path
d="m 563.8125,466.28564 c -14.125,0 -23.5415,-9.06104 -23.5415,-22.38672 0,-13.32568 9.4165,-22.38672 23.09766,-22.38672 12.25928,0 21.76465,8.8833 21.76465,19.09961 v 0.71094 c 0,3.81982 -2.4873,6.30713 -6.21826,6.30713 h -26.20703 c 1.33252,5.06396 5.33008,8.17334 11.10449,8.17334 3.82031,0 6.57422,-1.15527 9.23926,-3.64258 1.06592,-1.06592 2.4873,-1.68799 3.99756,-1.68799 3.19824,0 5.33008,2.04346 5.33008,5.2417 0,1.33252 -0.44385,2.4873 -1.24365,3.55322 -3.90869,4.53076 -9.86084,7.01807 -17.32324,7.01807 z m -11.10449,-27.00635 h 20.87646 c -0.97705,-4.44189 -5.15234,-7.28467 -10.21582,-7.28467 -5.2417,0 -9.68359,2.84277 -10.66064,7.28467 z"
id="path22" /> <path
d="m 622.35498,427.81934 c 0,3.73145 -2.4873,6.04102 -6.04053,6.04102 -7.729,0 -12.08203,3.46484 -12.08203,12.70361 v 12.70361 c 0,3.99756 -2.30957,6.48535 -6.12988,6.48535 -3.73096,0 -6.04053,-2.48779 -6.04053,-6.48535 v -30.82617 c 0,-3.99756 2.30957,-6.39648 6.04053,-6.39648 3.73145,0 6.04102,2.31006 6.12988,6.04102 h 0.17773 c 2.4873,-4.17529 6.48535,-6.30713 11.9043,-6.30713 3.55322,0 6.04053,2.2207 6.04053,6.04053 z"
id="path24" /> <path
d="m 669.52734,428.44141 v 32.9585 c 0,13.3252 -8.79492,21.40967 -23.00879,21.40967 -8.88379,0 -15.99072,-2.57666 -18.92236,-6.57422 -0.79932,-0.97705 -1.24365,-2.2207 -1.24365,-3.64209 0,-3.46484 2.2207,-5.68555 5.77441,-5.68555 1.42139,0 2.39844,0.44385 3.28711,1.15479 3.10889,2.4873 6.04053,3.73096 10.74902,3.73096 6.9292,0 11.19336,-3.90869 11.19336,-9.77197 v -3.02051 h -0.17773 c -3.10938,3.28711 -7.63965,5.33057 -13.41406,5.33057 -12.1709,0 -20.25488,-8.43945 -20.25488,-21.40967 0,-12.97022 8.08398,-21.40967 20.25488,-21.40967 5.77441,0 10.39355,2.13184 13.50293,5.41895 h 0.17773 c 0.44434,-2.93164 2.66504,-4.88623 5.95215,-4.88623 3.81982,0 6.12988,2.39893 6.12988,6.39648 z m -12.1709,14.48047 c 0,-6.30762 -4.35303,-10.30518 -11.10449,-10.30518 -6.21875,0 -10.30518,3.99756 -10.30518,10.30518 0,6.30713 4.08643,10.30469 10.30518,10.30469 6.75146,0 11.10449,-3.99756 11.10449,-10.30469 z"
id="path26" /> <path
d="m 700.70801,466.28564 c -14.125,0 -23.5415,-9.06104 -23.5415,-22.38672 0,-13.32568 9.4165,-22.38672 23.09766,-22.38672 12.25928,0 21.76465,8.8833 21.76465,19.09961 v 0.71094 c 0,3.81982 -2.4873,6.30713 -6.21826,6.30713 h -26.20703 c 1.33252,5.06396 5.33008,8.17334 11.10449,8.17334 3.82031,0 6.57422,-1.15527 9.23926,-3.64258 1.06592,-1.06592 2.4873,-1.68799 3.99756,-1.68799 3.19824,0 5.33008,2.04346 5.33008,5.2417 0,1.33252 -0.44385,2.4873 -1.24365,3.55322 -3.90869,4.53076 -9.86084,7.01807 -17.32324,7.01807 z m -11.10449,-27.00635 h 20.87646 c -0.97705,-4.44189 -5.15234,-7.28467 -10.21582,-7.28467 -5.2417,0 -9.68359,2.84277 -10.66064,7.28467 z"
id="path28" /> <path
d="m 771.86572,441.23389 v 18.03369 c 0,3.99756 -2.31006,6.48535 -6.12988,6.48535 -3.73096,0 -6.04102,-2.48779 -6.04102,-6.48535 v -16.6123 c 0,-6.57422 -3.02051,-10.03857 -8.88379,-10.03857 -6.12939,0 -9.68311,4.17529 -9.68311,11.19336 v 15.45752 c 0,3.99756 -2.30957,6.48535 -6.12988,6.48535 -3.73096,0 -6.04053,-2.48779 -6.04053,-6.48535 v -30.7373 c 0,-3.99756 2.30957,-6.48535 6.04053,-6.48535 3.19824,0 5.41943,1.77686 6.04102,4.79736 h 0.17773 c 2.93164,-3.46484 7.1958,-5.33008 12.79248,-5.33008 11.6377,0 17.85645,6.9292 17.85645,19.72168 z"
id="path30" /> </g> <g
fill="#43a047"
id="g46"
transform="translate(-248.31403,-261.80909)"> <path
d="m 269.13625,300.84481 c 3.66744,2.0803 8.33659,2.09651 12.10993,-0.36812 5.38042,-3.51435 6.89313,-10.72517 3.37878,-16.10543 -3.51451,-5.38059 -10.72517,-6.89329 -16.1056,-3.37878 -5.10701,3.3358 -6.72058,9.99882 -3.86707,15.26881 -2.68843,-0.42715 -8.56817,-0.65094 -9.56518,5.29756 -0.78944,4.71002 -2.96055,8.08604 -5.76201,10.0525 -1.73245,1.21594 -1.12691,3.87404 0.96717,4.18103 10.55992,1.54855 18.92408,-5.09371 18.84397,-14.94755 z"
id="path34" /> <path
d="m 271.05698,321.78449 c -3.01098,-4.60948 -9.18846,-5.90553 -13.79794,-2.89471 -4.60948,3.01082 -5.90536,9.1883 -2.89454,13.79794 3.01082,4.60931 9.1883,5.90536 13.79778,2.89454 4.60948,-3.01082 5.90536,-9.1883 2.89471,-13.79778 z"
id="path36" /> <path
d="m 280.27252,340.11698 c -2.31317,-3.54143 -7.05952,-4.53715 -10.60095,-2.22398 -2.11792,1.38346 -3.31683,3.63792 -3.45046,5.98353 l 19.12679,4.01075 -5.07539,-7.7703 z"
id="path38" /> <path
d="m 357.54011,318.52458 c 0.94755,0.77257 2.28609,0.84311 3.30953,0.17449 l 15.83478,-10.34294 c 1.10258,-0.72019 1.55649,-2.10965 1.09188,-3.34164 l -6.69269,-17.74674 c -0.63343,-1.68007 -2.6594,-2.34187 -4.1627,-1.35994 l -24.20542,15.81045 c -1.5912,1.03934 -1.71169,3.32624 -0.23855,4.52726 l 15.06318,12.27907 z"
id="path40" /> <path
d="m 449.9406,319.15606 h -1.2534 c 0.91317,-3.43311 1.45952,-7.66149 1.45952,-12.25361 0,-11.43077 -3.34391,-20.69707 -7.46899,-20.69707 -4.12508,0 -7.46883,9.2663 -7.46883,20.69707 0,6.62864 1.12869,12.51454 2.878,16.30263 l -12.29464,16.16917 v -6.79713 c 4.08243,-1.92607 7.19347,-11.75024 7.19347,-23.61173 0,-13.243 -3.87404,-23.97855 -8.65315,-23.97855 -4.77911,0 -8.65315,10.73555 -8.65315,23.97855 0,11.86165 3.1112,21.68597 7.19363,23.61173 v 10.6363 l -8.91489,11.72429 v -5.23642 c 2.47015,-1.8098 4.2939,-8.02734 4.2939,-15.44135 0,-8.83088 -2.58351,-15.98965 -5.77028,-15.98965 -3.18677,0 -5.77012,7.15876 -5.77012,15.98965 0,7.41418 1.82358,13.63172 4.2939,15.44135 v 9.11954 l -7.70041,10.12709 c -5.63633,7.41272 -14.41337,11.765 -23.72541,11.765 h -8.61568 c -6.97827,0 -13.43468,3.69517 -16.96931,9.71211 l -15.67244,26.67849 c -1.78645,3.04131 -5.04993,4.909 -8.57709,4.909 h -8.92316 c -1.67179,0 -3.31667,0.42131 -4.78251,1.22518 l -14.93344,8.18788 c -0.60505,0.33163 -1.24286,0.59954 -1.90321,0.79917 l -21.9422,6.63496 v -0.50256 c 2.47031,-1.80964 4.2939,-8.02718 4.2939,-15.44135 0,-8.83088 -2.58334,-15.98965 -5.77012,-15.98965 -2.32452,0 -4.32276,3.81728 -5.23674,9.30571 -0.78846,-2.29858 -1.89575,-3.74852 -3.1305,-3.74852 -2.3902,0 -4.32795,5.36923 -4.32795,11.99268 0,5.55589 1.37049,10.18483 3.22067,11.54688 v 7.24828 c -0.27488,0.25833 -0.54699,0.5204 -0.79236,0.81036 l -3.34975,3.95886 c -5.47043,6.46517 -0.87506,16.37317 7.59386,16.37317 h 180.17887 c 5.49394,0 9.94774,-4.45379 9.94774,-9.94774 V 329.10379 c 0,-5.49394 -4.45379,-9.94774 -9.94774,-9.94774 z m -181.41621,122.5481 v -5.68108 c 0.97674,-0.71922 1.81629,-2.33652 2.3928,-4.54412 0.76835,3.34651 1.97164,5.83823 3.39094,6.87821 v 1.39546 l -4.07594,1.23248 c -0.59613,0.18033 -1.16048,0.4338 -1.7078,0.71905 z"
id="path42" /> <path
d="m 277.38025,382.49549 6.63042,-4.33087 c -4.82451,8.51709 -4.86797,19.36729 0.8436,28.11174 8.1454,12.47027 24.91669,15.98916 37.38647,7.84425 12.46929,-8.14475 15.98721,-24.91621 7.84198,-37.38647 -5.82006,-8.91018 -16.04284,-13.21884 -25.95522,-11.99868 l -0.16395,-0.68127 5.12404,-3.34699 3.71593,-2.42718 20.77848,14.08222 c 2.35063,1.59395 5.24064,1.9817 7.92777,1.06382 0.72797,-0.24844 1.40908,-0.58137 2.03311,-0.9889 0.12795,-0.0835 0.23612,-0.19087 0.3592,-0.28055 2.10154,1.03415 4.55045,1.33384 6.92102,0.66213 l 7.4998,-2.1236 c 0.63051,-0.17871 1.2114,-0.44596 1.73245,-0.78635 0.73203,-0.47823 1.33108,-1.10875 1.79991,-1.82196 8.7691,6.07726 20.70891,6.63172 30.17728,0.4471 12.46978,-8.14491 15.9877,-24.91653 7.8423,-37.3868 -8.14459,-12.46913 -24.91588,-15.98802 -37.38566,-7.84311 -1.73342,1.13226 -3.27483,2.44485 -4.65505,3.87566 L 335.53467,310.0328 c 1.46941,-2.163 1.50995,-5.09258 -0.14449,-7.30374 -2.08581,-2.78654 -6.03704,-3.34813 -8.82083,-1.26848 l -11.88062,8.89186 -29.23232,-5.95547 c -2.24457,-0.45667 -4.56147,0.34218 -6.04986,2.08257 -1.48838,1.74282 -1.9131,4.15573 -1.10939,6.30154 l 12.13442,32.41374 c 1.06253,2.83795 3.99388,4.51753 6.97941,3.99956 l 1.58147,-0.27455 8.40081,5.69357 -1.60239,1.04664 -6.90302,4.50893 -3.04504,-4.66169 c -0.54148,-0.82917 -1.39043,-1.40924 -2.35971,-1.61244 l -36.65088,-7.68532 c -3.25553,-0.68257 -5.71141,2.91141 -3.89237,5.69617 l 19.27258,29.50574 c 1.12756,1.72628 3.44138,2.21182 5.16782,1.0841 z m 35.48343,-31.45516 -5.31929,-3.60517 14.15714,-2.06019 c 2.09732,-0.30536 4.17665,0.65905 5.29837,2.45734 l 2.26679,3.63387 c -2.41696,1.91699 -5.26853,3.56933 -8.72093,4.74586 l 0.0154,0.0449 -2.28722,-1.55001 -5.41026,-3.66663 z m 24.10001,16.33328 -9.89665,-6.70729 c 2.11062,-1.03301 4.03524,-2.20354 5.75147,-3.50608 l 6.60674,10.59122 c -0.84133,0.24406 -1.73034,0.11692 -2.46155,-0.37785 z m 22.01096,-31.71431 16.44858,12.64768 c 1.04274,0.80257 2.44291,0.81603 3.48549,0.13509 0.2765,-0.18066 0.52786,-0.40996 0.74079,-0.68678 1.01453,-1.31973 0.76754,-3.21126 -0.55186,-4.2253 l -16.45588,-12.65352 c 0.95014,-0.9229 1.99435,-1.77428 3.14412,-2.52529 9.68713,-6.32749 22.71574,-3.59479 29.04291,6.09202 6.32797,9.68778 3.5943,22.71607 -6.09299,29.04372 -9.68729,6.32749 -22.71591,3.59463 -29.04372,-6.09315 -4.41358,-6.75707 -4.40628,-15.13405 -0.71743,-21.73446 z m -9.32014,24.3924 1.92202,-5.85882 c 0.52056,1.61795 1.19745,3.20234 2.04284,4.73645 z m -49.25202,-24.16764 -6.3137,-16.86649 20.85454,4.24784 c 1.76196,0.36001 3.60549,-0.0509 5.03338,-1.12967 l 10.84972,-8.12042 11.16108,8.76991 c -0.023,2.0031 -0.29125,7.54229 -2.41323,13.71069 l 4.15719,7.0026 c 2.782,-5.8259 3.98172,-11.65083 4.50163,-15.80591 l 4.13805,3.25148 -6.85324,22.38168 -7.80144,-13.14132 c -3.47089,-5.84471 -10.30224,-8.99029 -16.99882,-7.82738 l -20.31516,3.527 z m -4.40839,38.05364 c 1.1848,-0.77387 2.42085,-1.40795 3.68722,-1.91456 l 4.85776,20.18738 c 0.38872,1.61731 2.01656,2.61464 3.63501,2.22511 0.34526,-0.0832 0.66181,-0.22331 0.94301,-0.40704 1.03674,-0.67722 1.58763,-1.95591 1.28146,-3.2291 l -4.85467,-20.177 c 7.48748,-0.6777 15.10275,2.68681 19.49265,9.40755 6.32797,9.68778 3.5943,22.71623 -6.09251,29.04339 -9.68729,6.32749 -22.71574,3.59479 -29.04356,-6.09299 -6.32733,-9.68681 -3.59365,-22.7151 6.09364,-29.04275 z"
id="path44" /> </g> <g
fill="#43a047"
id="g82"
transform="translate(-248.31403,-261.80909)"> <path
d="m 269.32373,496.37256 c 6.76611,0.0425 9.14941,1.87256 9.14941,5.95801 0,3.91504 -3.36182,6.29834 -8.93701,6.29834 -4.12793,0 -7.10693,-0.93652 -9.10693,-2.89404 -0.29785,-0.29785 -0.42578,-0.68066 -0.42578,-1.06396 0,-0.85107 0.59619,-1.4043 1.31934,-1.4043 0.55322,0 0.89355,0.25537 1.23438,0.55322 1.53174,1.36182 3.95752,2.12793 6.80908,2.12793 3.83008,0 6.17041,-1.4043 6.17041,-3.65967 0,-2.08545 -1.53174,-2.93652 -6.3833,-3.02148 -6.59619,-0.12793 -8.85205,-1.74512 -8.85205,-5.5752 0,-3.83008 3.48975,-6.34082 8.85205,-6.34082 3.44727,0 6.00049,0.76611 7.87305,2.38281 0.34033,0.29834 0.51074,0.63867 0.51074,1.19189 0,0.80859 -0.55322,1.4043 -1.31934,1.4043 -0.42578,0 -0.80859,-0.17041 -1.10645,-0.42578 -1.44727,-1.19141 -3.61719,-1.91504 -5.7876,-1.91504 -3.74512,0 -6.04346,1.40479 -6.04346,3.70264 0,1.87256 1.44727,2.63867 6.04346,2.68115 z"
id="path48" /> <path
d="m 302.90039,489.18018 v 17.61865 c 0,0.979 -0.51074,1.57471 -1.44678,1.57471 -0.93604,0 -1.48926,-0.5957 -1.48926,-1.57471 v -2 h -0.0855 c -1.61719,2.42578 -4.46826,3.83008 -8.12842,3.83008 -6.12793,0 -10.25586,-4.25586 -10.25586,-10.63916 0,-6.38379 4.12793,-10.63916 10.25586,-10.63916 3.66016,0 6.51123,1.4043 8.12842,3.83008 h 0.0855 v -2.00049 c 0,-1.021 0.55322,-1.57422 1.48926,-1.57422 0.93604,0 1.44678,0.55322 1.44678,1.57422 z m -2.93604,8.80957 c 0,-4.72412 -3.19189,-8.00098 -7.74561,-8.00098 -4.59619,0 -7.74512,3.23438 -7.74512,8.00098 0,4.76611 3.14893,8.00049 7.74512,8.00049 4.55371,0 7.74561,-3.23438 7.74561,-8.00049 z"
id="path50" /> <path
d="m 311.36963,485.69092 v 2.17041 h 8.85156 c 0.89404,0 1.44727,0.46777 1.44727,1.31885 0,0.80859 -0.55322,1.31934 -1.44727,1.31934 h -8.85156 v 16.29932 c 0,0.979 -0.55322,1.57471 -1.44678,1.57471 -0.93652,0 -1.48975,-0.5957 -1.48975,-1.57471 v -21.06543 c 0,-4.93652 2.85156,-7.91553 7.5752,-7.91553 3.14941,0 5.57471,1.36182 6.7666,3.65967 0.12744,0.25537 0.21289,0.51074 0.21289,0.76611 0,0.80859 -0.55322,1.36182 -1.36182,1.36182 -0.55322,0 -1.02148,-0.38281 -1.27686,-0.85107 -0.80859,-1.48975 -2.29834,-2.29834 -4.21338,-2.29834 -3.02148,0 -4.76611,1.87256 -4.76611,5.23486 z"
id="path52" /> <path
d="m 341.75586,499.01123 h -16.25684 c 0.46826,4.17041 3.48975,6.979 7.95801,6.979 2.72363,0 4.93652,-1.06396 6.25586,-2.76611 0.25537,-0.34033 0.68066,-0.5957 1.19141,-0.5957 0.80859,0 1.36182,0.55322 1.36182,1.36182 0,0.34033 -0.085,0.5957 -0.29785,0.89355 -1.82959,2.34082 -4.89404,3.74512 -8.51123,3.74512 -6.59619,0 -10.97949,-4.29834 -10.97949,-10.63916 0,-6.34082 4.3833,-10.63916 10.72412,-10.63916 6.04297,0 10.42627,4.21289 10.42627,9.87305 0,1.14893 -0.68066,1.7876 -1.87207,1.7876 z m -16.17188,-2.55371 h 15.27783 c -0.5957,-3.87256 -3.53223,-6.46875 -7.66016,-6.46875 -4.08545,0 -7.02197,2.59619 -7.61768,6.46875 z"
id="path54" /> <path
d="m 365.80078,496.37256 c 6.76611,0.0425 9.14941,1.87256 9.14941,5.95801 0,3.91504 -3.36182,6.29834 -8.93701,6.29834 -4.12793,0 -7.10693,-0.93652 -9.10693,-2.89404 -0.29785,-0.29785 -0.42578,-0.68066 -0.42578,-1.06396 0,-0.85107 0.5957,-1.4043 1.31934,-1.4043 0.55322,0 0.89355,0.25537 1.23438,0.55322 1.53174,1.36182 3.95752,2.12793 6.80908,2.12793 3.83008,0 6.17041,-1.4043 6.17041,-3.65967 0,-2.08545 -1.53174,-2.93652 -6.3833,-3.02148 -6.59619,-0.12793 -8.85205,-1.74512 -8.85205,-5.5752 0,-3.83008 3.48975,-6.34082 8.85205,-6.34082 3.44727,0 6.00049,0.76611 7.87305,2.38281 0.34033,0.29834 0.51074,0.63867 0.51074,1.19189 0,0.80859 -0.55322,1.4043 -1.31934,1.4043 -0.42578,0 -0.80859,-0.17041 -1.10645,-0.42578 -1.44727,-1.19141 -3.61768,-1.91504 -5.7876,-1.91504 -3.74512,0 -6.04346,1.40479 -6.04346,3.70264 0,1.87256 1.44727,2.63867 6.04346,2.68115 z"
id="path56" /> <path
d="m 392.65332,504.96875 c -1.19141,2.34082 -3.53223,3.66016 -6.72363,3.66016 -4.59619,0 -7.44775,-2.979 -7.44775,-7.91553 V 482.5415 c 0,-0.979 0.55322,-1.57471 1.44727,-1.57471 0.93604,0 1.48926,0.5957 1.48926,1.57471 v 5.31982 h 8.85205 c 0.89355,0 1.44678,0.46777 1.44678,1.31885 0,0.80859 -0.55322,1.31934 -1.44678,1.31934 h -8.85205 v 10.25635 c 0,3.36182 1.74463,5.23438 4.68115,5.23438 2.04297,0 3.40479,-0.89355 4.21338,-2.46826 0.2124,-0.42529 0.63818,-0.72363 1.19141,-0.72363 0.76611,0 1.31934,0.59619 1.31934,1.40479 0,0.29785 -0.085,0.5957 -0.17041,0.76562 z"
id="path58" /> <path
d="m 408.10205,488.88232 c 0,0.93652 -0.5957,1.44727 -1.44727,1.44727 -4.80859,0 -7.48975,2.93604 -7.48975,8.89404 v 7.5752 c 0,0.979 -0.55322,1.57471 -1.44678,1.57471 -0.93652,0 -1.48975,-0.5957 -1.48975,-1.57471 v -17.61865 c 0,-1.021 0.55322,-1.57422 1.48975,-1.57422 0.89355,0 1.44678,0.55322 1.44678,1.57422 v 2.29834 h 0.085 c 1.4043,-2.59619 3.91553,-4.00049 7.40479,-4.00049 0.85156,0 1.44727,0.46826 1.44727,1.4043 z"
id="path60" /> <path
d="M 428.23145,499.01123 H 411.9751 c 0.46826,4.17041 3.48975,6.979 7.95801,6.979 2.72363,0 4.93652,-1.06396 6.25586,-2.76611 0.25537,-0.34033 0.68115,-0.5957 1.19141,-0.5957 0.80859,0 1.36182,0.55322 1.36182,1.36182 0,0.34033 -0.085,0.5957 -0.29785,0.89355 -1.82959,2.34082 -4.89404,3.74512 -8.51123,3.74512 -6.59619,0 -10.97949,-4.29834 -10.97949,-10.63916 0,-6.34082 4.3833,-10.63916 10.72412,-10.63916 6.04297,0 10.42627,4.21289 10.42627,9.87305 0,1.14893 -0.68066,1.7876 -1.87256,1.7876 z m -16.17139,-2.55371 h 15.27783 c -0.5957,-3.87256 -3.53223,-6.46875 -7.66016,-6.46875 -4.08545,0 -7.02197,2.59619 -7.61768,6.46875 z"
id="path62" /> <path
d="m 452.61719,499.01123 h -16.25684 c 0.46826,4.17041 3.48975,6.979 7.95801,6.979 2.72363,0 4.93652,-1.06396 6.25586,-2.76611 0.25537,-0.34033 0.68066,-0.5957 1.19141,-0.5957 0.80859,0 1.36182,0.55322 1.36182,1.36182 0,0.34033 -0.085,0.5957 -0.29785,0.89355 -1.82959,2.34082 -4.89404,3.74512 -8.51123,3.74512 -6.59619,0 -10.97949,-4.29834 -10.97949,-10.63916 0,-6.34082 4.3833,-10.63916 10.72412,-10.63916 6.04297,0 10.42627,4.21289 10.42627,9.87305 0,1.14893 -0.68066,1.7876 -1.87207,1.7876 z m -16.17188,-2.55371 h 15.27783 c -0.5957,-3.87256 -3.53223,-6.46875 -7.66016,-6.46875 -4.08545,0 -7.02197,2.59619 -7.61768,6.46875 z"
id="path64" /> <path
d="m 472.3208,504.96875 c -1.19141,2.34082 -3.53223,3.66016 -6.72363,3.66016 -4.59619,0 -7.44775,-2.979 -7.44775,-7.91553 V 482.5415 c 0,-0.979 0.55322,-1.57471 1.44727,-1.57471 0.93604,0 1.48926,0.5957 1.48926,1.57471 v 5.31982 h 8.85205 c 0.89355,0 1.44678,0.46777 1.44678,1.31885 0,0.80859 -0.55322,1.31934 -1.44678,1.31934 h -8.85205 v 10.25635 c 0,3.36182 1.74463,5.23438 4.68115,5.23438 2.04297,0 3.40479,-0.89355 4.21338,-2.46826 0.21289,-0.42529 0.63818,-0.72363 1.19141,-0.72363 0.76611,0 1.31934,0.59619 1.31934,1.40479 0,0.29785 -0.085,0.5957 -0.17041,0.76562 z"
id="path66" /> <path
d="m 484.02441,496.37256 c 6.76611,0.0425 9.14941,1.87256 9.14941,5.95801 0,3.91504 -3.36182,6.29834 -8.93701,6.29834 -4.12793,0 -7.10693,-0.93652 -9.10693,-2.89404 -0.29785,-0.29785 -0.42578,-0.68066 -0.42578,-1.06396 0,-0.85107 0.5957,-1.4043 1.31934,-1.4043 0.55322,0 0.89355,0.25537 1.23438,0.55322 1.53174,1.36182 3.95752,2.12793 6.80908,2.12793 3.83008,0 6.17041,-1.4043 6.17041,-3.65967 0,-2.08545 -1.53174,-2.93652 -6.3833,-3.02148 -6.59619,-0.12793 -8.85205,-1.74512 -8.85205,-5.5752 0,-3.83008 3.48975,-6.34082 8.85205,-6.34082 3.44727,0 6.00049,0.76611 7.87305,2.38281 0.34033,0.29834 0.51074,0.63867 0.51074,1.19189 0,0.80859 -0.55322,1.4043 -1.31934,1.4043 -0.42578,0 -0.80859,-0.17041 -1.10645,-0.42578 -1.44727,-1.19141 -3.61768,-1.91504 -5.7876,-1.91504 -3.74512,0 -6.04346,1.40479 -6.04346,3.70264 0,1.87256 1.44727,2.63867 6.04346,2.68115 z"
id="path68" /> <path
d="m 510.15332,485.69092 v 2.17041 h 8.85156 c 0.89404,0 1.44727,0.46777 1.44727,1.31885 0,0.80859 -0.55322,1.31934 -1.44727,1.31934 h -8.85156 v 16.29932 c 0,0.979 -0.55322,1.57471 -1.44678,1.57471 -0.93652,0 -1.48975,-0.5957 -1.48975,-1.57471 v -21.06543 c 0,-4.93652 2.85156,-7.91553 7.5752,-7.91553 3.14941,0 5.57471,1.36182 6.7666,3.65967 0.12744,0.25537 0.21289,0.51074 0.21289,0.76611 0,0.80859 -0.55322,1.36182 -1.36182,1.36182 -0.55322,0 -1.02148,-0.38281 -1.27686,-0.85107 -0.80859,-1.48975 -2.29834,-2.29834 -4.21338,-2.29834 -3.02148,0 -4.76611,1.87256 -4.76611,5.23486 z"
id="path70" /> <path
d="m 531.98535,487.35059 c 6.38379,0 10.76709,4.29834 10.76709,10.63916 0,6.29834 -4.3833,10.63916 -10.76709,10.63916 -6.34082,0 -10.72412,-4.34082 -10.72412,-10.63916 0,-6.34082 4.3833,-10.63916 10.72412,-10.63916 z m 0,18.63965 c 4.63867,0 7.78809,-3.23438 7.78809,-8.00049 0,-4.7666 -3.14941,-8.00098 -7.78809,-8.00098 -4.59619,0 -7.74512,3.23438 -7.74512,8.00098 0,4.76611 3.14893,8.00049 7.74512,8.00049 z"
id="path72" /> <path
d="m 559.22217,488.88232 c 0,0.93652 -0.5957,1.44727 -1.44727,1.44727 -4.80859,0 -7.48975,2.93604 -7.48975,8.89404 v 7.5752 c 0,0.979 -0.55322,1.57471 -1.44678,1.57471 -0.93652,0 -1.48975,-0.5957 -1.48975,-1.57471 v -17.61865 c 0,-1.021 0.55322,-1.57422 1.48975,-1.57422 0.89355,0 1.44678,0.55322 1.44678,1.57422 v 2.29834 h 0.085 c 1.4043,-2.59619 3.91553,-4.00049 7.40479,-4.00049 0.85156,0 1.44727,0.46826 1.44727,1.4043 z"
id="path74" /> <path
d="m 592.96875,489.18018 v 17.61865 c 0,0.979 -0.51074,1.57471 -1.44678,1.57471 -0.93604,0 -1.48926,-0.5957 -1.48926,-1.57471 v -2 h -0.0854 c -1.61719,2.42578 -4.46826,3.83008 -8.12842,3.83008 -6.12793,0 -10.25586,-4.25586 -10.25586,-10.63916 0,-6.38379 4.12793,-10.63916 10.25586,-10.63916 3.66016,0 6.51123,1.4043 8.12842,3.83008 h 0.0854 v -2.00049 c 0,-1.021 0.55322,-1.57422 1.48926,-1.57422 0.93604,0 1.44678,0.55322 1.44678,1.57422 z m -2.93604,8.80957 c 0,-4.72412 -3.19189,-8.00098 -7.74561,-8.00098 -4.59619,0 -7.74512,3.23438 -7.74512,8.00098 0,4.76611 3.14893,8.00049 7.74512,8.00049 4.55371,0 7.74561,-3.23438 7.74561,-8.00049 z"
id="path76" /> <path
d="m 601.43799,479.64746 v 27.15137 c 0,0.979 -0.55322,1.57471 -1.44678,1.57471 -0.93652,0 -1.48975,-0.5957 -1.48975,-1.57471 v -27.15137 c 0,-0.97852 0.55322,-1.57422 1.48975,-1.57422 0.89355,0 1.44678,0.5957 1.44678,1.57422 z"
id="path78" /> <path
d="m 609.90625,479.64746 v 27.15137 c 0,0.979 -0.55322,1.57471 -1.44678,1.57471 -0.93652,0 -1.48975,-0.5957 -1.48975,-1.57471 v -27.15137 c 0,-0.97852 0.55322,-1.57422 1.48975,-1.57422 0.89355,0 1.44678,0.5957 1.44678,1.57422 z"
id="path80" /> </g>
</svg>
To make the logo bigger you can set the h-24 class instead of the h-14.

Can an external SVG document contain an AngularJS ng-click or ng-model directive?

I'm creating a touchscreen directory and I'm using AngularJS framework.
I want some information to appear in the html document when a shape in the SVG document is clicked on.
I'm using the object tag to embed the svg document into the html document.
If I add a ng-if or ng-model directive in the external SVG document, will that work?
If it does, do I need to put a ng-controller directive in the SVG document ?
Example:
HTML
<object ng-attr-data="image.svg" type="image/svg+xml"></object>
<div ng-if="click">Hello</div>
SVG
<svg>
<g id="Layer_2">
<rect x="95.8" y="61.3" id="101" class="st2" width="349.5" height="227.1" ng-model="click"/>
</g>
</svg>

To do this, the svg code must be compiled by AngularJS, so it can interprets directives like ng-click withing <svg>...</svg> code
The trick is to create a custom directive, using svg image file as template for the directive.
Here is a sample code :
Project structure
|_ index.html
|_ module.js
|_ assets
|_ ellipses.svg
|_ tux-mono.svg
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="module.js"></script>
</head>
<body ng-controller="MyController">
<svg-component data-uid="ellipses-1" data-filename="assets/ellipses.svg"></svg-component>
<svg-component data-uid="ellipses-2" data-filename="assets/ellipses.svg"></svg-component>
<svg-component data-uid="tux" data-filename="assets/tux-mono.svg"></svg-component>
<p ng-if="data.componentUid && data.objectName">
<strong ng-bind="data.objectName"></strong> object was clicked in
<strong ng-bind="data.componentUid"></strong> component
</p>
</body>
</html>
module.js
(function () {
'use strict';
angular.module('app', []);
angular.
module('app')
.controller('MyController', ['$scope', '$rootScope', function ($scope, $rootScope) {
$rootScope.$on('SVG_COMPONENT_ON_CLICK', function (event, data) {
$scope.data = data;
});
}])
.directive('svgComponent', ['$rootScope', function ($rootScope) {
return {
restrict: 'E',
templateUrl: function (element, attrs) {
return attrs.filename;
},
scope: {},
link: link
};
function link(scope, element, attrs) {
scope.callback = function (objectName) {
$rootScope.$broadcast('SVG_COMPONENT_ON_CLICK', {
componentUid: attrs.uid,
objectName: objectName
});
}
}
}]);
})();
ellipses.svg
<svg height="150" width="500">
<ellipse ng-click="callback('Purple')" cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse ng-click="callback('Green')" cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse ng-click="callback('Yellow')" cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
Sorry, your browser does not support inline SVG.
</svg>
tux-mono.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="178pt" height="215pt" viewBox="0 0 178 215" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(12.54902%,12.54902%,12.54902%);fill-opacity:1;" d="M 170.976562 169.433594 C 170.976562 169.433594 170.972656 169.429688 170.972656 169.425781 C 169.453125 167.714844 168.730469 164.539062 167.953125 161.15625 C 167.179688 157.777344 166.3125 154.132812 163.539062 151.769531 C 163.53125 151.765625 163.523438 151.761719 163.519531 151.753906 C 162.96875 151.273438 162.40625 150.871094 161.835938 150.53125 C 161.269531 150.195312 160.691406 149.917969 160.113281 149.703125 C 163.96875 138.261719 162.457031 126.871094 158.5625 116.578125 C 153.785156 103.941406 145.441406 92.933594 139.070312 85.40625 C 131.9375 76.40625 124.960938 67.867188 125.101562 55.253906 C 125.3125 36 127.21875 0.296875 93.335938 0.25 C 91.960938 0.246094 90.523438 0.304688 89.023438 0.425781 C 51.164062 3.472656 61.207031 43.472656 60.644531 56.863281 C 59.953125 66.660156 57.96875 74.378906 51.230469 83.953125 C 43.316406 93.363281 32.171875 108.597656 26.894531 124.453125 C 24.40625 131.9375 23.21875 139.566406 24.3125 146.785156 C 23.96875 147.09375 23.644531 147.414062 23.332031 147.746094 C 21.011719 150.226562 19.292969 153.230469 17.378906 155.253906 C 15.59375 157.039062 13.046875 157.71875 10.246094 158.71875 C 7.449219 159.726562 4.375 161.203125 2.511719 164.785156 C 2.511719 164.785156 2.511719 164.789062 2.507812 164.789062 C 2.503906 164.792969 2.503906 164.800781 2.496094 164.804688 C 1.621094 166.441406 1.335938 168.210938 1.335938 170.003906 C 1.335938 171.660156 1.578125 173.339844 1.828125 174.957031 C 2.34375 178.320312 2.863281 181.503906 2.171875 183.660156 C -0.0429688 189.71875 -0.328125 193.90625 1.234375 196.945312 C 2.796875 199.988281 6.011719 201.332031 9.640625 202.09375 C 16.90625 203.609375 26.746094 203.234375 34.496094 207.34375 L 35.164062 206.085938 L 34.503906 207.34375 C 42.804688 211.683594 51.21875 213.226562 57.933594 211.691406 C 62.800781 210.582031 66.753906 207.683594 68.78125 203.222656 C 74.03125 203.199219 79.796875 200.972656 89.023438 200.464844 C 95.289062 199.960938 103.109375 202.691406 112.109375 202.191406 C 112.34375 203.164062 112.683594 204.105469 113.148438 204.996094 C 113.152344 205.003906 113.15625 205.015625 113.164062 205.023438 C 116.648438 211.996094 123.128906 215.1875 130.039062 214.640625 C 136.953125 214.097656 144.304688 210.019531 150.25 202.949219 L 149.160156 202.03125 L 150.257812 202.9375 C 155.921875 196.066406 165.324219 193.21875 171.5625 189.460938 C 174.679688 187.578125 177.207031 185.226562 177.40625 181.804688 C 177.601562 178.386719 175.59375 174.558594 170.976562 169.433594 Z M 170.976562 169.433594 "/>
<path ng-click="callback('Left feet')" style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 174.558594 181.640625 C 174.441406 183.753906 172.914062 185.320312 170.089844 187.019531 C 164.449219 190.421875 154.453125 193.382812 148.070312 201.113281 C 142.523438 207.710938 135.765625 211.335938 129.8125 211.804688 C 123.859375 212.273438 118.726562 209.804688 115.695312 203.726562 L 115.691406 203.714844 L 115.683594 203.699219 C 113.800781 200.125 114.585938 194.488281 116.167969 188.539062 C 117.75 182.589844 120.023438 176.480469 120.328125 171.515625 L 120.328125 171.503906 C 120.648438 165.140625 121.007812 159.585938 122.074219 155.300781 C 123.144531 151.011719 124.828125 148.113281 127.808594 146.480469 C 127.945312 146.40625 128.085938 146.332031 128.222656 146.265625 C 128.558594 151.773438 131.289062 157.390625 136.105469 158.605469 C 141.382812 159.996094 148.984375 155.472656 152.195312 151.78125 C 152.835938 151.753906 153.460938 151.722656 154.070312 151.707031 C 156.886719 151.640625 159.246094 151.800781 161.664062 153.914062 L 161.675781 153.925781 C 163.53125 155.496094 164.414062 158.46875 165.179688 161.792969 C 165.945312 165.121094 166.554688 168.742188 168.851562 171.324219 L 168.851562 171.328125 L 168.855469 171.332031 C 173.265625 176.226562 174.683594 179.53125 174.558594 181.640625 Z M 174.558594 181.640625 "/>
<path ng-click="callback('Right feet')" style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 67.371094 197.238281 L 67.371094 197.269531 C 66.859375 203.953125 63.089844 207.59375 57.300781 208.917969 C 51.515625 210.238281 43.667969 208.921875 35.832031 204.824219 C 35.828125 204.824219 35.828125 204.824219 35.824219 204.824219 C 27.15625 200.230469 16.84375 200.6875 10.226562 199.304688 C 6.917969 198.613281 4.757812 197.574219 3.765625 195.644531 C 2.777344 193.710938 2.753906 190.34375 4.859375 184.601562 L 4.871094 184.578125 L 4.878906 184.550781 C 5.921875 181.339844 5.148438 177.824219 4.640625 174.523438 C 4.136719 171.226562 3.890625 168.226562 5.015625 166.132812 L 5.027344 166.113281 C 6.46875 163.335938 8.585938 162.339844 11.210938 161.398438 C 13.835938 160.457031 16.949219 159.71875 19.40625 157.253906 L 19.433594 157.226562 C 21.707031 154.828125 23.414062 151.820312 25.414062 149.691406 C 27.097656 147.890625 28.785156 146.695312 31.328125 146.679688 C 31.359375 146.683594 31.386719 146.683594 31.414062 146.679688 C 31.859375 146.683594 32.332031 146.71875 32.832031 146.796875 C 36.207031 147.308594 39.148438 149.667969 41.984375 153.511719 L 50.171875 168.429688 L 50.171875 168.4375 L 50.175781 168.441406 C 52.355469 172.988281 56.953125 177.992188 60.851562 183.09375 C 64.75 188.195312 67.765625 193.316406 67.371094 197.238281 Z M 67.371094 197.238281 "/>
<path ng-click="callback('Nose')" style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 108.191406 58.171875 C 107.535156 56.886719 106.191406 55.660156 103.90625 54.722656 L 103.902344 54.71875 L 103.894531 54.71875 C 99.140625 52.683594 97.078125 52.539062 94.425781 50.8125 C 90.109375 48.039062 86.542969 47.066406 83.578125 47.078125 C 82.023438 47.082031 80.636719 47.359375 79.394531 47.789062 C 75.78125 49.03125 73.386719 51.621094 71.882812 53.046875 L 71.878906 53.046875 C 71.878906 53.050781 71.878906 53.050781 71.878906 53.050781 C 71.582031 53.332031 71.203125 53.585938 70.28125 54.261719 C 69.355469 54.941406 67.964844 55.960938 65.964844 57.460938 C 64.1875 58.792969 63.609375 60.527344 64.226562 62.558594 C 64.835938 64.59375 66.796875 66.9375 70.382812 68.964844 L 70.386719 68.96875 L 70.394531 68.972656 C 72.621094 70.28125 74.140625 72.042969 75.886719 73.445312 C 76.757812 74.144531 77.675781 74.769531 78.78125 75.242188 C 79.886719 75.714844 81.175781 76.035156 82.789062 76.128906 C 86.578125 76.351562 89.371094 75.210938 91.832031 73.800781 C 94.300781 72.394531 96.390625 70.671875 98.789062 69.894531 L 98.792969 69.890625 L 98.796875 69.890625 C 103.710938 68.355469 107.21875 65.261719 108.316406 62.324219 C 108.863281 60.855469 108.847656 59.460938 108.191406 58.171875 Z M 108.191406 58.171875 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(12.54902%,12.54902%,12.54902%);fill-opacity:1;" d="M 95.722656 65.425781 C 91.8125 67.464844 87.246094 69.9375 82.386719 69.9375 C 77.527344 69.9375 73.691406 67.691406 70.929688 65.503906 C 69.550781 64.414062 68.429688 63.324219 67.585938 62.535156 C 66.117188 61.378906 66.292969 59.753906 66.898438 59.800781 C 67.90625 59.929688 68.058594 61.257812 68.695312 61.851562 C 69.554688 62.65625 70.632812 63.699219 71.9375 64.734375 C 74.546875 66.800781 78.027344 68.816406 82.386719 68.816406 C 86.734375 68.816406 91.8125 66.261719 94.914062 64.523438 C 96.667969 63.539062 98.902344 61.773438 100.726562 60.433594 C 102.121094 59.410156 102.070312 58.175781 103.222656 58.308594 C 104.375 58.445312 103.523438 59.675781 101.910156 61.082031 C 100.296875 62.492188 97.773438 64.359375 95.722656 65.425781 Z M 95.722656 65.425781 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 155.597656 148.867188 C 155.054688 148.847656 154.519531 148.851562 154 148.863281 C 153.953125 148.863281 153.90625 148.863281 153.855469 148.863281 C 155.199219 144.625 152.226562 141.496094 144.3125 137.917969 C 136.105469 134.308594 129.566406 134.664062 128.460938 141.988281 C 128.390625 142.371094 128.332031 142.765625 128.289062 143.160156 C 127.675781 143.375 127.058594 143.644531 126.441406 143.984375 C 122.585938 146.09375 120.484375 149.917969 119.3125 154.613281 C 118.144531 159.304688 117.808594 164.96875 117.488281 171.34375 C 117.488281 171.34375 117.488281 171.34375 117.488281 171.347656 C 117.289062 174.550781 115.96875 178.886719 114.636719 183.476562 C 101.191406 193.066406 82.53125 197.222656 66.683594 186.40625 C 65.613281 184.710938 64.378906 183.027344 63.113281 181.367188 C 62.300781 180.308594 61.46875 179.253906 60.644531 178.214844 C 62.269531 178.21875 63.652344 177.949219 64.769531 177.445312 C 66.160156 176.8125 67.136719 175.804688 67.621094 174.503906 C 68.585938 171.90625 67.613281 168.242188 64.523438 164.054688 C 61.429688 159.867188 56.191406 155.144531 48.496094 150.425781 C 48.496094 150.425781 48.496094 150.425781 48.496094 150.421875 C 42.84375 146.90625 39.683594 142.59375 38.203125 137.914062 C 36.71875 133.234375 36.925781 128.171875 38.070312 123.171875 C 40.261719 113.582031 45.886719 104.25 49.476562 98.394531 C 50.441406 97.683594 49.820312 99.714844 45.839844 107.105469 C 42.273438 113.859375 35.609375 129.449219 44.734375 141.621094 C 44.980469 132.960938 47.046875 124.128906 50.519531 115.867188 C 55.578125 104.402344 66.15625 84.519531 66.996094 68.675781 C 67.429688 68.992188 68.917969 69.996094 69.578125 70.371094 C 69.582031 70.375 69.582031 70.375 69.585938 70.375 C 71.523438 71.519531 72.984375 73.1875 74.871094 74.707031 C 76.761719 76.226562 79.125 77.539062 82.695312 77.746094 C 83.039062 77.765625 83.371094 77.773438 83.699219 77.773438 C 87.378906 77.773438 90.25 76.574219 92.640625 75.207031 C 95.238281 73.722656 97.3125 72.078125 99.28125 71.4375 C 99.28125 71.433594 99.285156 71.433594 99.289062 71.433594 C 103.445312 70.136719 106.746094 67.835938 108.628906 65.15625 C 111.859375 77.886719 119.367188 96.273438 124.195312 105.246094 C 126.761719 110.003906 131.867188 120.121094 134.074219 132.308594 C 135.46875 132.265625 137.011719 132.46875 138.65625 132.890625 C 144.425781 117.9375 133.769531 101.835938 128.894531 97.351562 C 126.925781 95.441406 126.832031 94.585938 127.808594 94.625 C 133.09375 99.300781 140.035156 108.703125 142.558594 119.320312 C 143.710938 124.160156 143.957031 129.25 142.722656 134.273438 C 143.324219 134.523438 143.941406 134.796875 144.5625 135.089844 C 153.820312 139.597656 157.242188 143.515625 155.597656 148.867188 Z M 155.597656 148.867188 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 108.628906 43.507812 C 108.648438 46.03125 108.210938 48.175781 107.253906 50.371094 C 106.710938 51.621094 106.082031 52.671875 105.332031 53.578125 C 105.074219 53.457031 104.808594 53.339844 104.535156 53.226562 C 103.582031 52.820312 102.738281 52.484375 101.984375 52.199219 C 101.230469 51.914062 100.640625 51.71875 100.03125 51.511719 C 100.472656 50.976562 101.339844 50.351562 101.664062 49.5625 C 102.152344 48.375 102.394531 47.214844 102.4375 45.832031 C 102.4375 45.777344 102.457031 45.730469 102.457031 45.664062 C 102.484375 44.339844 102.308594 43.207031 101.921875 42.046875 C 101.515625 40.832031 101 39.957031 100.253906 39.226562 C 99.507812 38.5 98.761719 38.171875 97.867188 38.140625 C 97.824219 38.136719 97.785156 38.136719 97.742188 38.136719 C 96.902344 38.140625 96.171875 38.429688 95.417969 39.058594 C 94.625 39.722656 94.039062 40.570312 93.546875 41.75 C 93.0625 42.929688 92.820312 44.101562 92.773438 45.492188 C 92.765625 45.546875 92.765625 45.59375 92.765625 45.648438 C 92.75 46.414062 92.796875 47.113281 92.914062 47.792969 C 91.195312 46.933594 88.996094 46.308594 87.476562 45.949219 C 87.386719 45.289062 87.335938 44.613281 87.324219 43.902344 L 87.324219 43.710938 C 87.296875 41.195312 87.707031 39.039062 88.675781 36.847656 C 89.644531 34.65625 90.839844 33.078125 92.523438 31.796875 C 94.210938 30.515625 95.871094 29.929688 97.832031 29.910156 L 97.925781 29.910156 C 99.84375 29.910156 101.488281 30.476562 103.175781 31.699219 C 104.886719 32.941406 106.121094 34.496094 107.117188 36.671875 C 108.09375 38.792969 108.5625 40.863281 108.609375 43.324219 C 108.609375 43.386719 108.609375 43.441406 108.628906 43.507812 Z M 108.628906 43.507812 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 79.609375 46.019531 C 79.355469 46.09375 79.109375 46.171875 78.867188 46.253906 C 77.492188 46.726562 76.402344 47.25 75.347656 47.949219 C 75.449219 47.21875 75.464844 46.480469 75.382812 45.652344 C 75.375 45.605469 75.375 45.570312 75.375 45.523438 C 75.265625 44.425781 75.035156 43.507812 74.644531 42.578125 C 74.234375 41.609375 73.769531 40.925781 73.164062 40.402344 C 72.613281 39.925781 72.09375 39.707031 71.519531 39.710938 C 71.460938 39.710938 71.402344 39.714844 71.339844 39.71875 C 70.695312 39.773438 70.160156 40.089844 69.652344 40.707031 C 69.148438 41.320312 68.816406 42.085938 68.574219 43.101562 C 68.335938 44.113281 68.273438 45.109375 68.375 46.25 C 68.375 46.296875 68.382812 46.335938 68.382812 46.378906 C 68.492188 47.488281 68.714844 48.40625 69.109375 49.335938 C 69.515625 50.292969 69.984375 50.976562 70.59375 51.5 C 70.695312 51.589844 70.796875 51.667969 70.894531 51.738281 C 70.265625 52.226562 69.84375 52.574219 69.324219 52.953125 C 68.988281 53.195312 68.59375 53.484375 68.136719 53.824219 C 67.132812 52.886719 66.351562 51.703125 65.664062 50.148438 C 64.855469 48.308594 64.421875 46.464844 64.292969 44.289062 L 64.292969 44.273438 C 64.171875 42.097656 64.386719 40.226562 64.984375 38.292969 C 65.582031 36.359375 66.382812 34.957031 67.546875 33.808594 C 68.703125 32.65625 69.875 32.074219 71.285156 32.003906 C 71.394531 31.996094 71.503906 31.996094 71.609375 31.996094 C 72.886719 31.996094 74.027344 32.421875 75.207031 33.363281 C 76.488281 34.386719 77.453125 35.695312 78.265625 37.539062 C 79.078125 39.378906 79.511719 41.222656 79.628906 43.398438 L 79.628906 43.414062 C 79.6875 44.328125 79.679688 45.1875 79.609375 46.019531 Z M 79.609375 46.019531 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(12.54902%,12.54902%,12.54902%);fill-opacity:1;" d="M 86.023438 51.222656 C 86.183594 51.742188 87.019531 51.65625 87.503906 51.90625 C 87.925781 52.121094 88.269531 52.601562 88.746094 52.617188 C 89.199219 52.628906 89.910156 52.457031 89.96875 52.007812 C 90.046875 51.410156 89.175781 51.03125 88.613281 50.8125 C 87.894531 50.53125 86.96875 50.386719 86.292969 50.765625 C 86.136719 50.851562 85.96875 51.054688 86.023438 51.222656 Z M 86.023438 51.222656 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(12.54902%,12.54902%,12.54902%);fill-opacity:1;" d="M 81.082031 51.222656 C 80.917969 51.742188 80.082031 51.65625 79.597656 51.90625 C 79.175781 52.121094 78.832031 52.601562 78.355469 52.617188 C 77.902344 52.628906 77.195312 52.457031 77.132812 52.007812 C 77.054688 51.410156 77.925781 51.03125 78.488281 50.8125 C 79.207031 50.53125 80.132812 50.386719 80.808594 50.765625 C 80.964844 50.851562 81.132812 51.054688 81.082031 51.222656 Z M 81.082031 51.222656 "/>
</g>
</svg>
Credits :
ellipses.svg : https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_ellipse2
tux-mono.svg : https://upload.wikimedia.org/wikipedia/commons/3/3a/Tux_Mono.svg
Demo
When you click on an ellipse inside one of the svg image, a callback is called inside the component holding the image and an event is broadcasted with the component unique id and the clicked object name.
Demo on Plunker

How to draw an arrowhead line with svg in react native

Original question:
Like in this picture but with a full triangle. And i need to be able to set the line x1,y1,x2,y2. Thanks!
this image (can't post it because I ain't got enogh reputation)
EDIT:
Im using "react-native-svg" here's what I have: a plain line :(
<Svg
height="1000"
width="1000"
>
<Line
x1={this.state.circle1.x}
y1={this.state.circle1.y}
x2={this.state.circle2.x}
y2={this.state.circle2.y}
stroke="#1abc9c"
strokeWidth="10"
/>
</Svg>

OK so I figure it out. This is probably a really bad implementation but it works. If someone can improve this answer please do:
<Svg
height="1000"
width="1000"
>
<G
rotation={(Math.atan2(this.state.point2.y - this.state.point1.y, this.state.point2.x - this.state.point1.x) * 180 / Math.PI)+45}
origin={`${this.state.point1.x}, ${this.state.point1.y}`}
>
<Path d={`M ${this.state.point1.x+8} ${this.state.point1.y+8} L ${this.state.point1.x-10} ${this.state.point1.y+10} L ${this.state.point1.x-8} ${this.state.point1.y-8} z`} fill="#1abc9c" stroke="#1abc9c" />
</G>
<G
rotation={(Math.atan2(this.state.point2.y - this.state.point1.y, this.state.point2.x - this.state.point1.x) * 180 / Math.PI)-135}
origin={`${this.state.point2.x}, ${this.state.point2.y}`}
>
<Path d={`M ${this.state.point2.x+8} ${this.state.point2.y+8} L ${this.state.point2.x-10} ${this.state.point2.y+10} L ${this.state.point2.x-8} ${this.state.point2.y-8} z`} fill="#1abc9c" stroke="#1abc9c" />
</G>
<Line
x1={this.state.point1.x}
y1={this.state.point1.y}
x2={this.state.point2.x}
y2={this.state.point2.y}
stroke="#1abc9c"
strokeWidth="10"
/>
</Svg>

How do I combine a bunch of xaml-based vector image files into a single dictionary?

Is there a facility for automatically converting and combining several xaml-based objects into a single ResourceDictionary in VS, Blend or even third-party app. Here's a vector image file I would like turned into a resource:
<Canvas Width="94.936523" Height="177.207031" Name="AmericanImage">
<Path Fill="#ff000000" Data="F1 M 67.072266,6.236816 C 67.069336,6.233398 68.373047,2.524414 71.210938,2.522949 C 71.210938,2.521484 75.245117,2.520996 75.248047,2.520996 C 75.248047,2.521484 79.283203,2.521484 79.284180,2.523926 C 82.116211,2.525391 83.424805,6.233887 83.422852,6.238281 C 83.425781,6.269043 84.953125,42.543457 84.953125,42.543457 L 65.763672,42.540527 C 65.763672,42.540527 67.072266,6.241699 67.072266,6.236816 Z"/>
</Canvas>
It would be nice to right-click on the file and select something like "Add to dictionary..." and it would automatically add a Key and insert it into the data dictionary either inlined or linked to a file. Is there anything like this? It's hard to believe that ResourceDictionaries have to be built manually.

There are few possible ways:
1) Use of data template
You are packing your image in DataTemplate and then use like this:
<DataTemplate x:Key="TheIcon">
<Canvas Width="94.936523" Height="177.207031" Name="AmericanImage">
<Path Fill="#ff000000" Data="F1 M 67.072266,6.236816 C 67.069336,6.233398 68.373047,2.524414 71.210938,2.522949 C 71.210938,2.521484 75.245117,2.520996 75.248047,2.520996 C 75.248047,2.521484 79.283203,2.521484 79.284180,2.523926 C 82.116211,2.525391 83.424805,6.233887 83.422852,6.238281 C 83.425781,6.269043 84.953125,42.543457 84.953125,42.543457 L 65.763672,42.540527 C 65.763672,42.540527 67.072266,6.241699 67.072266,6.236816 Z"/>
</Canvas>
</DataTemplate>
And then use like this
<ContentControl ContentTemplate="{StaticResource TheIcon}"/>
2)Almost same approach, but you save in dictionary only Geometry
<ResourceDictionary>
<Geometry x:Key="Geometry">
F1 M 67.072266,6.236816 C 67.069336,6.233398 68.373047,2.524414 71.210938,2.522949 C 71.210938,2.521484 75.245117,2.520996 75.248047,2.520996 C 75.248047,2.521484 79.283203,2.521484 79.284180,2.523926 C 82.116211,2.525391 83.424805,6.233887 83.422852,6.238281 C 83.425781,6.269043 84.953125,42.543457 84.953125,42.543457 L 65.763672,42.540527 C 65.763672,42.540527 67.072266,6.241699 67.072266,6.236816 Z
</Geometry>
</ResourceDictionary>
and usage:
<Canvas Width="94.936523" Height="177.207031" Name="AmericanImage">
<Path Data="{StaticResource Geometry}"/>
</Canvas>
also you can pack solution #2 into custom control.

Move auto-generated Custom XAML Paths to Top left?

I'm not sure the best way to do this... I've created some 'Icons' using tools suck as Inkscape and then saved them as XAML files. For an example find the code at the end of the post.
The problem is, if I place these items in my application they don't appear at the top left of the canvas, and I can't seem to get Inkscape to save it there (when it does eventually save correctly).
Is there an easy way I can force all my custom xaml canvases/paths to start at the top left corner without having to change all the co-ordinates as they can be quite complicated & confusing...
<?xml version="1.0" encoding="UTF-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Name="svg2"
Width="744.09448819"
Height="1052.3622047">
<Canvas.Resources/>
<Canvas Name="layer1">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="path2527"
Fill="#000000"
Data="M 124.57143 280.5848
C 11.688854 257.94335 13.010144 92.855956 126.2267 73.767996
C 136.54132 72.028986 139.57845 55.076466 129.57538 55.076466
C 124.50146 55.076466 124.50146 55.076466 124.78645 44.826466
C 125.07143 34.576466 125.07143 34.576466 143.82143 34.304396
C 162.57143 34.032336 162.57143 34.032336 162.57143 44.554406
C 162.57143 55.076466 162.57143 55.076466 158.07143 55.076466
C 149.91303 55.076466 151.22222 72.552346 159.45035 73.483256
C 172.00506 74.903666 188.51464 81.047016 199.44208 88.364526
C 206.81274 93.300246 206.81274 93.300246 217.19163 82.956666
C 227.57053 72.613096 227.57053 72.613096 237.57098 82.576016
C 249.65906 94.618746 249.65278 92.540446 237.63732 104.51083
C 227.70321 114.40766 227.70321 114.40766 230.73475 118.81385
C 282.21093 193.63191 213.44867 298.41137 124.57143 280.5848 z
M 165.13275 259.10241 C 211.76596 247.42014 241.46874 194.32531 225.28586 151.57647
C 197.66068 78.601586 100.64894 72.395856 67.053854 141.45456
C 36.048994 205.18873 95.530924 276.53864 165.13275 259.10241 z"/>
</Canvas>
</Canvas>
EDIT
XAML from my Application
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Black">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Text Content -->
<Viewbox Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Stretch="Fill">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Stretch" Text="" Foreground="{Binding Path=ForegroundColour, UpdateSourceTrigger=PropertyChanged}" FontWeight="UltraBlack">
<TextBlock.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="LightGray" GlowSize="1"/>
</TextBlock.BitmapEffect>
</TextBlock>
</Viewbox>
<!-- Clock Button -->
<StackPanel x:Name="clockCanvas" Grid.Column="0" Grid.Row="0">
<Canvas>
<Path Fill="White" Data="M 80.585224 169.88705 C 56.848634 164.45281 37.130464 149.09974 26.612084 127.86218 C 20.776944 116.08051 19.042194 109.26026 18.411614 95.621693 C 17.742034 81.139423 20.281694 69.295703 26.900484 56.033923 C 30.763404 48.293953 33.052344 45.284343 41.563214 36.754743 C 50.357724 27.940853 52.863904 26.058063 61.145654 22.043263 C 73.472574 16.067443 80.302404 14.275203 93.142854 13.646783 C 132.17775 11.736373 165.41602 36.874653 174.2177 74.964123 C 176.01638 82.747923 176.30366 86.330733 175.87409 95.621693 C 175.2441 109.24748 173.51166 116.06778 167.6846 127.86218 C 160.22115 142.96872 147.81411 155.37079 132.64285 162.88988 C 127.69285 165.34317 120.94285 168.08165 117.64285 168.97539 C 109.48593 171.18453 88.506924 171.70064 80.585224 169.88705 z M 114.33298 158.38025 C 138.19458 152.1303 157.00356 133.27793 163.19039 109.4101 C 166.24789 97.614743 165.60682 81.400023 161.63261 70.008973 C 154.86102 50.599923 138.9022 34.730683 118.97777 27.593553 C 112.42367 25.245813 110.15251 24.960583 97.642854 24.914143 C 85.595274 24.869433 82.666644 25.185343 76.642854 27.179453 C 56.153434 33.962263 38.951554 51.025423 32.100934 71.362183 C 28.991204 80.593743 28.279904 97.872723 30.607314 107.64549 C 36.460274 132.22201 55.481524 151.84134 79.816004 158.40146 C 89.349244 160.97144 104.47558 160.96214 114.33298 158.38025 z M 74.257654 127.73004 C 73.060584 126.89157 72.142854 125.16053 72.142854 123.74105 C 72.142854 122.3618 76.475084 113.43931 81.770024 103.9133 L 91.397194 86.593283 L 116.42452 73.227733 C 130.18955 65.876683 142.25911 59.721423 143.24577 59.549393 C 148.78735 58.583143 151.36312 65.507203 146.77616 69.039603 C 145.47447 70.042023 134.28893 76.221633 121.91939 82.772073 L 99.429314 94.681963 L 90.655084 110.50835 C 85.829254 119.21286 81.377304 126.72105 80.761854 127.19322 C 78.425624 128.98557 76.300574 129.16095 74.257654 127.73004 z"/>
</Canvas>
<Label Content="{Binding Path=Clock.Value, UpdateSourceTrigger=PropertyChanged}" Foreground="{Binding Path=ClockColor, UpdateSourceTrigger=PropertyChanged}" FontSize="16" HorizontalAlignment="Center" />
</StackPanel>
<!-- Stopwatch Button -->
<StackPanel x:Name="stopwatchCanvas" Grid.Column="0" Grid.Row="1">
<Canvas>
<Path Fill="White" Data="M 456.57143 413.78623 C 424.76159 407.88318 401.40597 387.81419 391.66856 358.01656 C 384.49111 336.05271 385.90264 312.2971 395.58282 292.14081 C 406.57688 269.24875 424.36364 255.18414 450.55979 248.66861 C 459.23591 246.51068 462.57143 243.62752 462.57143 238.28601 C 462.57143 234.57209 461.26377 233.0759 457.57143 232.56515 C 455.22815 232.24101 455.05312 231.80606 454.77933 225.62672 C 454.37878 216.58659 454.93673 216.21933 469.07143 216.21933 C 483.20612 216.21933 483.76408 216.58659 483.36353 225.62672 C 483.08974 231.80606 482.91471 232.24101 480.57143 232.56515 C 476.87909 233.0759 475.57143 234.57209 475.57143 238.28601 C 475.57143 243.64517 478.90235 246.50952 487.67076 248.69052 C 502.09593 252.27856 512.33883 257.28334 522.40939 265.66414 L 528.25588 270.52964 L 535.04617 266.59033 C 538.78083 264.42372 541.98531 262.79988 542.16724 262.9818 C 542.34916 263.16373 542.9491 270.82985 543.50044 280.01764 C 544.05177 289.20542 544.92955 297.51996 545.45104 298.49439 C 549.41462 305.9004 551.92828 326.46599 550.47372 339.58755 C 545.74863 382.21245 513.72136 412.69968 472.07143 414.21983 C 466.02143 414.44064 459.04643 414.24553 456.57143 413.78623 z M 484.11133 396.19916 C 509.12004 389.82047 527.09509 372.4139 534.18028 347.71372 C 536.52938 339.52434 536.76107 337.34058 536.28612 327.86563 C 535.41996 310.58629 536.13953 311.65678 516.46559 298.37892 L 499.40597 286.86545 L 506.06393 283.04239 L 512.7219 279.21933 L 509.39667 276.41622 C 504.79657 272.53843 493.35075 267.07396 485.57143 265.04156 C 476.97393 262.79541 461.16894 262.79541 452.57143 265.04156 C 416.00978 274.59352 393.80739 312.70351 404.104 348.23497 C 412.69338 377.87512 438.26527 397.46778 468.61133 397.65916 C 474.07293 397.69361 480.69917 397.06946 484.11133 396.19916 z"/>
</Canvas>
<Label Content="{Binding Path=Stopwatch.Value, UpdateSourceTrigger=PropertyChanged}" Foreground="{Binding Path=StopwatchColor, UpdateSourceTrigger=PropertyChanged}" FontSize="16" HorizontalAlignment="Center" />
</StackPanel>
<!-- Countdown Button -->
<StackPanel x:Name="countdownCanvas" Grid.Column="0" Grid.Row="2">
<Canvas>
<Path Fill="White" Data="M 287 376.64338 C 261.09905 371.83686 240.66626 357.53966 228.20794 335.50549 C 220.52484 321.91692 216.26208 300.74934 217.94551 284.54537 C 218.83809 275.95377 221.36371 264.63392 223.12038 261.35154 C 223.64188 260.37711 224.51966 252.06257 225.07099 242.87479 C 225.62232 233.687 226.22227 226.02088 226.40419 225.83895 C 226.58612 225.65703 229.7906 227.28087 233.52525 229.44748 L 240.31554 233.38679 L 246.16204 228.52129 C 256.23259 220.14049 266.47549 215.13571 280.90066 211.54767 C 289.66907 209.36667 293 206.50232 293 201.14316 C 293 197.42924 291.69234 195.93305 288 195.4223 C 285.65671 195.09816 285.48168 194.66321 285.20789 188.48387 C 284.80735 179.44374 285.3653 179.07648 299.5 179.07648 C 313.63469 179.07648 314.19264 179.44374 313.7921 188.48387 C 313.51831 194.66321 313.34328 195.09816 311 195.4223 C 307.30766 195.93305 306 197.42924 306 201.14316 C 306 206.48467 309.33552 209.36783 318.01164 211.52576 C 344.20779 218.04129 361.99455 232.1059 372.98861 254.99796 C 379.97773 269.55087 382.72366 286.01418 380.90229 302.4447 C 376.1772 345.0696 344.14993 375.55683 302.5 377.07698 C 296.45 377.29779 289.475 377.10268 287 376.64338 z M 314.5399 359.05631 C 339.3313 352.73304 357.44235 335.33418 364.46743 311.09212 C 374.76404 275.56066 352.56165 237.45067 316 227.89871 C 307.40249 225.65256 291.5975 225.65256 283 227.89871 C 275.22067 229.93111 263.77485 235.39558 259.17476 239.27337 L 255.84952 242.07648 L 262.50749 245.89954 L 269.16546 249.7226 L 252.10584 261.23607 C 232.4319 274.51393 233.15146 273.44344 232.28531 290.72278 C 231.81036 300.19773 232.04205 302.38149 234.39115 310.57087 C 243.02502 340.67005 268.46417 360.32348 299.0399 360.51631 C 304.5015 360.55076 311.12774 359.92661 314.5399 359.05631 z"/>
</Canvas>
<Label Content="{Binding Path=Countdown.Value, UpdateSourceTrigger=PropertyChanged}" Foreground="{Binding Path=CountdownColor, UpdateSourceTrigger=PropertyChanged}" FontSize="16" HorizontalAlignment="Center" />
</StackPanel>
<Canvas x:Name="helpCanvas" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3" Background="Black" Visibility="Collapsed">
</Canvas>
</Grid>
</Page>
Change the Text property of the TextBox within the ViewBox to see what it looks like with content.

Apply a TranslateTransform using the upper left point to move the content to the upper left corner of the canvas.

If you remove Width and Height from the canvas that seems to shift the content. (Would that be enough or does that entail other problems?)
You can also drop all the wrapping canvases as the Path can be on its own here.

Resources