New API: Vector Images

We are excited to announce that a new VectorImage element type has been added to the Wix Code API. Vector images are digital illustrations based on geometric shapes. A vector image is a great choice when you need an image that retains its high quality when resized. In addition to standard page element functionality, the Wix Code API allows you to change the source of vector images that you’ve added to a page.
How it works

  1. Select the vector image you want to change using the $w selector function.

  2. Access the element’s .src property.

  3. Get the current source or set the source value to any of the vector images found in the Media Manager.

Example

$w("#myElement").src = "wix:vector://v1/1a1e41bd6dd04ee68bf9ebb24c9c7250.svg/media-57-08";

Learn more

To learn more, see VectorImage.src in the API reference.

2 Likes

WOW

Will we be able to animate our vector images soon ?

Hi,
Seemd like it’s impossible to add a vector to a collection as an image.
What is the solution for that?
Thanks

Hi,
Another question - what is the https:// path?
Need it for Google Dynamic Map.
The inside path won’t be recognized, must have the outside path.
Thanks:)

Could we bump this @yoav-wix . I would like to know the answer, just like @dafna-kotzer , because it would help with setting up the repeaters for my vector image.
Thanks! #gowix #needhelp #bump #wixcode #addvectorusingcollection #collection #vector #vectortocollection

@nino @telavespa we do not support vector image type in collections at this time.

However, there is nothing stopping you from storing vector image data in a text field, and setting it into a vector image element with a single line of code.

@yoav-wix ,

I actually have done that. I tried using a dataset to solve my repeater problem.

What I did actually was to put the link to the vector image inside of the database. As you can see below.

But when I try to run it into a repeater it doesn’t assign anything to the vector image element that is inside the repeater. I am trying to figure out how it would be possible to have repeating data elements that are connected to a vector. This way I don’t have to keep changing the vectors manually and they can be easily updated once I change the linkage.

Any thoughts? Anyone? Anybody?

Here is my code:

function menu(parameter) {
 //menu items that I am trying to pull
 // wix:vector://v1/f5dbdd61bb004c649026b0a395f58edb.svg/Gift.svg
 // wix:vector://v1/5700a57197064bfc88a69490d6aa0b9b.svg/Mail.svg
 // wix:vector://v1/b1ff2fec215c4cd597a09a885c4b6d04.svg/Circles.svg

 let fadeOptions = {
 "duration": 200,
 "delay": 0
    };
    
    $w("#menu").onItemReady(($item, itemData, index) => {
 let title = $item("#button262")
        title.label = itemData.title;
 let description = $item("#text330")
        description.text = itemData.description;
 let vector = $item("#vectorImage38")
        console.log(itemData.vector) <---This shows all of the items that you see above
        vector.src = itemData.vector; <---THE PROBLEM, this is not being updated for each item
        //Really could use some help with putting vectors into a repeater. 
 let alttitle = itemData.altTitle;
        $item("#container9").onMouseIn(() => {
            $item("#box79").show("fade", fadeOptions)
        })
        $item("#container9").onMouseOut(() => {
            $item("#box79").hide("fade", fadeOptions)
        })

    });

    wixData.query("menu")
        .ascending("order")
        .find()
        .then((results) => {
            $w("#menu").data = results.items;
        });
}

I know you have a lot on your plate. I just would like to know if what I was doing is possible and what are the different ways to solve it.

Best,
Nino

#gowix #needhelp #bump #wixcode #addvectorusingcollection #collection #vector #vectortocollection

@yoav-wix off topic but can we please get the chat API? This is like super important and would really help my project. WIX Chat API.

Hi,
I’m hoping you can help.
When I upload my Vector (only one colour) as an SVG, I’m not given the option to change the colour in the design panel. I would imagine that the solution dose not lie in Wix itself, but i wonder of you could give me any tips on how to save it in a way that WIX recognises the the svg is only one colour.

Thanks

how to change the color of the vector when mouseover?

Anybody noticed that when uploading an SVG file and assigning a URL to it - the color changes?
Is there a solution to that? We cannot change the color.