html svg cuts image in half-CodePudding

I have an Icon inside my SVG but it cuts off at the top how can I display it fully inside the SVG?

<svg width="400" height="50" data-value="40">
            <path  stroke="#ccc" d="M0 10, 400 10" ></path>
            <path  stroke="#0301fb" d="M0 10, 400 10"
                style="stroke-dasharray: 400; stroke-dashoffset: 400;">

            </path>
            <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height="64" width="50" x="1%" y="-20" />
        </svg>
        Original
        <img id="loadIcon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height="64" width="50" x="1%" y="-20" />

CodePudding user response：

You can set viewbox attribute to svg elements.

<svg width="400" height="50" viewbox = "150 -15 100 60" data-value="40">
            <path  stroke="#ccc" d="M0 10, 400 10" ></path>
            <path  stroke="#0301fb" d="M0 10, 400 10"
                style="stroke-dasharray: 400; stroke-dashoffset: 400;">

            </path>
            <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height="64" width="50" x="1%" y="-20" />
        </svg>
        Original
        <img id="loadIcon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height="64" width="50" x="1%" y="-20" />