The SVG files produced by svglite do not include
properties. This is a deliberate choice intended to make it easier to
fit fluidly a SVG figure to its enclosing container. The scaling
straightforward but requires some understanding of the
attribute which is included in all SVGs produced by svglite. This
property defines the aspect ratio of the plot (as well as a user
coordinate system, see next section).
The viewBox is determined by the
height arguments of
svglite's device functions (with 10'' x 8'' the default). Although
those dimensions are supplied in inches, the viewBox's user coordinate
system is completely unit agnostic. The main effect is thus to
determine an aspect ratio. Since dimensions are not provided, the
dimensions of the enclosing container are used instead and the SVG is
rescaled to fit the container (although Internet Explorer currently
requires some CSS tricks to get this behaviour, see
Aspect ratio is preserved by default when the figure is scaled up or
down. The details of how the aspect ratio is preserved can be adjusted
in multiple ways via the
preserveAspectRatio attribute. See
https://sarasoueidan.com/blog/svg-coordinate-systems/ for more
information about this property.
Other useful resource: https://css-tricks.com/scale-svg/
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
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
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
<svg> tags that defines
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
<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">
As other graphics devices, svglite is scaled in big points (1/72 inch)
rather than pica points (1/72.27 inch). Note that in LaTeX and in the
grid graphics system on which ggplot2 is based, points refer to pica
points. Big points are denoted in LaTeX by
bp and in CSS by
use the latter notation. See http://tex.stackexchange.com/a/200968/19755
for some historical background about these units.
The conversion between device units and physical dimensions is
determined by the DevDesc parameter
ipr. IPR stands for inches per
raster (native device coordinates are sometimes called rasters in R
terminology) and is set to 1/72 in svglite. The device's physical
dimensions are set by the following DevDesc parameters (with
height the plot dimensions set by the user in inches):
| Parameter | Value |
width * 72 |
height * 72 |
A default svglite plot surface is thus 720 x 576 pt.
It is conventional for the fundamental line width (
lwd = 1) to
correspond to a line width of 1/96 inch and svglite obeys this
convention. Also, like other R graphics devices, svglite interprets
all point sizes directly as big points (e.g. the
parameter and the
fontsize argument of device functions). The
default font size is 12pt.
Text metrics are computed by Cairo thanks to David Gohel's gdtools
package. gdtools instantiates a PDF Cairo surface scaled in big
points. When svglite needs to compute metrics for a string of text, it
supplies the current scaled font size to Cairo:
cex * ps.
The Base graphics system also makes use of the obscure
and its relatives (
cra serves as a crude
measure for a default character height and width for the default
fontsize provided when the device is called (12pt in svgilte). The
main effect of this parameter (more specifically, the height
component) is to change the relationship between the margin parameters
omi. The margins
oma are specified
in line units and character height is used as a measure of line
spacing to convert margins measured in lines to physical margins. As
in other devices,
cra is set to
0.9 * pointsize and
1.2 * pointsize. These parameters are completely unused in the Grid
The SVG output sets up a viewBox (a user coordinate system) with values scaled in big points.
viewBox: The width and height are set to
dd->bottom respectively (these values are determined by the
1 lwd should equal 1/96 inch. svglite gets values
scaled in device coordinates (big points), so the line width is
multiplied by 72/96.
Text: gdtools returns metrics scaled in big points so no
transformation is needed. We do need to add
px units to work around
a rendering bug in Firefox. Note that when a viewBox is set up, a
pixel equals one unit in the user coordinate system and thus actually
represents a big point.
Any scripts or data that you put into this service are public.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.