Scaling Issues

Natural scaling

Another strategy is needed in order to scale the figure to make the text within the SVG consistent with the text in the surrounding web page. That could be useful, for instance, to create a consistent appearance in an HTML presentation. Since the user coordinate system defined by the viewBox is unitless, we need to map the figure to its natural dimensions. This will ensure a correspondence between the scale of the figure and that of the web page.

As mentioned above, the natural scale of svglite’s figures is in points and is determined by the width and height arguments that you supply to the device functions (10’’ x 8’’ being the default). Although those dimensions are specified in inches, the coordinate system is scaled in points. Counting 72 points per inch, the default SVG surface is thus 720 x 576 pt. Note that the CSS standard defines 12pt to be equal to 16px, the default size of text in most browsers. Since 12pt is the default text size in svglite as well, a SVG scaled to its natural dimensions will appear seamless with web text of 16px. If the text in your web page has another size, you will have to compute a scale factor and adjust the dimensions of the SVG accordingly.

To sum up, displaying a plot according to its natural dimensions requires providing the user agent with information about what the lengths defined within the SVG actually mean. There are several ways to achieve this. First you can edit the SVG and enclose it in another pair of <svg> tags that defines height and width. The root <svg> element determines the final dimensions of the figure.

A second way is to enclose the figure in a <div> tag with appropriate dimensions and let the SVG figure rescale itself to that container (cf. the section on fluid scaling):

<div style="width: 720pt; height: 576pt"> <img src="figure.svg"> </div>

Finally, you can directly specify the dimensions in the <img> or <object> tag that is embedding the figure. Note that the dimension attributes of those tags do not accept arbitrary units, so you will have to supply the dimensions in pixels. Just multiply the width and height measured in points with a factor of 16/12:

<img src="figure.svg" width="960" height="768">

Từ khóa » Html Scale Svg To Fit