How can I make the SVG image 100% by 100% without scaling?
I want the image to be centered on the page both horizontally and vertically. The challenge is that I also want to display the areas outside of the SVG artboard, so using CSS to center it won't work for me. In Flash, it was possible to display those areas with an image having 100% width and a set height or vice versa, but I haven't figured out how to do this with SVG and HTML.
Original SVG:
<svg style="width: 100px; height: 100px;">
<circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>
SVG with 100% Width:
<svg style="width: 100%; height: 100px;">
<circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>
When you try to make the same code with 100% by 100%, the image scales. Is there a way to prevent this?
SVG with 100% by 100% and no-scale imaginary 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>
Check out my current progress on Codepen: http://codepen.io/cecilomar/pen/Gcpys