|
|
SVG Images |
|
|
---------- |
|
|
|
|
|
.. image:: ../../../docs/user/rst/images/biohazard.svg |
|
|
:width: 48 px |
|
|
:height: 48 px |
|
|
:align: left |
|
|
|
|
|
Scalable vector graphics (SVG) images are the only standards-compliable way |
|
|
to include vector graphics in HTML documents. However, they are not |
|
|
supported by all backends/output formats. (E.g., LaTeX supports the |
|
|
PDF or Postscript formats for vector graphics instead.) |
|
|
|
|
|
Rendering behaviour varies, depending on |
|
|
|
|
|
a) The SVG image itself, e.g. fixed-size vs. scaling:: |
|
|
|
|
|
width="280" viewBox="0 0 280 27" |
|
|
height="27" width="100%" |
|
|
height="100%" |
|
|
|
|
|
b) The method used to put the image in the document. |
|
|
|
|
|
For HTML, there are several alternatives including: |
|
|
|
|
|
* using the HTML ``<img>`` tag (not for interactive/animated SVG), |
|
|
* using the HTML ``<object>`` tag, |
|
|
* including within SVG using the SVG ``<image>`` tag, |
|
|
* embedd the SVG code within HTML (inlining). |
|
|
|
|
|
The `html4css1` writer uses ``<object>`` tags, the `html5` |
|
|
writer uses ``<img>`` tags. |
|
|
|
|
|
.. cf. http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial |
|
|
|
|
|
c) The viewing agent. |
|
|
|
|
|
All up-to-date HTML browsers support SVG, however not all do this fully |
|
|
and in the same manner. Many older versions, especially IE < 9, have |
|
|
deficiencies or require plug-ins (i.e. don't support the ``<img>`` tag). |
|
|
|
|
|
If the image is wrapped in ``<object>`` or ``<svg>`` tags, it depends on the |
|
|
``viewBox`` declaration inside the images root ``<svg>`` element whether an |
|
|
SVG image is scaled or clipped/padded. Images wrapped in ``<img>`` are |
|
|
always scaled. |
|
|
|
|
|
* .. image:: ../../../docs/user/rst/images/title-scaling.svg |
|
|
:width: 50% |
|
|
:align: right |
|
|
|
|
|
A scaling image (scales with the browser window), occupying 50% of the line |
|
|
width. The ``viewBox`` setting in the image file enables auto-scaling also in |
|
|
``<object>`` tags and embedded SVG (if width and hight are set to 100% in the |
|
|
SVG <image> tag). |
|
|
|
|
|
|
|
|
* .. image:: ../../../docs/user/rst/images/title.svg |
|
|
:width: 50% |
|
|
:height: 15 px |
|
|
:align: right |
|
|
|
|
|
A fixed-size image in a box 50% wide and 15 pixles high. This image is |
|
|
scaled, if wrapped in an ``<img>`` tag but clipped in an ``<object>`` tag |
|
|
or within SVG. |
|
|
|
|
|
* .. image:: ../../../docs/user/rst/images/title-scaling.svg |
|
|
:width: 50 % |
|
|
:height: 1.5 em |
|
|
:align: right |
|
|
|
|
|
A right aligned, scaling image 50% wide and 1.5 em high. (This SVG image |
|
|
keeps the aspect ratio.) |
|
|
|
|
|
* An inline image |inline-svg| scaled to a height of 0.8 em. |
|
|
|
|
|
.. |inline-svg| image:: ../../../docs/user/rst/images/biohazard-scaling.svg |
|
|
:height: 0.8 em |
|
|
|
|
|
* .. image:: ../../../docs/user/rst/images/biohazard-scaling.svg |
|
|
:height: 1 em |
|
|
:align: right |
|
|
|
|
|
A scaling image 1 em high, right aligned: |
|
|
|
|
|
* A scaling image 5 mm x 5 mm, centered, with hyperlink reference: |
|
|
|
|
|
.. image:: ../../../docs/user/rst/images/biohazard-scaling.svg |
|
|
:target: `SVG Images`_ |
|
|
:width: 5 mm |
|
|
:height: 5 mm |
|
|
:align: center |
|
|
|
|
|
* .. image:: ../../../docs/user/rst/images/biohazard.svg |
|
|
:width: 4 cm |
|
|
:height: 2 em |
|
|
:align: right |
|
|
|
|
|
A fixed-size image in a 4 cm x 2 em box. |
|
|
|
|
|
Older versions of `webkit` based browsers (chromium, safari, midori, |
|
|
konqueror) support the ``<img>`` tag but don't display contained bitmap |
|
|
images in this case. |
|
|
|
|
|
* .. image:: ../../../docs/user/rst/images/biohazard-bitmap.svg |
|
|
:width: 3em |
|
|
:align: right |
|
|
|
|
|
A small, fixed-size SVG image with embedded bitmap, The ``:width:`` is |
|
|
set to 3 em in the rST source. Does not scale if wrapped in ``<object>`` |
|
|
tags. |
|
|
|
|
|
|
|
|
* .. image:: ../../../docs/user/rst/images/biohazard-bitmap-scaling.svg |
|
|
:width: 3em |
|
|
:align: right |
|
|
|
|
|
A scaling SVG image with embedded bitmap, 3 em wide. |
|
|
|
|
|
SVG images can also be put in figures: |
|
|
|
|
|
.. figure:: ../../../docs/user/rst/images/title.svg |
|
|
:alt: reStructuredText, the markup syntax |
|
|
:width: 290 px |
|
|
:height: 28 px |
|
|
:align: center |
|
|
|
|
|
**Figure:** SVG image in a figure.
|
|
|
|
