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 🔥!!!
#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 = '<svg width="50" height="50"><circle cx="25" cy="25" r="20" stroke="red" stroke-width="5" fill="blue"/></svg>'; 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:
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.
Move the Words Advanced SVG design with user interaction. A little math, a little magic, and you get to push around some text.
Between the Lines Advanced SVG design with mind (and line) bending user interaction.
SVG Clock Customizable analog clock. You remember analog clocks? Don’t you? Features advanced SVG design and animation.
Space Invaders Go back in time and enjoy this “old fashioned” shoot ‘em up game. Advanced SVG design with user interaction.