New Feature OPENED: SVG!!!!! O.o

Show and tell
, ,
1

This. Is. Incredible. !!! This new feature was JUST OPENED! I am really curious to see what everyone uses this for. =) The Wix Code Team is still on :fire:!!!

#Example #SVG #JSON #XML #Animation #NPM #PackageManager #UX #vectorImage
In addition to the original options of setting the $w.vectorImage.src property to a Media Manager SVG image or an external URL, you can now set the src property to a vector XML string . This allows you to create your own SVG images, animations, and special effects.

How does it work?
Set the $w.vectorImage.src property to a vector XML string. Here’s a very simple example:
$w(“#vectorImage1").src = ‘’;
However, you can get as crazy and creative as your little heart desires. Take a look at the examples listed below to see how to do creative graphics, mind-blowing animations, and incredible user interactions.
Learn More
To learn more about how to create your own SVG creations, you can start with the following sites:

  • W3schools SVG Tutorial

  • Mozilla SVG Tutorial
    Now, dive in and get your hands dirty with the following examples…
    Dynamic SVG
    Demonstration of simple SVG manipulations: scaling, gradients, and curved lines of text.

  • View the “Live” site in a browser page

  • Open the site template in the Wix Editor
    Move the Words
    Advanced SVG design with user interaction. A little math, a little magic, and you get to push around some text.

  • View the “Live” site in a browser page

  • Open the site template in the Wix Editor
    Between the Lines
    Advanced SVG design with mind (and line) bending user interaction.

  • View the “Live” site in a browser page

  • Open the site template in the Wix Editor
    SVG Clock
    Customizable analog clock. You remember analog clocks? Don’t you? Features advanced SVG design and animation.

  • View the “Live” site in a browser page

  • Open the site template in the Wix Editor
    Space Invaders
    Go back in time and enjoy this “old fashioned” shoot ‘em up game. Advanced SVG design with user interaction.

  • View the “Live” site in a browser page

  • Open the site template in the Wix Editor
    Manipulate SVG

This example uses the xml-js NPM library available in the Wix Package Manager to modify an existing SVG image.

2

Any chance you could give a step by step demo for inserting an svg animation onto a WIX site using a json made from the Body Movin plug in for Adobe After effects? I have no computer science background and no coding knowledge. upon rendering from body movin, I get a file called data.js. JavaScript of some sort?
What do I do with it from that point forward in order to get it to display on my wix site here?

https://ehornet73.wixsite.com/erichorneportfolio/test

As you can see, I was able to get an svg to work using an html iframe from WIX, but I don’t like the frame. Who would frankly? The scrolling makes for major limitations for a graphic artist portfolio.

I am a high school graphic design teacher and would like to become practiced at inserting an svg (vector) animation on my WIX site so I can show my students how to do it. Thank you so much. I tried to attach a test animation of a red hurricane spinning called data.js.

3

Hello,

I tried to use XML string with my .svg file but it did not work. After several trials, my vector image was still already invisible. I think i don’t use XML string correctly but i don’t know where is my error.
Can you help me please ?

let svg = ‘<rect width=“300” height=“100” style=“fill:url(“MySvgFileURL.svg”);” />’;
$w.onReady( function () { $w(" #vectorImage1 ").src = svg; });

Thanks,
Tom