I have an SVG logo defined as a symbol:
<svg class="SpriteSheet"> <symbol id="icon-logo" viewBox="-12 -79.61 407.19 108.36"> <path id="logo-upperLeft" d="M0-67.61l83.66 0 0-10 -93.66 0 0 30.92 10 0Z" transform="translate(-2 -2)"></path> <path id="logo-upperRight" d="M383.19-67.61l-83.66 0 0-10 93.66 0 0 30.92 -10 0Z" transform="translate(2 -2)"></path> <path id="logo-lowerLeft" d="M0 16.75l83.66 0 0 10 -93.66 0 0-30.92 10 0Z" transform="translate(-2 2)"></path> <path id="logo-lowerRight" d="M383.19 16.75l-83.66 0 0 10 93.66 0 0-30.92 -10 0Z" transform="translate(2 2)"></path> </symbol> </svg>
This definition is included at the beginning of the body and in the style of display:none .
Later in the document, I use the logo this way:
<header class="Header"> <h1 class="Header-headline"> <a href="/"> <svg class="Header-logo"> <use xlink:href="#icon-logo"></use> </svg> </a> </h1> </header>
I want to make a logo of a certain height with automatic width:
.Header-logo { height: 5rem; }
The result is the following: 
Although the height is correct (here 1rem is 24px), the width remains the default 300px. Adding width:auto does not cause any changes. Studying this problem, I found here several possible solutions here and here . However, none of them worked with my application: reusing the viewBox at the point of use cuts off most of the image and using the <img> not possible because I need to keep access to the SVG DOM for styling purposes.
I could add hardcoded width based on the known aspect ratio of the image, but this seems like a suboptimal solution: what if the logo aspect ratio changes in the future? Another option is to define width:100% , which works, however, this makes the area with the ability to “click” <a> expand over the entire width of the header, which I would like to avoid.
Is it possible to have a width with automatic size at a certain height when the viewBox is described in the <symbol> definition? Should I be attributed to using an <img> or absolute width for an SVG element?
source share