Issue where size of SVG String throws encoding error

nwsipp commented 3 years ago

This issue revolves around sending an SVG image to the client.

MKR 1010 WifiNINA_generic

Following the SVG example in Webserver simple I have this code


void drawLogo () {
 String out;
  out.reserve(4000);

  out += F("<svg width=\"34\" height=\"25\" viewBox=\"0 0 34 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">");  
  out += F("<path d=\"M8.72676 3.42225C8.78977 3.33633 8.85063 3.25326 8.9092 3.17307H6.62577C5.73029 4.39606 4.6919 5.82384 3.73828 7.1886H5.99208C6.97791 5.80379 7.98179 4.43616 8.72676 3.42225Z\" fill=\"#27B3E0\"/>");
  out += F("<path d=\"M11.1758 3.1731C9.99572 1.52996 8.98574 0.123423 8.90895 4.18698e-05C8.81315 0.20616 7.8547 1.49657 6.62598 3.1731H8.90939H11.1758\" fill=\"#68BCE9\"/>");
  out += F("<path d=\"M9.60159 4.13675C10.3175 5.13491 11.1289 6.26482 11.8286 7.24292H14.09C13.3084 6.14309 12.1803 4.57211 11.1757 3.17297H8.90918C9.1121 3.45509 9.34181 3.77587 9.60159 4.13675\" fill=\"#27B3E0\"/>");
  out += F("<path d=\"M3.91649 23.3067C5.36333 24.2229 7.00637 24.6444 8.64404 24.6444C10.4146 24.6444 12.1751 24.147 13.6756 23.2531H3.83691C3.86388 23.2701 3.88927 23.2897 3.91649 23.3067\" fill=\"#00598E\"/>");
  out += F("<path d=\"M16.8507 20.0382H14.6438C14.3219 20.4369 13.9784 20.7676 13.6566 21.0316C12.2851 22.1571 10.4579 22.8026 8.6435 22.8026C7.28198 22.8026 5.98779 22.4385 4.90098 21.7504C3.84963 21.085 3.09646 20.2129 2.60092 19.2367H0.592773C1.19672 20.825 2.26941 22.2358 3.83643 23.252H13.675C14.9931 22.4678 16.1111 21.3784 16.8507 20.0382\" fill=\"#00649E\"/>");
  out += F("<path d=\"M1.87935 15.2212H0.0254722C-0.0727224 16.5984 0.112259 17.9729 0.593046 19.2373H2.60121C1.9732 18 1.76011 16.593 1.87935 15.2212Z\" fill=\"#007ABD\"/>");
  out += F("<path d=\"M2.63224 12.3664C2.77397 12.0608 2.99771 11.6639 3.278 11.2048H1.15679C1.08406 11.3417 1.01672 11.4745 0.961958 11.592C0.428752 12.7494 0.113475 13.9856 0.0253906 15.2205H1.87917C1.96559 14.2248 2.22625 13.2486 2.63224 12.3664\" fill=\"#008FCA\"/>");
  out += F("<path d=\"M5.99231 7.18944H3.73845C2.65487 8.74183 1.68417 10.2098 1.15723 11.2048H3.2785C3.95323 10.1014 4.96221 8.63628 5.99231 7.18944Z\" fill=\"#00A7D8\"/>");
  out += F("<path d=\"M9.8873 18.675C8.86483 18.675 8.12848 18.5798 7.47419 18.43C7.33778 18.4034 7.2151 18.3067 7.2151 18.1569V17.1752C7.2151 17.0253 7.33778 16.9161 7.47419 16.9161C7.48777 16.9161 7.48777 16.9161 7.50136 16.9161C8.04669 16.9847 9.41017 17.0533 9.91461 17.0533C11.1281 17.0533 11.4961 16.6164 11.4961 15.8265C11.4961 15.2944 11.2371 15.0213 10.3373 14.4891L8.53755 13.4121C7.26958 12.6629 6.92871 11.8717 6.92871 10.9179C6.92871 9.41806 7.80133 8.32711 10.3373 8.32711C11.2371 8.32711 12.4914 8.46296 12.955 8.57219C13.0913 8.6002 13.2004 8.69543 13.2004 8.83128V9.84099C13.2004 9.97684 13.105 10.0861 12.9686 10.0861C12.955 10.0861 12.955 10.0861 12.9414 10.0861C12.0415 10.0034 11.1417 9.95024 10.2555 9.95024C9.24646 9.95024 8.8238 10.3045 8.8238 10.9179C8.8238 11.3675 9.05557 11.6406 9.94192 12.1307L11.5779 13.0438C13.0777 13.8757 13.4732 14.7482 13.4732 15.8265C13.4732 17.2032 12.6141 18.675 9.8873 18.675Z\" fill=\"#00598E\"/>");
  out += F("<path d=\"M16.5043 18.5671H15.1545C15.0045 18.5671 14.8818 18.444 14.8818 18.2942V8.69591C14.8818 8.54613 15.0045 8.43695 15.1545 8.43695H16.5043C16.6542 8.43695 16.7769 8.54613 16.7769 8.69591V18.2942C16.7769 18.444 16.6542 18.5671 16.5043 18.5671Z\" fill=\"#00598E\"/>");
  out += F("<path d=\"M23.727 11.4766C23.727 10.331 23.0452 9.89549 21.6814 9.89549C21.3951 9.89549 20.7134 9.9221 20.4679 9.95011V13.1949C20.6862 13.2075 21.4496 13.2356 21.6814 13.2356C23.154 13.2356 23.727 12.6894 23.727 11.5984V11.4766ZM21.6814 14.7901C21.3272 14.7901 20.782 14.748 20.4679 14.7354V18.294C20.4679 18.4438 20.3591 18.5657 20.209 18.5657H18.8459C18.6956 18.5657 18.5732 18.4438 18.5732 18.294V8.91378C18.5732 8.64069 18.7364 8.54546 19.0091 8.50484C19.7181 8.39561 20.6862 8.32698 21.6814 8.32698C23.7814 8.32698 25.6081 9.06363 25.6081 11.4766V11.5984C25.6081 14.0128 23.7814 14.7901 21.6814 14.7901Z\" fill=\"#00598E\"/>");
  out += F("<path d=\"M32.1179 11.4766C32.1179 10.331 31.4368 9.89549 30.073 9.89549C29.7868 9.89549 29.105 9.9221 28.8595 9.95011V13.1949C29.0777 13.2075 29.8412 13.2356 30.073 13.2356C31.5456 13.2356 32.1179 12.6894 32.1179 11.5984V11.4766ZM30.073 14.7901C29.7188 14.7901 29.1736 14.748 28.8595 14.7354V18.294C28.8595 18.4438 28.7507 18.5657 28.6006 18.5657H27.2375C27.0872 18.5657 26.9648 18.4438 26.9648 18.294V8.91378C26.9648 8.64069 27.128 8.54546 27.4007 8.50484C28.1097 8.39561 29.0777 8.32698 30.073 8.32698C32.173 8.32698 33.9997 9.06363 33.9997 11.4766V11.5984C33.9997 14.0128 32.173 14.7901 30.073 14.7901Z\" fill=\"#00598E\"/>");
  out += F("</svg>\n");
  Serial.println(out);

  server.send(200, F("image/svg+xml"), out);

}

server.on(F("/logo.svg"), drawLogo);

When removing the last line path of the SVG, the logo shows without an issue. otherwise i get this error

This page contains the following errors: error on line 2 at column 3496: Encoding error Below is a rendering of the page up to the first error.

I have swapped the paths around, and added and removed the \n page breaks, the location of the error moves accordingly. That tells me that maybe, the buffer is not completing the transmission before resetting. IE the data does not complete sending after a certain size.

Please advise.

khoih-prog commented 3 years ago

I test on Nano-33-IoT using AdvancedServer example

Everything is OK on the server site, the issue is in your SVG code making the complaint from WebBrower (I'm using Google Chrome)

It's possible you have extra issue with MKR1010. If so, try with WiFNINA library, and please ask for support at WiFiNINA issues as I don't have the MKR1010 to test and also provide support for boards besides Arduino series.

Good Luck

1. Terminal output

Starting AdvancedServer on SAMD_NANO_33_IOT with WiFiNINA using WiFiNINA_Generic Library
Please upgrade the firmware
Connecting to WPA SSID: HueNet1
HTTP server started @ 192.168.2.149
<svg width="34" height="25" viewBox="0 0 34 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.72676 3.42225C8.78977 3.33633 8.85063 3.25326 8.9092 3.17307H6.62577C5.73029 4.39606 4.6919 5.82384 3.73828 7.1886H5.99208C6.97791 5.80379 7.98179 4.43616 8.72676 3.42225Z" fill="#27B3E0"/><path d="M11.1758 3.1731C9.99572 1.52996 8.98574 0.123423 8.90895 4.18698e-05C8.81315 0.20616 7.8547 1.49657 6.62598 3.1731H8.90939H11.1758" fill="#68BCE9"/><path d="M9.60159 4.13675C10.3175 5.13491 11.1289 6.26482 11.8286 7.24292H14.09C13.3084 6.14309 12.1803 4.57211 11.1757 3.17297H8.90918C9.1121 3.45509 9.34181 3.77587 9.60159 4.13675" fill="#27B3E0"/><path d="M3.91649 23.3067C5.36333 24.2229 7.00637 24.6444 8.64404 24.6444C10.4146 24.6444 12.1751 24.147 13.6756 23.2531H3.83691C3.86388 23.2701 3.88927 23.2897 3.91649 23.3067" fill="#00598E"/><path d="M16.8507 20.0382H14.6438C14.3219 20.4369 13.9784 20.7676 13.6566 21.0316C12.2851 22.1571 10.4579 22.8026 8.6435 22.8026C7.28198 22.8026 5.98779 22.4385 4.90098 21.7504C3.84963 21.085 3.09646 20.2129 2.60092 19.2367H0.592773C1.19672 20.825 2.26941 22.2358 3.83643 23.252H13.675C14.9931 22.4678 16.1111 21.3784 16.8507 20.0382" fill="#00649E"/><path d="M1.87935 15.2212H0.0254722C-0.0727224 16.5984 0.112259 17.9729 0.593046 19.2373H2.60121C1.9732 18 1.76011 16.593 1.87935 15.2212Z" fill="#007ABD"/><path d="M2.63224 12.3664C2.77397 12.0608 2.99771 11.6639 3.278 11.2048H1.15679C1.08406 11.3417 1.01672 11.4745 0.961958 11.592C0.428752 12.7494 0.113475 13.9856 0.0253906 15.2205H1.87917C1.96559 14.2248 2.22625 13.2486 2.63224 12.3664" fill="#008FCA"/><path d="M5.99231 7.18944H3.73845C2.65487 8.74183 1.68417 10.2098 1.15723 11.2048H3.2785C3.95323 10.1014 4.96221 8.63628 5.99231 7.18944Z" fill="#00A7D8"/><path d="M9.8873 18.675C8.86483 18.675 8.12848 18.5798 7.47419 18.43C7.33778 18.4034 7.2151 18.3067 7.2151 18.1569V17.1752C7.2151 17.0253 7.33778 16.9161 7.47419 16.9161C7.48777 16.9161 7.48777 16.9161 7.50136 16.9161C8.04669 16.9847 9.41017 17.0533 9.91461 17.0533C11.1281 17.0533 11.4961 16.6164 11.4961 15.8265C11.4961 15.2944 11.2371 15.0213 10.3373 14.4891L8.53755 13.4121C7.26958 12.6629 6.92871 11.8717 6.92871 10.9179C6.92871 9.41806 7.80133 8.32711 10.3373 8.32711C11.2371 8.32711 12.4914 8.46296 12.955 8.57219C13.0913 8.6002 13.2004 8.69543 13.2004 8.83128V9.84099C13.2004 9.97684 13.105 10.0861 12.9686 10.0861C12.955 10.0861 12.955 10.0861 12.9414 10.0861C12.0415 10.0034 11.1417 9.95024 10.2555 9.95024C9.24646 9.95024 8.8238 10.3045 8.8238 10.9179C8.8238 11.3675 9.05557 11.6406 9.94192 12.1307L11.5779 13.0438C13.0777 13.8757 13.4732 14.7482 13.4732 15.8265C13.4732 17.2032 12.6141 18.675 9.8873 18.675Z" fill="#00598E"/><path d="M16.5043 18.5671H15.1545C15.0045 18.5671 14.8818 18.444 14.8818 18.2942V8.69591C14.8818 8.54613 15.0045 8.43695 15.1545 8.43695H16.5043C16.6542 8.43695 16.7769 8.54613 16.7769 8.69591V18.2942C16.7769 18.444 16.6542 18.5671 16.5043 18.5671Z" fill="#00598E"/><path d="M23.727 11.4766C23.727 10.331 23.0452 9.89549 21.6814 9.89549C21.3951 9.89549 20.7134 9.9221 20.4679 9.95011V13.1949C20.6862 13.2075 21.4496 13.2356 21.6814 13.2356C23.154 13.2356 23.727 12.6894 23.727 11.5984V11.4766ZM21.6814 14.7901C21.3272 14.7901 20.782 14.748 20.4679 14.7354V18.294C20.4679 18.4438 20.3591 18.5657 20.209 18.5657H18.8459C18.6956 18.5657 18.5732 18.4438 18.5732 18.294V8.91378C18.5732 8.64069 18.7364 8.54546 19.0091 8.50484C19.7181 8.39561 20.6862 8.32698 21.6814 8.32698C23.7814 8.32698 25.6081 9.06363 25.6081 11.4766V11.5984C25.6081 14.0128 23.7814 14.7901 21.6814 14.7901Z" fill="#00598E"/><path d="M32.1179 11.4766C32.1179 10.331 31.4368 9.89549 30.073 9.89549C29.7868 9.89549 29.105 9.9221 28.8595 9.95011V13.1949C29.0777 13.2075 29.8412 13.2356 30.073 13.2356C31.5456 13.2356 32.1179 12.6894 32.1179 11.5984V11.4766ZM30.073 14.7901C29.7188 14.7901 29.1736 14.748 28.8595 14.7354V18.294C28.8595 18.4438 28.7507 18.5657 28.6006 18.5657H27.2375C27.0872 18.5657 26.9648 18.4438 26.9648 18.294V8.91378C26.9648 8.64069 27.128 8.54546 27.4007 8.50484C28.1097 8.39561 29.0777 8.32698 30.073 8.32698C32.173 8.32698 33.9997 9.06363 33.9997 11.4766V11.5984C33.9997 14.0128 32.173 14.7901 30.073 14.7901Z" fill="#00598E"/></svg>

Error message from WebBrowser

Selection_610

The Logo is still OK

Selection_609

khoih-prog commented 3 years ago

Also have a look at MKR1000 Issue

I have tested with library v1.0.4 and this issue is fixed.

I currently am unable to use Transfer-Encoding: chunked, which is needed for HTTP responses larger than 1400 chars. In my handleRoot() function I have: server.setContentLength(CONTENT_LENGTH_UNKNOWN); server.send(200, "text/html", temp); and the response header includes 'Transfer-Encoding: chunked', but the connection never completes. There may be some problem with the format of the last chunk. But I think this will be a topic for a new Issue.

nwsipp commented 3 years ago

Everything is OK on the server site, the issue is in your SVG code making the complaint from WebBrower (I'm using Google Chrome)

I am using google chrome as well. SVG renders properly from file or from desktop in chrome. the Logo itself should have the letters SIPP, if you experiment and take off the last Path element you will not see this error. if you invert the last two elements you will see that the logo renders as "SI P" proving the path code itself is correct and usable within chrome.

khoih-prog commented 3 years ago

The role of the WebServer is to send what you order it to send, and it doesn't know and care about the content.

Please check the Terminal output if any character is missing. So this is possibly an MKR1000 + SVG problem.

Starting AdvancedServer on SAMD_NANO_33_IOT with WiFiNINA using WiFiNINA_Generic Library
Please upgrade the firmware
Connecting to WPA SSID: HueNet1
HTTP server started @ 192.168.2.149
<svg width="34" height="25" viewBox="0 0 34 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.72676 3.42225C8.78977 3.33633 8.85063 3.25326 8.9092 3.17307H6.62577C5.73029 4.39606 4.6919 5.82384 3.73828 7.1886H5.99208C6.97791 5.80379 7.98179 4.43616 8.72676 3.42225Z" fill="#27B3E0"/><path d="M11.1758 3.1731C9.99572 1.52996 8.98574 0.123423 8.90895 4.18698e-05C8.81315 0.20616 7.8547 1.49657 6.62598 3.1731H8.90939H11.1758" fill="#68BCE9"/><path d="M9.60159 4.13675C10.3175 5.13491 11.1289 6.26482 11.8286 7.24292H14.09C13.3084 6.14309 12.1803 4.57211 11.1757 3.17297H8.90918C9.1121 3.45509 9.34181 3.77587 9.60159 4.13675" fill="#27B3E0"/><path d="M3.91649 23.3067C5.36333 24.2229 7.00637 24.6444 8.64404 24.6444C10.4146 24.6444 12.1751 24.147 13.6756 23.2531H3.83691C3.86388 23.2701 3.88927 23.2897 3.91649 23.3067" fill="#00598E"/><path d="M16.8507 20.0382H14.6438C14.3219 20.4369 13.9784 20.7676 13.6566 21.0316C12.2851 22.1571 10.4579 22.8026 8.6435 22.8026C7.28198 22.8026 5.98779 22.4385 4.90098 21.7504C3.84963 21.085 3.09646 20.2129 2.60092 19.2367H0.592773C1.19672 20.825 2.26941 22.2358 3.83643 23.252H13.675C14.9931 22.4678 16.1111 21.3784 16.8507 20.0382" fill="#00649E"/><path d="M1.87935 15.2212H0.0254722C-0.0727224 16.5984 0.112259 17.9729 0.593046 19.2373H2.60121C1.9732 18 1.76011 16.593 1.87935 15.2212Z" fill="#007ABD"/><path d="M2.63224 12.3664C2.77397 12.0608 2.99771 11.6639 3.278 11.2048H1.15679C1.08406 11.3417 1.01672 11.4745 0.961958 11.592C0.428752 12.7494 0.113475 13.9856 0.0253906 15.2205H1.87917C1.96559 14.2248 2.22625 13.2486 2.63224 12.3664" fill="#008FCA"/><path d="M5.99231 7.18944H3.73845C2.65487 8.74183 1.68417 10.2098 1.15723 11.2048H3.2785C3.95323 10.1014 4.96221 8.63628 5.99231 7.18944Z" fill="#00A7D8"/><path d="M9.8873 18.675C8.86483 18.675 8.12848 18.5798 7.47419 18.43C7.33778 18.4034 7.2151 18.3067 7.2151 18.1569V17.1752C7.2151 17.0253 7.33778 16.9161 7.47419 16.9161C7.48777 16.9161 7.48777 16.9161 7.50136 16.9161C8.04669 16.9847 9.41017 17.0533 9.91461 17.0533C11.1281 17.0533 11.4961 16.6164 11.4961 15.8265C11.4961 15.2944 11.2371 15.0213 10.3373 14.4891L8.53755 13.4121C7.26958 12.6629 6.92871 11.8717 6.92871 10.9179C6.92871 9.41806 7.80133 8.32711 10.3373 8.32711C11.2371 8.32711 12.4914 8.46296 12.955 8.57219C13.0913 8.6002 13.2004 8.69543 13.2004 8.83128V9.84099C13.2004 9.97684 13.105 10.0861 12.9686 10.0861C12.955 10.0861 12.955 10.0861 12.9414 10.0861C12.0415 10.0034 11.1417 9.95024 10.2555 9.95024C9.24646 9.95024 8.8238 10.3045 8.8238 10.9179C8.8238 11.3675 9.05557 11.6406 9.94192 12.1307L11.5779 13.0438C13.0777 13.8757 13.4732 14.7482 13.4732 15.8265C13.4732 17.2032 12.6141 18.675 9.8873 18.675Z" fill="#00598E"/><path d="M16.5043 18.5671H15.1545C15.0045 18.5671 14.8818 18.444 14.8818 18.2942V8.69591C14.8818 8.54613 15.0045 8.43695 15.1545 8.43695H16.5043C16.6542 8.43695 16.7769 8.54613 16.7769 8.69591V18.2942C16.7769 18.444 16.6542 18.5671 16.5043 18.5671Z" fill="#00598E"/><path d="M23.727 11.4766C23.727 10.331 23.0452 9.89549 21.6814 9.89549C21.3951 9.89549 20.7134 9.9221 20.4679 9.95011V13.1949C20.6862 13.2075 21.4496 13.2356 21.6814 13.2356C23.154 13.2356 23.727 12.6894 23.727 11.5984V11.4766ZM21.6814 14.7901C21.3272 14.7901 20.782 14.748 20.4679 14.7354V18.294C20.4679 18.4438 20.3591 18.5657 20.209 18.5657H18.8459C18.6956 18.5657 18.5732 18.4438 18.5732 18.294V8.91378C18.5732 8.64069 18.7364 8.54546 19.0091 8.50484C19.7181 8.39561 20.6862 8.32698 21.6814 8.32698C23.7814 8.32698 25.6081 9.06363 25.6081 11.4766V11.5984C25.6081 14.0128 23.7814 14.7901 21.6814 14.7901Z" fill="#00598E"/><path d="M32.1179 11.4766C32.1179 10.331 31.4368 9.89549 30.073 9.89549C29.7868 9.89549 29.105 9.9221 28.8595 9.95011V13.1949C29.0777 13.2075 29.8412 13.2356 30.073 13.2356C31.5456 13.2356 32.1179 12.6894 32.1179 11.5984V11.4766ZM30.073 14.7901C29.7188 14.7901 29.1736 14.748 28.8595 14.7354V18.294C28.8595 18.4438 28.7507 18.5657 28.6006 18.5657H27.2375C27.0872 18.5657 26.9648 18.4438 26.9648 18.294V8.91378C26.9648 8.64069 27.128 8.54546 27.4007 8.50484C28.1097 8.39561 29.0777 8.32698 30.073 8.32698C32.173 8.32698 33.9997 9.06363 33.9997 11.4766V11.5984C33.9997 14.0128 32.173 14.7901 30.073 14.7901Z" fill="#00598E"/></svg>

I certainly don't have time to investigate the issue. Did you try and post the issue to WiFiNINA forum?

nwsipp commented 3 years ago

I certainly don't have time to investigate the issue. Did you try and post the issue to WiFiNINA forum?

I have not as I assumed it is some sort of buffer or stringlength issue based on my troubleshooting the issue. The cap is always consistent with the number of characters added to the string before the final request. I did look inside your code and saw that it was pulling content length from the length property of the string.

I will submit to wifiNiNa forum and see what they say.

khoih-prog / WiFiWebServer