SVG in HTML - re-size paths according to page width
html, svg
Solution
Give your SVG element a `viewBox` attribute that specifies the content to display:
<svg … viewBox="0 200 500 100">
That says basically, "the content of this image is 500 units wide and 100 units tall, and starts at 0x,200y; please be sure to keep it visible"
Seen in action:
http://jsfiddle.net/jGnST/
Read about the `preserveAspectRatio` attribute for more details on how to further control cropping, scaling, and alignment of your image when the aspect ratio specified by CSS does not match the aspect ratio of your viewBox.
Problem
I have an SVG element in my document which has 100% width via css. This only re-sizes the svg element; it doesn't resize the paths. 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 of `M` to be lined up against the left side of the screen, which it is, but also I need the 500 of `q 300 0 500 -100` to be against the right side of the screen. How would I accomplish this?