CODEWITHSUNDEEP
csssvg
Geoffrey Burdett
Geoffrey Burdett

Reputation: 1976

Change SVG Viewbox size with CSS

The Question:

Is there a way to change the size of the SVG viewbox with CSS, but preserve the aspect ratio? OR is there another way to preserve the aspect ratio of the SVG without a view box.

The Problem:

I want to responsively adjust the size of the SVG, but keep the aspect ratio. The width of the viewbox adjusts with the page, but the height doesn't adjust with the width. The problem with that is that the height of the container div is dependent on the height of the viewbox. So the container div may be really tall even if there's nothing showing in the bottom half of the viewbox.

Fiddle:

http://jsfiddle.net/hT9Jb/1/

<style>
    div{
        width: 100%;
        height: 500px;
        background-color: #00ffff;
    }
    
    svg{
        width: 50%;
        background-color: #ffff00;
    }
</style>

<div>
    <svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    </svg>
</div>

(Object SVGs and img SVGs wont work for my purposes. It has to be inline. The solution doesn't have to be CSS...javascript is definitely an acceptable solution.)

Upvotes: 78

Views: 166333

Answers (9)

Onyedikachi Oko - Dexter
Onyedikachi Oko - Dexter

Reputation: 460

Use transform on the inner tags of the svg, example the g tag svg g { transform: translate(16px, 16px); }

Upvotes: 1

Skratt
Skratt

Reputation: 408

To build on the answer on @Paulo Coghi which is the best answer for me (and who saved me after a few hours of failing tests and useless googling:

Just tranform your svg from:

<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>

into:

<svg version="1.1" id="Layer_1" viewBox="0 0 250 400" >
    <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    // and/or whatever you want
</svg>

then you can use in your CSS:

svg {
    max-width: 100%;
    max-height: 100%;
    // or any other units or measurements you want
}

Upvotes: 2

Debu Shinobi
Debu Shinobi

Reputation: 2582

    svg{
        width: 50%;
        background-color: #000;
    }
 <svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin" preserveAspectRatio="none">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    </svg>

Just use this and see if it works(worked for me).

<svg .... .... ...  preserveAspectRatio="none">

This should work.

Upvotes: 0

Paulo Coghi
Paulo Coghi

Reputation: 14969

In order to have a flexible SVG, that allows you to change its width and height, you need to remove completely the width and height and work with viewbox instead.

And, contrary to what sansSpoon said, you do not need javascript to do this.

In your css, refer to your svg and define its max-width and max-height, for example:

.my_svg_element {
    max-width: 250px;
    max-height: 400px;

}

After that, your SVG will be elastic and, at the same time, will respect the max width and height you have defined before.

Upvotes: 12

pruhter
pruhter

Reputation: 559

You could use a transform:

transform: scale(0.75); // 75% of original size

Upvotes: 43

Paul LeBeau
Paul LeBeau

Reputation: 101918

The width and height values specified in your SVG are the cause of your problem.

The solution is to fix your SVG file. Change:

width="250px" height="400px"

to

width="100%" height="100%"

Or with CSS:

width: 100%;
height: 100%;

Upvotes: 6

sansSpoon
sansSpoon

Reputation: 2185

I haven't yet found a way to change the viewBox property with CSS. However this Javascript solution works well:

var mySVG = document.getElementById('svg');
mySVG.setAttribute("viewBox", "0 0 100 100");

Also remove any references to width and height from the SVG and set them in CSS. Even though your working with an SVG, it's inline so cascading rules apply.

Upvotes: 22

Geoffrey Burdett
Geoffrey Burdett

Reputation: 1976

I found a simple javascript solution:

function setSvgSize(){
    var width = document.getElementById('svg-container').offsetWidth;
    var x = parseInt( $('#svg').attr('width') );
    var y = parseInt( $('#svg').attr('height') );
    var height = (width / x) * y;
    $('#svg-container').css('height',height);
}

Upvotes: -3

Danyu
Danyu

Reputation: 507

Did you try:

preserveAspectRatio='xMinYMin'

Check this example http://jsfiddle.net/hT9Jb/3/

For more details, see mozila documentation about svg

Upvotes: 7

Related Questions