How to change height and width of an image

Ask the community
,
6

The XML way of coding a SVG image seemed to work for me:

'<svg width="100" height="100"><rect width="100" height="100" style="fill:rgb(255,255,0)" /></svg>'

The first “width” (let’s call it WIDTH1) and “height” (HEIGHT1) should remain “100” and define the maximum shape size the SVG can be. In the Wix Editor the SVG should also cover the full area (let’s call it AREA1) of where the SVG can be.

The second “width” (WIDTH2) and “height” (HEIGHT2) define what part of AREA1 you want to be filled. You should view it as a percentage of WIDTH1 and HEIGHT1.

For example:
WIDTH1 = 100
HEIGHT1 = 100
WIDTH2 = 50
HEIGHT2 = 100

Result → half AREA 1 is filled with you desired color

You can also add variables to the XML code by breaking the code in two parts:

var yournumber = 46
var yoursvg = "#vectorImage1" //YOUR SVG IMAGE ID

var svgchange = $w(yoursvg).src = '<svg width="100" height="100"><rect width="' + yournumber + '" height="100" style="fill:rgb(255,255,0)" /></svg>'