Setting XML string to vector.src doesn't work

Ask the community
,
1

People had this issue before as discussed here https://www.wix.com/corvid/forum/community-discussion/can-no-longer-change-vector-svg-s-source
I’ve followed as best as I could but nothing worked.

It shows correctly on Preview

1063×814 21.9 KB

But on Publish nothing shows up

1021×808 13.8 KB

I checked the html in the Published page and inside the svg, is an empty g element.

<svg preserveAspectRatio="none" id="comp-kglg3g2hsvgcontent" type="shape" viewBox="0 0 0 0" role="img">
<g></g> //empty
</svg>

I think it may have to do with wix not liking “path” element since I’ve tried the circle example src - Velo API Reference - Wix.com and it works on Publish.

1002×836 26 KB

I also made sure the XML string is “clean” by pasting it into SVGOMG, a popular web GUI that removes redundant or useless svg metadata, and getting the output string.

Here’s the code

$w.onReady(function () {
    renderSVG()
});

function renderSVG() {
 let content = `<svg xmlns="http://www.w3.org/2000/svg" width="408.404" height="408.425" viewBox="0 0 108.057 108.062"><path d="M54.031 0c-11.705 0-23.41 2.158-33.828 6.473-5.98 2.477-11.253 7.75-13.73 13.73a77.477 77.477 0 00-.642 1.6c-7.983 20.554-7.77 45.75.642 66.056 1.346 3.25 3.52 6.29 6.182 8.788l83.6-84.4c-2.42-2.476-5.314-4.497-8.396-5.774C77.441 2.158 65.736 0 54.031 0z" fill="#ff8989"/><path d="M107.722 61.993L79.13 73.58 15.853 99.22a24.262 24.262 0 003.874 2.165L99.924 91.12a23.559 23.559 0 001.665-3.26c3.335-8.052 5.376-16.872 6.133-25.867z" fill="#ff0"/><path d="M99.924 91.12l-23.117 2.959-57.08 7.306c.158.07.317.139.476.205 20.835 8.63 46.82 8.63 67.656 0 4.864-2.015 9.26-5.88 12.065-10.47z" fill="#53d000"/><path d="M96.256 12.247l-83.6 84.4a26.76 26.76 0 003.197 2.573l91.87-37.227c.516-6.13.435-12.34-.245-18.444-.904-8.118-2.866-16.048-5.889-23.346-1.2-2.897-3.058-5.628-5.333-7.956z" fill="#ffc543"/></svg>`
 
    //circle example works 
    // content = '<svg width="50" height="50"><circle cx="25" cy="25" r="20" stroke="red" stroke-width="5" fill="blue"/></svg> 
    $w("#vectorLine").src = content;
}