Adding Vector Art (.SVG) to a Collection?

I was curious if there was any way to add vector art to a collection in the content manager? I have around 10kish vector art images that I would like to add into my database collection, rather than using a .png file, so the images stay crisp. Is there any way to do this?

I was wondering the same but the WIX support told me its not possible ( yet), unfortunately. In my case a png will do, but in your case it would be indeed very useful.

There is a simple workaround to add svg images to a collection. First go to your uploaded images on WIX and copy the URL of the image you want to add to your collection. Then, when adding an image in your collection, instead of clicking on the ‘+ icon’, open the popup menu by clicking on ‘…’ and choose ‘paste image URL’. The svg image is no added to your collection.

No workarounds needed.
You can code your own SVG-Uploader, which will be able to upload all your vectors directly to your wix content manager.

There are even different ways of how and where to store your SVGs.

  1. Storing SVG directly in the media-manager (direct SVG-upload to the media-manager)
  2. Upload SVG directly to own Database (using base64 encoding/decoding).
  3. Upload SVGs extern and safe SVG-Urls inside your database (either on every single cell, or in an object formated datafield.

Surely there are even more ways, of how to do that.

Wix out of the box do not provide this solutions.
You will have to code it by your own (for example using an HTML-Component or an own created → Custom Element).

You can also set the .src of your Vector Images via Velo to be the SVG string that starts with <svg …

That means you can run something like:

//Where mySVGComponent is a Vector shape or Image
$w("#mySVGComponent").src = '<svg id="chart_SVG" width="900" height="600" role="img" xmlns="http://www.w3.org/2000/svg"></svg>'

This also means that you can store the SVG strings as text fields within your database.

An example for an CUSTOM made SVG-UPLOADER you will find here…

https://russian-dima.wixsite.com/login-system/vnbadgemgm

For example BADGES accepts only SVG-image formats, which can be uploaded for your badge-management. When you want to manage your badges directly by code without using the wix-out of the box soulution, you will run into the problem that you can’t upload an SVG-file using the Wix-Upload-Button (at this point → strange right? → Offering an API for a BADGE-MANAGEMENT-FEATURE, but no real solution to UPLOAD the needed SVGs).

However! At this point you can use an HTM-Component. Some days ago i already posted the working code in some of the various of my posts.

Chris and me, we know exactly what we are talking about, but you perhaps will find your solution here …

Dive deeper into the materia and learn more about buffer , base64, blobs and file-selectors.

BTW: Here the mentioned post, with the solution …

Good luck! Now you should be able to RESOLVE YOUR ISSUE ON YOUR OWN! :wink:

Ohh, almost forgot to explain my own example.
How to use the mentioned example?

Well, as i already mentioned, the issue arrives when you try to generate an own BADGE-MANAGEMENT-SYSTEM trying to UPLOAD an SVG-FILE. There is no way of doing it the normal way.
You will find an ICON-DESIGN-UPLOADER → expected file-format → SVG


Now open an SVG file from file-selector…


By activating the base64-encoding-option → you even will get the right base64-code for the uploaded pic and also the DOWNLOAD-URL of the file…


How to prof that everything worked like expected?
Navigating back to the Badge-Generator…


…opening the → “Badge-Icon-Design”-Dropdown, you will recognise the new added SVG-DESIGN-OPTION for BADGE-CREATIONS :grin::wink:

WOOOOHOOOOOOOOOOOOOOOOOO! It works!

So, like i always say → WHERE A WILL → THERE A WAY !!! :wink:

i took a screen shot of the vector art and uploaded it as an image field. :smiley:

Yeah, that’s an .jpeg or .png and doesn’t solve the question.