74

I want to use CSS styles to control the size of SVG designs. For example...

.svg { width:100%; }

When I embed an SVG image from a file it acts just like any other image and works fine:

<img src="image.svg" class="svg" />

But when I use inline SVG it DOESN't work:

<svg class="svg">...</svg>

The svg "box" will grow, but the contents stay the same.

Is there a way to do this?

emersonthis
  • 32,822
  • 59
  • 210
  • 375
  • 24
    This question is not a duplicate! The other one does not mention CSS at all. Here the author's asking how to do that with CSS. Which is quite a different thing. – Dakatine Dec 05 '15 at 15:00
  • It may not be a direct duplicate, but this question seems related to the `viewBox` (i.e. "svg 'box' will grow, but the contents stay the same"), which is addressed by the [other answer](https://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container) and answers below. Also see [How can I make an svg scale with its parent container?](https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container). – showdev Aug 07 '19 at 22:53

1 Answers1

84

The first and probably best method you could use is just using the viewBox attribute (this attribute is case sensitive). That will make the contents of the svg tag automatically take up the defined width and height of the svg tag itself, by only showing what's within the defined boundaries. For example:

<svg width="82" height="82" viewBox="0 0 102 102">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>

Alternatively, you could apply a svg transform to the contents of the SVG tag, which would look like this:

<svg width="82" height="82">
    <g transform="scale(0.8)">
        <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
        <text fill="black" x="10" y="30">FooBarBaz</text>
    </g>
</svg>

Finally, you can try using CSS3 transform to scale the whole svg element. This is the least supported method, but I mention it anyway because you originally asked for a CSS solution. I strongly suggest using one of the above solutions though, if that's possible at all.

<svg width="102" height="102" style="transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>
surya
  • 1,351
  • 1
  • 13
  • 29
Joeytje50
  • 18,636
  • 15
  • 63
  • 95
  • 11
    No way to scale using normal width/height attributes in CSS? that's rather limiting :/ – Damon Apr 04 '16 at 05:07
  • 1
    Not as far as I know, based on some testing I did when I wrote this. I believe the problem is that SVG uses its separate set of CSS rules, of which some are inherited through the width and height attributes. If you change the CSS dimensions, the SVG image itself won't scale along with it. But since CSS3 transforms are widely supported nowadays, you could of course just use that, if you're restricted to editing the CSS only (if you don't have access to the HTML code). – Joeytje50 Apr 04 '16 at 13:17
  • 1
    Adding `preserveAspectRatio="xMinYMin meet"` attribute is a good thing probably – vsync Oct 10 '16 at 09:30
  • 2
    `svg { width:100%; }` Try applying it to the SVG element instead of the class. This works for me. – hipnosis May 23 '17 at 16:34
  • 1
    @hipnosis CSS styles do not change their behaviour based on the selector used to select an element. So unless there is some reason this works completely differently for SVG-documents, as opposed to HTML documents (which I would find highly unlikely), I'm quite sure this must be attributable to some other change you've made compared to the original asker of this question. – Joeytje50 May 25 '17 at 22:23
  • 6
    this is super late but the css style zoom:0.8 works – drowhunter Sep 21 '20 at 05:15
  • 2
    @drowhunter I'm guessing you could probably make that a standalone answer to this question. Things change, so I can imagine things like this make it possible to do what wasn't as well-supported back then. – Joeytje50 Sep 30 '20 at 10:42