Width and height do not work in SVG <use> element

user_8158067 0
Viewed 256

I try to repeat the same use element with different sizes, but it doesn't work:

<svg id="svg">
        <defs>
            <g id="phone"><path d="M19.494,0H7.948C6.843,0,5.951,0.896,5.951,1.999v23.446c0,1.102,0.892,1.997,1.997,1.997h11.546
                    c1.103,0,1.997-0.895,1.997-1.997V1.999C21.491,0.896,20.597,0,19.494,0z M10.872,1.214h5.7c0.144,0,0.261,0.215,0.261,0.481
                    s-0.117,0.482-0.261,0.482h-5.7c-0.145,0-0.26-0.216-0.26-0.482C10.612,1.429,10.727,1.214,10.872,1.214z M13.722,25.469
                    c-0.703,0-1.275-0.572-1.275-1.276s0.572-1.274,1.275-1.274c0.701,0,1.273,0.57,1.273,1.274S14.423,25.469,13.722,25.469z
                     M19.995,21.1H7.448V3.373h12.547V21.1z"/></g>
        </defs>
        <use href="#phone" class="tool-icon" width="50px" height="50px"/>
        <use href="#phone" class="tool-icon" width="200px" height="200px" x="60px"/>
    </svg>

What am I doing wrong?

svg
2 Answers

width, and height have no effect on use elements, unless the element referenced has a viewbox

user_116176880

Inline SVG is an awesome way to use SVG because, among other reasons, the individual shapes that make up the graphic can be scripted and styled. The shapes are right in the DOM. But does that mean we have to define those shapes right in the HTML on every page? Nope, we can to reference them from elsewhere. Ideally, that “elsewhere” is an external file, because that means that file can be cached by the browser, efficiency!

user_149315190
Related