Since you say you don't want to use Javascript libraries, I assume you are creating the SVG image ahead of time and/or on the server, and are just transmitting static SVG code to the user. Canvas images, in contrast, are always made with Javascript.
(If you want to dynamically create the graph with Javascript, but not use a library, the hard part will be drawing the graph, not getting it to resize! As @Lars Kotthoff notes, with Javascript it is easy to find out the size of the window and scale everything accordingly.)
To make SVG scale up and down, you need to include a viewBox
attribute on your SVG element, and it will scale automatically. A warning, though, that sizing the image dynamically while maintaining aspect ratio can be a bit frustrating. The preserveAspectRatio
attribute prevents distortion, but only by leaving empty space, not by scaling down. In Firefox, using height:auto;
will cause the SVG height to scale down to match the width and viewBox aspect ratio, but not in webkit browsers.
Example here:
http://fiddle.jshell.net/9dSbL/
A somewhat indirect solution is to
+ Set the svg height to a negligible (but not zero) amount, such as 1px;
+ Set overflow:visible;
on the svg;
+ Use a slice
option for preserveAspectRatio
, so that the image scales to the larger dimension of height or width;
+ Hard-code a bottom padding style on the svg element that matches the aspect ratio of the viewBox;
+ Wrap the entire svg in a <div>
with style overflow:hidden;
.
Example here:
http://fiddle.jshell.net/9dSbL/1/