From JavaScript (responseText) to SVG/PNG

[MarcoPoetsch]

Hi all,

is there any possibility to save an attachment and/or display an image either as a PNG or as an SVG which I received from an XML response?

So, what I have is a JavaScript code which returns a Tide Chart either as PNG or as SVG via response text.
As an example, this is what I get: SVG (click run to see chart) 

Cheers,

Marco

[ZacharySutherby]

Hello @MarcoPoetsch, 

Unfortunately JavaScript functions can't access local file systems so we would not be able to save the image locally. 

Typically the workflow would be to place the image in the media folder of the survey and use that as the default background for an image question with the annotate appearance. 

To better understand the workflow if I may ask what is the use case for needing the image to be dynamic? 

Thank you, 

Zach

[MarcoPoetsch]

Hi @ZacharySutherby ,

I use an API to get the current tide values including a a tide chart.
The chart can be returned either as SVG or as PNG. Ideally this chart is stored as an image rather than the code which can't be displayed/downloaded by my staff.

This is the API which I use: https://developer.niwa.co.nz/docs/tide-api/latest/routes/chart.png/get

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="500"><rect width="700" height="700" fill="#ffffff"></rect><g class="axis" transform="translate(50,470)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,6V0.5H630.5V6"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">8th Jul</text></g><g class="tick" opacity="1" transform="translate(90.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">9th Jul</text></g><g class="tick" opacity="1" transform="translate(180.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">10th Jul</text></g><g class="tick" opacity="1" transform="translate(270.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">11th Jul</text></g><g class="tick" opacity="1" transform="translate(360.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12th Jul</text></g><g class="tick" opacity="1" transform="translate(450.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">13th Jul</text></g><g class="tick" opacity="1" transform="translate(540.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">14th Jul</text></g><g class="tick" opacity="1" transform="translate(630.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">15th Jul</text></g></g><g class="axis" transform="translate(50,20)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M-6,450.5H0.5V75.5H-6"></path><g class="tick" opacity="1" transform="translate(0,450.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text></g><g class="tick" opacity="1" transform="translate(0,403.625)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0.5</text></g><g class="tick" opacity="1" transform="translate(0,356.75)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1.0</text></g><g class="tick" opacity="1" transform="translate(0,309.875)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1.5</text></g><g class="tick" opacity="1" transform="translate(0,263)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2.0</text></g><g class="tick" opacity="1" transform="translate(0,216.125)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2.5</text></g><g class="tick" opacity="1" transform="translate(0,169.25)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">3.0</text></g><g class="tick" opacity="1" transform="translate(0,122.375)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">3.5</text></g><g class="tick" opacity="1" transform="translate(0,75.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">4.0</text></g></g><text text-anchor="middle" transform="translate(20, 262.5)rotate(-90)">Tide Height(m)</text><g class="grid" transform="translate(50, 470)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,-375V0.5H630.5V-375"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(90.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(180.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(270.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(360.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(450.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(540.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(630.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g></g><g class="grid" transform="translate(50,20)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M630,450.5H0.5V75.5H630"></path><g class="tick" opacity="1" transform="translate(0,450.5)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,403.625)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,356.75)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,309.875)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,263)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,216.125)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,169.25)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,122.375)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,75.5)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g></g><text x="365" y="20" dy="0.32em" fill="#000" font-weight="bold" text-anchor="middle">(-41.276°,173.244°) July 08 2021</text><text x="365" y="40" dy="0.32em" fill="#000" text-anchor="middle" style="font-size: 0.7em">Tide heights are given in metres from the lowest astronomical tide level (this is not a survey or chart datum).</text><text x="365" y="60" dy="0.32em" fill="#000" text-anchor="middle">LAT = 2.242m below MSL</text><g class="moon" transform="translate(50, 20)" stroke="black" stroke-width="0.5px"><g><circle cx="229.85729166666664" cy="62.5" r="8" fill="black"></circle></g></g><g class="quarters" transform="translate(50, 20)" stroke="black" stroke-width="0.5px"><g><g Class="arc"></g><g Class="arc"></g></g></g><path class="line line-chart" d="M0,267.1875L1.875,291.5625L3.75,312.1875L5.625,328.125L7.5,337.5L9.375,341.25L11.25,337.5L13.125,327.1875L15,311.25L16.875,290.625L18.75,266.25L20.625,239.99999999999997L22.5,213.75L24.375,188.4375L26.25,166.875L28.125,149.0625L30,137.8125L31.875,133.125L33.75,135.9375L35.625,144.375L37.5,160.3125L39.375,180.9375L41.25,206.25L43.12500000000001,233.4375L45,261.5625L46.875,288.75L48.75,314.0625L50.62500000000001,333.75L52.5,348.75L54.375,356.25L56.25,357.1875L58.125,350.625L60,337.5L61.875,317.8125L63.75,292.5L65.625,264.375L67.5,235.3125L69.375,206.25L71.25,179.0625L73.125,155.625L75,136.875L76.875,125.625L78.75,120.9375L80.625,123.75L82.5,134.0625L84.375,150.9375L86.25000000000001,173.4375L88.125,199.6875L90,228.75L91.875,257.8125L93.75,285.9375L95.62499999999999,311.25L97.5,330.9375L99.375,345L101.25000000000001,351.5625L103.125,350.625L105,343.125L106.875,328.125L108.75,307.5L110.62499999999999,281.25L112.5,253.125L114.375,224.0625L116.25,195.9375L118.125,169.6875L120,149.0625L121.875,133.125L123.75,124.6875L125.62500000000001,124.6875L127.5,131.25L129.375,145.3125L131.25,165.9375L133.125,192.1875L135,221.25L136.875,252.1875L138.75,282.1875L140.625,310.3125L142.5,334.6875L144.375,352.5L146.25,363.75L148.125,367.5L150,362.8125L151.875,350.625L153.75,331.875L155.625,306.5625L157.5,277.5L159.375,245.62499999999997L161.25,212.81250000000003L163.12500000000003,181.875L165,154.6875L166.875,133.125L168.75,118.125L170.625,110.625L172.50000000000003,111.5625L174.375,120L176.25,135.9375L178.125,158.4375L180,186.5625L181.87499999999997,217.5L183.75,249.375L185.625,281.25L187.5,309.375L189.375,332.8125L191.24999999999997,350.625L193.125,360.9375L195,362.8125L196.875,356.25L198.75,342.1875L200.625,321.5625L202.50000000000003,296.25L204.375,266.25L206.25,234.37500000000003L208.125,202.5L210,173.4375L211.87500000000003,149.0625L213.75,130.3125L215.625,118.125L217.5,115.3125L219.375,120L221.24999999999997,132.1875L223.125,152.8125L225,179.0625L226.875,209.06250000000003L228.75,241.87499999999997L230.62499999999997,274.6875L232.5,306.5625L234.375,333.75L236.25,355.3125L238.125,369.375L240,375.9375L241.87500000000003,373.125L243.75,362.8125L245.625,344.0625L247.5,318.75L249.375,288.75L251.25000000000003,255L253.125,220.31249999999997L255,186.5625L256.875,156.5625L258.75,131.25L260.625,112.5L262.5,102.1875L264.375,101.25L266.25,107.8125L268.125,122.8125L270,145.3125L271.875,174.375L273.75,206.25L275.625,240.9375L277.5,274.6875L279.375,306.5625L281.25,333.75L283.125,354.375L285,367.5L286.875,372.1875L288.75,367.5L290.625,355.3125L292.5,335.625L294.375,308.4375L296.25,278.4375L298.125,244.6875L300,210.93750000000003L301.875,179.0625L303.75,150.9375L305.625,129.375L307.5,114.375L309.375,107.8125L311.25,110.625L313.125,121.875L315,140.625L316.875,166.875L318.75,197.8125L320.625,231.5625L322.5,266.25L324.37499999999994,300L326.25000000000006,330L328.125,354.375L330,372.1875L331.875,380.625L333.75,380.625L335.625,372.1875L337.5,354.375L339.375,330L341.25,299.0625L343.12499999999994,264.375L345.00000000000006,227.8125L346.875,192.1875L348.75,159.375L350.625,132.1875L352.5,110.625L354.375,97.5L356.25,93.75L358.125,98.4375L360,112.5L361.875,134.0625L363.74999999999994,163.125L365.62500000000006,195.9375L367.5,231.5625L369.375,267.1875L371.25,301.875L373.125,330.9375L375,355.3125L376.875,371.25L378.75,377.8125L380.625,376.875L382.49999999999994,365.625L384.37500000000006,346.875L386.25,320.625L388.125,289.6875L390,255.93750000000003L391.875,220.31249999999997L393.75,186.5625L395.625,155.625L397.5,131.25L399.375,113.4375L401.25,105L403.12499999999994,105L405.00000000000006,113.4375L406.875,131.25L408.75,155.625L410.625,186.5625L412.5,221.25L414.375,256.875L416.25,291.5625L418.125,323.4375L420,350.625L421.87499999999994,370.3125L423.75000000000006,382.5L425.625,384.375L427.5,377.8125L429.375,362.8125L431.25,338.4375L433.125,308.4375L435,273.75L436.875,237.1875L438.75,200.625L440.625,165.9375L442.49999999999994,135.9375L444.37500000000006,112.5L446.25,96.5625L448.125,90L450,92.8125L451.875,105L453.75,124.6875L455.625,152.8125L457.5,185.625L459.375,221.25L461.24999999999994,258.75L463.12500000000006,294.375L465,326.25L466.875,352.5L468.75,371.25L470.625,380.625L472.5,381.5625L474.375,373.125L476.25,356.25L478.125,331.875L480,301.875L481.87499999999994,267.1875L483.75000000000006,231.5625L485.625,195.9375L487.5,164.0625L489.375,136.875L491.25,117.1875L493.125,105L495,102.1875L496.875,108.75L498.75,123.75L500.62499999999994,146.25L502.50000000000006,175.3125L504.375,209.06250000000003L506.25,244.6875L508.125,281.25L510,314.0625L511.875,343.125L513.75,365.625L515.625,379.6875L517.5,385.3125L519.375,380.625L521.25,367.5L523.125,345.9375L525,317.8125L526.875,284.0625L528.75,247.5L530.625,210.93750000000003L532.5,175.3125L534.375,143.4375L536.25,118.125L538.125,99.375L540,90L541.875,90L543.75,99.375L545.625,117.1875L547.5,143.4375L549.375,174.375L551.25,210L553.125,247.5L555,283.125L556.875,316.875L558.75,345L560.625,366.5625L562.5,379.6875L564.375,383.4375L566.25,377.8125L568.125,363.75L570,342.1875L571.875,313.125L573.75,280.3125L575.625,244.6875L577.5,210L579.375,176.25L581.25,147.1875L583.125,124.6875L585,109.6875L586.875,104.0625L588.75,106.875L590.625,118.125L592.5,137.8125L594.375,165L596.25,196.87499999999997L598.125,231.5625L600,267.1875L601.875,300.9375L603.75,330.9375L605.625,355.3125L607.5,372.1875L609.375,380.625L611.25,379.6875L613.125,370.3125L615,352.5L616.875,326.25L618.75,295.3125L620.625,260.625L622.5,224.0625L624.375,188.4375L626.25,155.625L628.125,128.4375L630,107.8125" transform="translate(50,20)" fill="none" stroke="black" stroke-width="2px"></path></svg>

I guess I could use PowerAutomate to upload the PNGs or the SVGs to SharePoint.. But this would be just a workaround.