aor
April 1, 2020, 9:24am
1
The following app is to demonstrate the issue of not being able to load SVG file using image picker component
My app’s URL: Bugs and Issues
I have use this POST to pluck a SVG file that works.
Using the above example - I created another SVG file which i uploaded here - using the image picker component uploaded the same SVG on my laptop - result - no image displayed but if copy shareable link to the IMAGE field in my Sheet - then it works.
Unable to understand why?
Grateful if anyone can throw some light on this one.
I don’t know much about SVG, but it’s my understanding that it’s not exactly an image file. It’s XML markup text that browsers interpret to generate an image by drawing all the points, lines, and colors based on the text. If you open up an SVG in notepad it looks like this. It’s not a binary file like an image.
<svg width="75" height="32" viewBox="0 0 75 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.25351 28.846C1.25351 28.3203 1.42944 27.8604 1.78131 27.4661C2.13317 27.0938 2.573 26.9076 3.10079 26.9076C3.49664 26.9076 4.14539 27.1485 5.04704 27.6304C5.94869 28.1123 6.82835 28.3532 7.68601 28.3532C9.79719 28.3532 10.8528 27.3785 10.8528 25.4292V23.5565C9.86317 24.1478 8.65364 24.4435 7.22419 24.4435C5.20098 24.4435 3.52963 23.8084 2.21014 22.538C0.736714 21.1143 0 19.1431 0 16.6242C0 14.2806 0.681735 12.3641 2.0452 10.8747C3.3427 9.51677 5.05803 8.83778 7.1912 8.83778C8.46671 8.83778 9.7642 9.22108 11.0837 9.98768C11.5015 9.22108 12.1503 8.83778 13.0299 8.83778C13.6457 8.83778 14.1625 9.04586 14.5803 9.46201C14.9982 9.87817 15.2071 10.371 15.2071 10.9405V24.6735C15.2071 27.2361 14.4704 29.1417 12.9969 30.3901C11.7214 31.4634 9.97312 32 7.75199 32C6.23458 32 4.86011 31.77 3.62859 31.3101C2.04521 30.7406 1.25351 29.9192 1.25351 28.846ZM7.719 20.8624C8.86255 20.8624 9.90715 20.5448 10.8528 19.9097V13.7002C9.79719 12.9336 8.78558 12.5503 7.81796 12.5503C6.80635 12.5503 6.01466 12.8679 5.44288 13.5031C4.76115 14.3135 4.42028 15.3758 4.42028 16.6899C4.42028 18.1136 4.75015 19.1869 5.4099 19.9097C6.00367 20.5448 6.77337 20.8624 7.719 20.8624Z" fill="black" fill-opacity="0.9"/>
<path d="M18.8506 22.4066V3.64682C18.8506 3.05544 19.0595 2.56263 19.4774 2.16838C19.9172 1.75223 20.434 1.54415 21.0278 1.54415C21.6435 1.54415 22.1603 1.75223 22.5782 2.16838C22.996 2.56263 23.2049 3.05544 23.2049 3.64682V22.4066C23.2049 22.976 22.985 23.4689 22.5452 23.885C22.1274 24.3012 21.6215 24.5092 21.0278 24.5092C20.434 24.5092 19.9172 24.3012 19.4774 23.885C19.0595 23.4689 18.8506 22.976 18.8506 22.4066Z" fill="black" fill-opacity="0.9"/>
<path d="M26.8242 10.9405C26.8242 10.371 27.0332 9.87817 27.451 9.46201C27.8688 9.04586 28.3856 8.83778 29.0014 8.83778C29.6172 8.83778 30.134 9.04586 30.5518 9.46201C30.9696 9.87817 31.1786 10.371 31.1786 10.9405V22.4066C31.1786 22.976 30.9586 23.4689 30.5188 23.885C30.079 24.3012 29.5732 24.5092 29.0014 24.5092C28.3856 24.5092 27.8688 24.3012 27.451 23.885C27.0332 23.4689 26.8242 22.976 26.8242 22.4066V10.9405ZM30.7497 4.27105C30.2659 4.75291 29.6831 4.99384 29.0014 4.99384C28.3197 4.99384 27.7259 4.75291 27.2201 4.27105C26.7363 3.78919 26.4944 3.19781 26.4944 2.49692C26.4944 1.79603 26.7363 1.20466 27.2201 0.722793C27.7259 0.240931 28.3197 0 29.0014 0C29.6831 0 30.2659 0.240931 30.7497 0.722793C31.2555 1.20466 31.5084 1.79603 31.5084 2.49692C31.5084 3.19781 31.2555 3.78919 30.7497 4.27105Z" fill="black" fill-opacity="0.9"/>
<path d="M43.2096 20.5667H44.1992V12.7803C43.5834 12.627 42.9127 12.5503 42.187 12.5503C40.8895 12.5503 39.8779 13.0322 39.1522 13.9959C38.6244 14.7187 38.3605 15.6167 38.3605 16.6899C38.3605 17.9165 38.7563 18.8693 39.548 19.5483C40.4057 20.2272 41.6262 20.5667 43.2096 20.5667ZM46.0795 24.1807H42.7478C39.9988 24.1807 37.8327 23.5236 36.2493 22.2094C34.6879 20.8953 33.9072 19.0773 33.9072 16.7556C33.9072 14.653 34.457 12.9008 35.5566 11.499C37.03 9.70294 39.1522 8.80493 41.9231 8.80493C42.7148 8.80493 43.4735 8.90349 44.1992 9.10062V3.64682C44.1992 3.05544 44.4081 2.55168 44.826 2.13553C45.2438 1.71937 45.7606 1.51129 46.3764 1.51129C46.9921 1.51129 47.5089 1.71937 47.9268 2.13553C48.3446 2.55168 48.5535 3.05544 48.5535 3.64682V21.848C48.5535 22.5927 48.3116 23.1732 47.8278 23.5893C47.366 23.9836 46.7832 24.1807 46.0795 24.1807Z" fill="black" fill-opacity="0.9"/>
<path d="M64.0204 20.0411C64.4822 20.0411 64.8671 20.2163 65.1749 20.5667C65.4828 20.8953 65.6367 21.3005 65.6367 21.7823C65.6367 22.6146 65.01 23.2827 63.7565 23.7864C62.5909 24.2683 61.1615 24.5092 59.4682 24.5092C56.9171 24.5092 54.9269 23.7755 53.4975 22.308C52.024 20.7967 51.2873 18.8583 51.2873 16.4928C51.2873 14.2587 52.0021 12.4079 53.4315 10.9405C54.8389 9.53867 56.6972 8.83778 59.0063 8.83778C61.2714 8.83778 63.0638 9.49487 64.3832 10.809C65.6368 12.0794 66.2635 13.6564 66.2635 15.54C66.2635 16.3066 66.0766 16.909 65.7027 17.347C65.3289 17.7632 64.8011 17.9713 64.1193 17.9713H55.8725C56.2684 20.0301 57.5659 21.0595 59.765 21.0595C60.6447 21.0595 61.5024 20.8953 62.338 20.5667C63.1957 20.2163 63.7565 20.0411 64.0204 20.0411ZM55.8396 15.1129H62.0411C61.9752 14.3025 61.6673 13.6235 61.1175 13.076C60.5897 12.5284 59.897 12.2546 59.0393 12.2546C57.236 12.2546 56.1694 13.2074 55.8396 15.1129Z" fill="black" fill-opacity="0.9"/>
<path d="M74.2081 20.041C74.7359 20.5448 74.9998 21.1581 74.9998 21.8809C74.9998 22.6037 74.7359 23.2279 74.2081 23.7536C73.7023 24.2573 73.0866 24.5092 72.3609 24.5092C71.6351 24.5092 71.0194 24.2573 70.5136 23.7536C70.0078 23.2279 69.7549 22.6037 69.7549 21.8809C69.7549 21.1581 70.0078 20.5448 70.5136 20.041C71.0194 19.5373 71.6351 19.2854 72.3609 19.2854C73.0866 19.2854 73.7023 19.5373 74.2081 20.041Z" fill="#26A162"/>
</svg>
aor
April 10, 2020, 11:26am
3
Thanks Jeff. I am aware of SVG formats
1 Like
S_C
July 3, 2020, 1:34pm
4
@aor : I am also unable to use svg files. Have you figured out a solution besides using an alternate format?
Could you not use the file upload component instead of image upload component?
S_C
July 3, 2020, 4:04pm
6
Thanks @Cmstewart42 . Direct file upload works (See image). However, direct file upload is just cumbersome when you have multiple files to upload. Also, I am using a Dropbox to host files.
1 Like
@S_C ,
Are you trying to let the users upload multiple files in a single go?
S_C
July 3, 2020, 9:07pm
8
@Cmstewart42 : No, just multiple images uploaded by me on my dropbox with link in my google sheets
