SVG in HTML - re-size paths according to page width

Question

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?

Solution 1

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.}

Solution 2

Make sure your svg root element has a viewport same size as the enclosing html element.

Comments

[Daniel says Reinstate Monica]

Please elaborate on your answer.

[chris]

specify width and height attribute for <svg>

[Daniel says Reinstate Monica]

Exactly what I needed. Thanks!