CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
cecilomar
cecilomar

Reputation: 13

Fullscreen SVG without Scaling

Is there any way I can make the SVG 100% by 100% but disabling scaling?

I need the image to be in the middle of the page (both horizontal and vertical). The problem here is that I want to display the areas that are outside of the SVG artboard too, so centralizing with CSS wouldn't work for me. I know that displaying those areas is possible if you have an image with 100% width and a set height or vice-versa.

This was possible with Flash but I have not find a way to do it with SVG and HTML.

Normal SVG:

<svg style="width: 100px; height: 100px;">
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>

100% Width

<svg style="width: 100%; height: 100px;">
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>

Now, when you take the same code and make it 100% by 100%, it scales the image. Is there a way yo stop this?

100% by 100% Plus imaginary no-scale code

<svg style="width: 100%; height: 100%;" ##no_scale_code##>
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>

Here is a codepen example of the code I have so far: http://codepen.io/cecilomar/pen/Gcpys

Upvotes: 0

Views: 1133

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

Your codepen example SVG includes a viewBox attribute. If you don't want the SVG to be scaled when you make the dimensions larger, then remove the viewBox.

Upvotes: 1

Related Questions