Streaming live at 10am (PST)

SVG import to CMS, broken?

I’m following along with the ‘Create a custom portfolio’ tutorial. In one part of this tutorial you are to setup a CMS collection of clients and logos. The logos are SVG type and when I go to import the CSV file with links it instead shows a JSON file in the preview panel. Result is the same if I try to “Replace” the image and manually choose the logo file from the folder on my desktop. Any idea what’s going on here?

Thanks

Could you maybe share a link to your SVG file? I will try to test it in a different environment.

Hi @danoszz, here are links to the files (the forum won’t allow SVG uploads). Thanks for offering to take a look at this.

image https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88b22defcc1750713e7_5a7a3fc15121de0001e47c05_logo%202.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88b22defc4a1a0713e6_5a7a3fc15121de0001e47c43_logo%205.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88a22defc60f80713e5_5a7a3fc15121de0001e47c00_logo%204.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88a30ed95cbd79854e0_5a7a3fc15121de0001e47c3c_logo%207.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88af1bd8a3d65d36ac9_5a7a3fc15121de0001e47bfa_logo%203.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88af1bd8ae062d36ac8_5a7a3fc15121de0001e47bff_logo%201.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88a22defca84d0713e4_5a7a3fc15121de0001e47bef_logo%2010.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88af1bd8a4b98d36ac7_5a7a3fc15121de0001e47bf4_logo%209.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88a30ed9558539854df_5a7a3fc15121de0001e47bfc_logo%208.svg
https://uploads-ssl.webflow.com/5a846a45ef2b990001bd34fb/5aa7c88a83789dcb963cc2e2_5a7a3fc15121de0001e47bf0_logo%206.svg

They seem to be working in my environment when I downloaded them from your links. What about you clean the SVG’s with a tools such as SVGOMG. Will they work afterwards?

I tested with 2 logos (CBS, Adobe) and after running the SVGOMG they did appear in the collection preview panel:

image

However, those 2 logos are now missing from my collection list inside the editor:

image

Here is a link to the project if it helps?: https://preview.webflow.com/preview/wu-tut-portfolio-site?utm_medium=preview_link&utm_source=designer&utm_content=wu-tut-portfolio-site&preview=caa7a152c5e2d03042c5b5595a7d4d60&mode=preview

Good to hear! Thanks for sharing your project link. It seems that the logo’s are not showing due to the layout of the collection list + unstyled width of the collection items.

If you change it to a 5-column layout they will appear:

Hope this solves your problem.

Thanks! That’s interesting because those 2 icons were visible when I had the set to the PNG versions. Maybe it’s because the PNGs have a set resolution/dimensions… Anyhow, it works - thank you for the help!

1 Like