CODEWITHSUNDEEP
csshtmlsvgresponsive-designscale
Dan
Dan

Reputation: 794

Inline svg scaling - auto width

I've built a responsive dashboard, and a new requirement is big-screen tv viewing. To accomplish scaling of logo assets, I've decided to use SVGs, which also remove the need to maintain a seperate retina sprite for mobile/desktop viewing.

As the logos are all different widths, I need to set a common height, with the width being auto. This works great when using svgs with an img tag, but when using inline SVGs the paths scale nicely, but the svg width is still set to the viewBox sizing.

If need be I can settle for the img option, but would really prefer to use the inline option, so I can control the colours of the paths with css.

I've setup a jsfiddle to show an example. the red keyline shows the sizing issue on the two elements. http://jsfiddle.net/bxeBW/2/

<svg version="1.1" id="DT" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="445.997px" height="100px" viewBox="0 0 445.997 100" preserveAspectRatio="xMinYMin meet">

.logo{
    height:3em;
    padding: 0.5em;

    svg, 
    img{
      height:3em;
      width:auto;
      border: 1px solid #ff0000;

        #telegraph{
            fill:#ff0000;
        }
    }
}

Thanks for your help.

Cheers, Dan

Upvotes: 2

Views: 3276

Answers (1)

Dan
Dan

Reputation: 794

It appears, by adding max-width to the css for the svg, will format the sizing exactly as i need it. This works for Webkit browsers and Firefox, which fortunately meets my requirements, however if IE support was essential then this is not really a solution.

.logo{
    svg, 
    img{
      height:3em;
      max-width:100%;
    }
}

http://jsfiddle.net/bxeBW/3/

Upvotes: 1

Related Questions