SVG to HTML - reformatting to fit page width

Question

I have an SVG element in my document that has a width of 100% via css. This only resizes the svg element; It does not resize tracks. Here is my path code:

<path id="quadcurveABC" d="M 0 300 q 300 0 500 -100 l 0 100 z" stroke="black" stroke-width="2" fill="black" /> 

I need the x-component M be aligned on the left side of the screen as it is, but I also need 500 of q 300 0 500 -100 be on the right side of the screen. How to do it?

Answer 1

Give the SVG element a viewBox attribute that indicates the content to display:

 <svg … viewBox="0 200 500 100"> 

It basically says: "the content of this image is 500 units wide and 100 units high and starts at 0x, 200y, please be sure to save it"

In action:

http://jsfiddle.net/jGnST/

_{Learn more about the preserveAspectRatio attribute for more information on how to further control the cropping, scaling, and alignment of your image when the aspect ratio specified in CSS does not match the aspect ratio of your viewBox.}

Answer 2

Make sure your svg root element is the same size as the enclosing html element.