Menu
▾
▴
[Docutils-checkins] SF.net SVN: docutils:[7827] trunk/docutils
|
From: <mi...@us...> - 2015-03-13 11:42:45
|
Revision: 7827
http://sourceforge.net/p/docutils/code/7827
Author: milde
Date: 2015-03-13 11:42:35 +0000 (Fri, 13 Mar 2015)
Log Message:
-----------
Let "html-base" and "xhtml11" writers wrap SVG images in <img> tags.
Edit of the SVG image functional test section.
Modified Paths:
--------------
trunk/docutils/docs/user/rst/images/title-scaling.svg
trunk/docutils/docs/user/rst/images/title.svg
trunk/docutils/docs/user/tools.txt
trunk/docutils/docutils/writers/html_base/__init__.py
trunk/docutils/docutils/writers/html_base/html-base.css
trunk/docutils/test/functional/expected/standalone_rst_html4css1.html
trunk/docutils/test/functional/expected/standalone_rst_html_base.html
trunk/docutils/test/functional/expected/standalone_rst_xhtml11.xhtml
trunk/docutils/test/functional/input/data/svg_images.txt
Added Paths:
-----------
trunk/docutils/docs/user/rst/images/biohazard-bitmap-scaling.svg
Added: trunk/docutils/docs/user/rst/images/biohazard-bitmap-scaling.svg
===================================================================
--- trunk/docutils/docs/user/rst/images/biohazard-bitmap-scaling.svg (rev 0)
+++ trunk/docutils/docs/user/rst/images/biohazard-bitmap-scaling.svg 2015-03-13 11:42:35 UTC (rev 7827)
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ version="1.1"
+ viewBox="0 0 16 16"
+ width="100%"
+ height="100%"
+ id="svg2">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <image
+ xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAIRJREFU
+OI2lUkEOwCAIa83+/+XusGCQIWOxF1GhUICSEEFSkvj1BgCjEwwAkkjylW0hyByyBP5+dR2zqrYE
+ux5kvq8e/AVtCh39HlbhqIIlcafdx+jxFezs2BY3fDkxO0lVezElnGA2MWrzmxftkiASxZIjjiWk
+BNlYd6NeJCyzLVbZ/92om331AFqcoAAAAABJRU5ErkJggg==
+"
+ x="4.9541664"
+ y="-5.2426963"
+ width="11.322034"
+ height="9.3559322"
+ transform="matrix(0.77695327,0.62955828,-0.62955828,0.77695327,0,0)"
+ id="image10" />
+ <text
+ x="0.40677962"
+ y="15.186441"
+ id="text2987"
+ xml:space="preserve"
+ style="font-size:4px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan
+ x="0.40677962"
+ y="15.186441"
+ id="tspan2989">turned</tspan></text>
+</svg>
Modified: trunk/docutils/docs/user/rst/images/title-scaling.svg
===================================================================
--- trunk/docutils/docs/user/rst/images/title-scaling.svg 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/docs/user/rst/images/title-scaling.svg 2015-03-13 11:42:35 UTC (rev 7827)
@@ -9,13 +9,33 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- id="svg2"
version="1.1"
- inkscape:version="0.47 r22583"
viewBox="0 0 280.82999 27.34"
width="100%"
height="100%"
+ id="svg2"
+ inkscape:version="0.48.5 r10040"
sodipodi:docname="title.svg">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1000"
+ inkscape:window-height="680"
+ id="namedview10"
+ showgrid="false"
+ inkscape:zoom="1.573906"
+ inkscape:cx="58.770981"
+ inkscape:cy="13.67"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="svg2" />
<metadata
id="metadata8">
<rdf:RDF>
@@ -29,46 +49,22 @@
</rdf:RDF>
</metadata>
<defs
- id="defs6">
- <inkscape:perspective
- sodipodi:type="inkscape:persp3d"
- inkscape:vp_x="0 : 0.5 : 1"
- inkscape:vp_y="0 : 1000 : 0"
- inkscape:vp_z="1 : 0.5 : 1"
- inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
- id="perspective10" />
- </defs>
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="941"
- inkscape:window-height="791"
- id="namedview4"
- showgrid="false"
- inkscape:zoom="1.0620155"
- inkscape:cx="251.41436"
- inkscape:cy="14.837708"
- inkscape:window-x="142"
- inkscape:window-y="267"
- inkscape:window-maximized="0"
- inkscape:current-layer="svg2" />
+ id="defs6" />
<text
+ x="1.1959002"
+ y="24.185671"
+ transform="scale(0.95603363,1.0459883)"
+ id="text2818"
xml:space="preserve"
- style="font-size:36px;font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:TeXGyrePagella;-inkscape-font-specification:TeXGyrePagella Italic"
- x="-0.93599999"
- y="26.908001"
- id="text2818"
+ style="font-size:34.41720963px;font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:TeXGyrePagella;-inkscape-font-specification:TeXGyrePagella Italic"
sodipodi:linespacing="100%"><tspan
- sodipodi:role="line"
- id="tspan2820"
- x="-0.93599999"
- y="26.908001">re<tspan
- style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:LMMono12;-inkscape-font-specification:LMMono12"
- id="tspan2822">Structured</tspan>Text</tspan></text>
+ x="1.1959002"
+ y="24.185671"
+ id="tspan2820"><tspan
+ id="tspan2985"
+ style="font-family:Times New Roman;-inkscape-font-specification:Times New Roman">re</tspan><tspan
+ id="tspan2822"
+ style="font-size:34.41720963px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier New;-inkscape-font-specification:Courier New">Structured</tspan><tspan
+ id="tspan2989"
+ style="font-family:Times New Roman;-inkscape-font-specification:Times New Roman">Text</tspan></tspan></text>
</svg>
Modified: trunk/docutils/docs/user/rst/images/title.svg
===================================================================
--- trunk/docutils/docs/user/rst/images/title.svg 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/docs/user/rst/images/title.svg 2015-03-13 11:42:35 UTC (rev 7827)
@@ -9,12 +9,32 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- id="svg2"
version="1.1"
- inkscape:version="0.47 r22583"
width="280.82999"
height="27.34"
+ id="svg2"
+ inkscape:version="0.48.5 r10040"
sodipodi:docname="title.svg">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1000"
+ inkscape:window-height="680"
+ id="namedview10"
+ showgrid="false"
+ inkscape:zoom="1.573906"
+ inkscape:cx="58.770981"
+ inkscape:cy="13.67"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="svg2" />
<metadata
id="metadata8">
<rdf:RDF>
@@ -28,46 +48,22 @@
</rdf:RDF>
</metadata>
<defs
- id="defs6">
- <inkscape:perspective
- sodipodi:type="inkscape:persp3d"
- inkscape:vp_x="0 : 0.5 : 1"
- inkscape:vp_y="0 : 1000 : 0"
- inkscape:vp_z="1 : 0.5 : 1"
- inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
- id="perspective10" />
- </defs>
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="941"
- inkscape:window-height="791"
- id="namedview4"
- showgrid="false"
- inkscape:zoom="1.0620155"
- inkscape:cx="251.41436"
- inkscape:cy="14.837708"
- inkscape:window-x="142"
- inkscape:window-y="267"
- inkscape:window-maximized="0"
- inkscape:current-layer="svg2" />
+ id="defs6" />
<text
+ x="1.1959002"
+ y="24.185671"
+ transform="scale(0.95603363,1.0459883)"
+ id="text2818"
xml:space="preserve"
- style="font-size:36px;font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:TeXGyrePagella;-inkscape-font-specification:TeXGyrePagella Italic"
- x="-0.93599999"
- y="26.908001"
- id="text2818"
+ style="font-size:34.41720963px;font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:TeXGyrePagella;-inkscape-font-specification:TeXGyrePagella Italic"
sodipodi:linespacing="100%"><tspan
- sodipodi:role="line"
- id="tspan2820"
- x="-0.93599999"
- y="26.908001">re<tspan
- style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:LMMono12;-inkscape-font-specification:LMMono12"
- id="tspan2822">Structured</tspan>Text</tspan></text>
+ x="1.1959002"
+ y="24.185671"
+ id="tspan2820"><tspan
+ id="tspan2985"
+ style="font-family:Times New Roman;-inkscape-font-specification:Times New Roman">re</tspan><tspan
+ id="tspan2822"
+ style="font-size:34.41720963px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier New;-inkscape-font-specification:Courier New">Structured</tspan><tspan
+ id="tspan2989"
+ style="font-family:Times New Roman;-inkscape-font-specification:Times New Roman">Text</tspan></tspan></text>
</svg>
Modified: trunk/docutils/docs/user/tools.txt
===================================================================
--- trunk/docutils/docs/user/tools.txt 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/docs/user/tools.txt 2015-03-13 11:42:35 UTC (rev 7827)
@@ -150,6 +150,17 @@
files and produces clean XHTML 1.1 output. A stylesheet is required for
proper rendering; a complete stylesheet is installed and used by default.
+rst2html5.py
+------------
+
+:Reader: Standalone
+:Parser: reStructuredText
+:Writer: html5
+
+The ``rst2html5.py`` front end reads standalone reStructuredText source
+files and produces simple HTML 5 output. A stylesheet is required for
+proper rendering; a complete stylesheet is installed and used by default.
+
rstpep2html.py
--------------
Modified: trunk/docutils/docutils/writers/html_base/__init__.py
===================================================================
--- trunk/docutils/docutils/writers/html_base/__init__.py 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/docutils/writers/html_base/__init__.py 2015-03-13 11:42:35 UTC (rev 7827)
@@ -958,14 +958,14 @@
# Image types to place in an <object> element
# SVG not supported by IE up to version 8
# (html4css1 strives for IE6 compatibility)
- object_image_types = {'.svg': 'image/svg+xml',
+ object_image_types = {#'.svg': 'image/svg+xml',
'.swf': 'application/x-shockwave-flash'}
def visit_image(self, node):
atts = {}
uri = node['uri']
ext = os.path.splitext(uri)[1].lower()
- if ext in self.object_image_types: # ('.svg', '.swf'):
+ if ext in self.object_image_types:
atts['data'] = uri
atts['type'] = self.object_image_types[ext]
else:
@@ -1019,7 +1019,7 @@
suffix = '\n'
if 'align' in node:
atts['class'] = 'align-%s' % node['align']
- if ext in self.object_image_types: # ('.svg', '.swf')
+ if ext in self.object_image_types:
# do NOT use an empty tag: incorrect rendering in browsers
self.body.append(self.starttag(node, 'object', suffix, **atts) +
node.get('alt', uri) + '</object>' + suffix)
Modified: trunk/docutils/docutils/writers/html_base/html-base.css
===================================================================
--- trunk/docutils/docutils/writers/html_base/html-base.css 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/docutils/writers/html_base/html-base.css 2015-03-13 11:42:35 UTC (rev 7827)
@@ -73,6 +73,7 @@
width: 80%;
margin-top: 1em;
margin-bottom: 1em;
+ clear: both;
}
/* Paragraphs */
Modified: trunk/docutils/test/functional/expected/standalone_rst_html4css1.html
===================================================================
--- trunk/docutils/test/functional/expected/standalone_rst_html4css1.html 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/test/functional/expected/standalone_rst_html4css1.html 2015-03-13 11:42:35 UTC (rev 7827)
@@ -1088,47 +1088,97 @@
<h2><a class="toc-backref" href="#id74">2.24 SVG Images</a></h2>
<object class="align-left" data="../../../docs/user/rst/images/biohazard.svg" style="width: 48px; height: 48px;" type="image/svg+xml">
../../../docs/user/rst/images/biohazard.svg</object>
-<p>Scalable vector graphics (SVG) images are not supported by all backends.
-Rendering depends partially on the backend, especially if the size is
-not explicitely given.</p>
-<object class="align-left" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%;" type="image/svg+xml">
+<p>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.)</p>
+<p>Rendering behaviour varies, depending on</p>
+<ol class="loweralpha">
+<li><p class="first">The SVG image itself, e.g. fixed-size vs. scaling:</p>
+<pre class="literal-block">
+width="280" viewBox="0 0 280 27"
+height="27" width="100%"
+ height="100%"
+</pre>
+</li>
+<li><p class="first">The method used to put the image in the document.</p>
+<p>For HTML, there are several alternatives including:</p>
+<ul class="simple">
+<li>using the HTML <tt class="docutils literal"><img></tt> tag (not for interactive/animated SVG),</li>
+<li>using the HTML <tt class="docutils literal"><object></tt> tag,</li>
+<li>including within SVG using the SVG <tt class="docutils literal"><image></tt> tag,</li>
+<li>embedd the SVG code within HTML (inlining).</li>
+</ul>
+<p>The <cite>html4css1</cite> writer uses <tt class="docutils literal"><object></tt> tags, the <cite>html-base</cite> and <cite>xhtml11</cite>
+writers use <tt class="docutils literal"><img></tt> tags.</p>
+<!-- cf. http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial -->
+</li>
+<li><p class="first">The viewing agent.</p>
+<p>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 <tt class="docutils literal"><img></tt> tag).</p>
+</li>
+</ol>
+<p>If the image is wrapped in <tt class="docutils literal"><object></tt> or <tt class="docutils literal"><svg></tt> tags, it depends on the
+<tt class="docutils literal">viewBox</tt> declaration inside the images root <tt class="docutils literal"><svg></tt> element whether an
+SVG image is scaled or clipped/padded. Images wrapped in <tt class="docutils literal"><img></tt> are
+always scaled.</p>
+<ul>
+<li><object class="first align-right" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%;" type="image/svg+xml">
../../../docs/user/rst/images/title-scaling.svg</object>
-<p>A scaling image occupying 50% of the line width (scales with the browser
-window).</p>
-<p>Whether an SVG image is scaled or clipped/padded cannot be set in the
-containing HTML. If the image is wrapped in <tt class="docutils literal"><object></tt> tags, it
-depends on the viewport declaration inside its root <svg> element, if it is
-wrapped in <tt class="docutils literal"><img></tt> it depends on the browser.</p>
-<object class="align-left" data="../../../docs/user/rst/images/title.svg" style="width: 50%; height: 15px;" type="image/svg+xml">
+<p>A scaling image (scales with the browser window), occupying 50% of the line
+width. The <tt class="docutils literal">viewBox</tt> setting in the image file enables auto-scaling also in
+<tt class="docutils literal"><object></tt> tags and embedded SVG (if width and hight are set to 100% in the
+SVG <image> tag).</p>
+</li>
+<li><object class="first align-right" data="../../../docs/user/rst/images/title.svg" style="width: 50%; height: 15px;" type="image/svg+xml">
../../../docs/user/rst/images/title.svg</object>
-<p>A fixed-size image in a box with 50% of the line width, 15 pixles high.</p>
-<object class="align-right" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%; height: 1.2em;" type="image/svg+xml">
+<p>A fixed-size image in a box 50% wide and 15 pixles high. This image is
+scaled, if wrapped in an <tt class="docutils literal"><img></tt> tag but clipped in an <tt class="docutils literal"><object></tt> tag
+or within SVG.</p>
+</li>
+<li><object class="first align-right" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%; height: 1.5em;" type="image/svg+xml">
../../../docs/user/rst/images/title-scaling.svg</object>
-<p>A scaling image occupying 50% of the line width and 1.2 em high,
-right aligned (this SVG image keeps the aspect ratio):</p>
-<ul class="simple">
-<li>An inline SVG image <object data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 0.8em;" type="image/svg+xml">inline-svg</object> scaled to a height of 0.8 em.</li>
-</ul>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1em;" type="image/svg+xml">
+<p>A right aligned, scaling image 50% wide and 1.5 em high. (This SVG image
+keeps the aspect ratio.)</p>
+</li>
+<li><p class="first">An inline image <object data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 0.8em;" type="image/svg+xml">inline-svg</object> scaled to a height of 0.8 em.</p>
+</li>
+<li><object class="first align-right" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1em;" type="image/svg+xml">
../../../docs/user/rst/images/biohazard-scaling.svg</object>
-<p>A scaling image 1 em high, left aligned.</p>
-<p>A scaling image 5 mm x 5 mm, centered, with hyperlink reference:</p>
-<a class="reference internal image-reference" href="#directives"><object class="align-center" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 5mm; height: 5mm;" type="image/svg+xml">../../../docs/user/rst/images/biohazard-scaling.svg</object></a>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard.svg" style="width: 4cm; height: 2em;" type="image/svg+xml">
+<p>A scaling image 1 em high, right aligned:</p>
+</li>
+<li><p class="first">A scaling image 5 mm x 5 mm, centered, with hyperlink reference:</p>
+<a class="reference external image-reference" href="SVGImages_"><object class="align-center" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 5mm; height: 5mm;" type="image/svg+xml">../../../docs/user/rst/images/biohazard-scaling.svg</object></a>
+</li>
+<li><object class="first align-right" data="../../../docs/user/rst/images/biohazard.svg" style="width: 4cm; height: 2em;" type="image/svg+xml">
../../../docs/user/rst/images/biohazard.svg</object>
<p>A fixed-size image in a 4 cm x 2 em box.</p>
-<div class="figure">
+</li>
+</ul>
+<p>Older versions of <cite>webkit</cite> based browsers (chromium, safari, midori,
+konqueror) support the <tt class="docutils literal"><img></tt> tag but don't display contained bitmap
+images in this case.</p>
+<ul>
+<li><object class="first align-right" data="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 3em;" type="image/svg+xml">
+../../../docs/user/rst/images/biohazard-bitmap.svg</object>
+<p>A small, fixed-size SVG image with embedded bitmap, The <tt class="docutils literal">:width:</tt> is
+set to 3 em in the rST source. Does not scale if wrapped in <tt class="docutils literal"><object></tt>
+tags.</p>
+</li>
+<li><object class="first align-right" data="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" style="width: 3em;" type="image/svg+xml">
+../../../docs/user/rst/images/biohazard-bitmap-scaling.svg</object>
+<p>A scaling SVG image with embedded bitmap, 3 em wide.</p>
+</li>
+</ul>
+<p>SVG images can also be put in figures:</p>
+<blockquote>
+<div class="figure align-center">
<object data="../../../docs/user/rst/images/title.svg" style="width: 290px; height: 28px;" type="image/svg+xml">
reStructuredText, the markup syntax</object>
-<p class="caption">SVG image in a figure.</p>
+<p class="caption"><strong>Figure:</strong> SVG image in a figure.</p>
</div>
-<object class="align-right" data="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 3em;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard-bitmap.svg</object>
-<p>An SVG image with embedded bitmap, 3 em wide, right aligned.
-Older versions of <cite>webkit</cite> based browsers (chromium, safari, midori,
-konqueror) cannot display the contained bitmap image if the SVG is wrapped
-in <tt class="docutils literal"><img></tt> tags. The image does not scale properly if wrapped in
-<tt class="docutils literal"><object></tt> tags.</p>
+</blockquote>
</div>
<div class="section" id="swf-images">
<h2><a class="toc-backref" href="#id75">2.25 SWF Images</a></h2>
Modified: trunk/docutils/test/functional/expected/standalone_rst_html_base.html
===================================================================
--- trunk/docutils/test/functional/expected/standalone_rst_html_base.html 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/test/functional/expected/standalone_rst_html_base.html 2015-03-13 11:42:35 UTC (rev 7827)
@@ -1052,49 +1052,88 @@
</div>
<div class="section" id="svg-images">
<h2><a class="toc-backref" href="#id78"><span class="sectnum">2.24</span> SVG Images</a></h2>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard.svg" style="width: 48px; height: 48px;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard.svg</object>
-<p>Scalable vector graphics (SVG) images are not supported by all backends.
-Rendering depends partially on the backend, especially if the size is
-not explicitely given.</p>
-<object class="align-left" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%;" type="image/svg+xml">
-../../../docs/user/rst/images/title-scaling.svg</object>
-<p>A scaling image occupying 50% of the line width (scales with the browser
-window).</p>
-<p>Whether an SVG image is scaled or clipped/padded cannot be set in the
-containing HTML. If the image is wrapped in <span class="docutils literal"><object></span> tags, it
-depends on the viewport declaration inside its root <svg> element, if it is
-wrapped in <span class="docutils literal"><img></span> it depends on the browser.</p>
-<object class="align-left" data="../../../docs/user/rst/images/title.svg" style="width: 50%; height: 15px;" type="image/svg+xml">
-../../../docs/user/rst/images/title.svg</object>
-<p>A fixed-size image in a box with 50% of the line width, 15 pixles high.</p>
-<object class="align-right" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%; height: 1.2em;" type="image/svg+xml">
-../../../docs/user/rst/images/title-scaling.svg</object>
-<p>A scaling image occupying 50% of the line width and 1.2 em high,
-right aligned (this SVG image keeps the aspect ratio):</p>
+<img alt="../../../docs/user/rst/images/biohazard.svg" class="align-left" src="../../../docs/user/rst/images/biohazard.svg" style="width: 48px; height: 48px;" />
+<p>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.)</p>
+<p>Rendering behaviour varies, depending on</p>
+<ol class="loweralpha">
+<li><p>The SVG image itself, e.g. fixed-size vs. scaling:</p>
+<pre class="literal-block">width="280" viewBox="0 0 280 27"
+height="27" width="100%"
+ height="100%"</pre>
+</li>
+<li><p>The method used to put the image in the document.</p>
+<p>For HTML, there are several alternatives including:</p>
<ul class="simple">
-<li><p>An inline SVG image <object data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 0.8em;" type="image/svg+xml">inline-svg</object> scaled to a height of 0.8 em.</p></li>
+<li><p>using the HTML <span class="docutils literal"><img></span> tag (not for interactive/animated SVG),</p></li>
+<li><p>using the HTML <span class="docutils literal"><object></span> tag,</p></li>
+<li><p>including within SVG using the SVG <span class="docutils literal"><image></span> tag,</p></li>
+<li><p>embedd the SVG code within HTML (inlining).</p></li>
</ul>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1em;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard-scaling.svg</object>
-<p>A scaling image 1 em high, left aligned.</p>
-<p>A scaling image 5 mm x 5 mm, centered, with hyperlink reference:</p>
-<a class="reference internal image-reference" href="#directives"><object class="align-center" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 5mm; height: 5mm;" type="image/svg+xml">../../../docs/user/rst/images/biohazard-scaling.svg</object></a>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard.svg" style="width: 4cm; height: 2em;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard.svg</object>
+<p>The <cite>html4css1</cite> writer uses <span class="docutils literal"><object></span> tags, the <cite>html-base</cite> and <cite>xhtml11</cite>
+writers use <span class="docutils literal"><img></span> tags.</p>
+<!-- cf. http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial -->
+</li>
+<li><p>The viewing agent.</p>
+<p>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 <span class="docutils literal"><img></span> tag).</p>
+</li>
+</ol>
+<p>If the image is wrapped in <span class="docutils literal"><object></span> or <span class="docutils literal"><svg></span> tags, it depends on the
+<span class="docutils literal">viewBox</span> declaration inside the images root <span class="docutils literal"><svg></span> element whether an
+SVG image is scaled or clipped/padded. Images wrapped in <span class="docutils literal"><img></span> are
+always scaled.</p>
+<ul>
+<li><img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-right" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%;" />
+<p>A scaling image (scales with the browser window), occupying 50% of the line
+width. The <span class="docutils literal">viewBox</span> setting in the image file enables auto-scaling also in
+<span class="docutils literal"><object></span> tags and embedded SVG (if width and hight are set to 100% in the
+SVG <image> tag).</p>
+</li>
+<li><img alt="../../../docs/user/rst/images/title.svg" class="align-right" src="../../../docs/user/rst/images/title.svg" style="width: 50%; height: 15px;" />
+<p>A fixed-size image in a box 50% wide and 15 pixles high. This image is
+scaled, if wrapped in an <span class="docutils literal"><img></span> tag but clipped in an <span class="docutils literal"><object></span> tag
+or within SVG.</p>
+</li>
+<li><img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-right" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%; height: 1.5em;" />
+<p>A right aligned, scaling image 50% wide and 1.5 em high. (This SVG image
+keeps the aspect ratio.)</p>
+</li>
+<li><p>An inline image <img alt="inline-svg" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 0.8em;" /> scaled to a height of 0.8 em.</p>
+</li>
+<li><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1em;" />
+<p>A scaling image 1 em high, right aligned:</p>
+</li>
+<li><p>A scaling image 5 mm x 5 mm, centered, with hyperlink reference:</p>
+<a class="reference external image-reference" href="SVGImages_"><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-center" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 5mm; height: 5mm;" /></a>
+</li>
+<li><img alt="../../../docs/user/rst/images/biohazard.svg" class="align-right" src="../../../docs/user/rst/images/biohazard.svg" style="width: 4cm; height: 2em;" />
<p>A fixed-size image in a 4 cm x 2 em box.</p>
-<div class="figure">
-<object data="../../../docs/user/rst/images/title.svg" style="width: 290px; height: 28px;" type="image/svg+xml">
-reStructuredText, the markup syntax</object>
-<p class="caption">SVG image in a figure.</p>
+</li>
+</ul>
+<p>Older versions of <cite>webkit</cite> based browsers (chromium, safari, midori,
+konqueror) support the <span class="docutils literal"><img></span> tag but don't display contained bitmap
+images in this case.</p>
+<ul>
+<li><img alt="../../../docs/user/rst/images/biohazard-bitmap.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 3em;" />
+<p>A small, fixed-size SVG image with embedded bitmap, The <span class="docutils literal">:width:</span> is
+set to 3 em in the rST source. Does not scale if wrapped in <span class="docutils literal"><object></span>
+tags.</p>
+</li>
+<li><img alt="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" style="width: 3em;" />
+<p>A scaling SVG image with embedded bitmap, 3 em wide.</p>
+</li>
+</ul>
+<p>SVG images can also be put in figures:</p>
+<blockquote>
+<div class="figure align-center">
+<img alt="reStructuredText, the markup syntax" src="../../../docs/user/rst/images/title.svg" style="width: 290px; height: 28px;" />
+<p class="caption"><strong>Figure:</strong> SVG image in a figure.</p>
</div>
-<object class="align-right" data="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 3em;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard-bitmap.svg</object>
-<p>An SVG image with embedded bitmap, 3 em wide, right aligned.
-Older versions of <cite>webkit</cite> based browsers (chromium, safari, midori,
-konqueror) cannot display the contained bitmap image if the SVG is wrapped
-in <span class="docutils literal"><img></span> tags. The image does not scale properly if wrapped in
-<span class="docutils literal"><object></span> tags.</p>
+</blockquote>
</div>
<div class="section" id="swf-images">
<h2><a class="toc-backref" href="#id79"><span class="sectnum">2.25</span> SWF Images</a></h2>
Modified: trunk/docutils/test/functional/expected/standalone_rst_xhtml11.xhtml
===================================================================
--- trunk/docutils/test/functional/expected/standalone_rst_xhtml11.xhtml 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/test/functional/expected/standalone_rst_xhtml11.xhtml 2015-03-13 11:42:35 UTC (rev 7827)
@@ -1055,49 +1055,88 @@
</div>
<div class="section" id="svg-images">
<h2><a class="toc-backref" href="#id78"><span class="sectnum">2.24</span> SVG Images</a></h2>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard.svg" style="width: 48px; height: 48px;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard.svg</object>
-<p>Scalable vector graphics (SVG) images are not supported by all backends.
-Rendering depends partially on the backend, especially if the size is
-not explicitely given.</p>
-<object class="align-left" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%;" type="image/svg+xml">
-../../../docs/user/rst/images/title-scaling.svg</object>
-<p>A scaling image occupying 50% of the line width (scales with the browser
-window).</p>
-<p>Whether an SVG image is scaled or clipped/padded cannot be set in the
-containing HTML. If the image is wrapped in <span class="docutils literal"><object></span> tags, it
-depends on the viewport declaration inside its root <svg> element, if it is
-wrapped in <span class="docutils literal"><img></span> it depends on the browser.</p>
-<object class="align-left" data="../../../docs/user/rst/images/title.svg" style="width: 50%; height: 15px;" type="image/svg+xml">
-../../../docs/user/rst/images/title.svg</object>
-<p>A fixed-size image in a box with 50% of the line width, 15 pixles high.</p>
-<object class="align-right" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%; height: 1.2em;" type="image/svg+xml">
-../../../docs/user/rst/images/title-scaling.svg</object>
-<p>A scaling image occupying 50% of the line width and 1.2 em high,
-right aligned (this SVG image keeps the aspect ratio):</p>
+<img alt="../../../docs/user/rst/images/biohazard.svg" class="align-left" src="../../../docs/user/rst/images/biohazard.svg" style="width: 48px; height: 48px;" />
+<p>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.)</p>
+<p>Rendering behaviour varies, depending on</p>
+<ol class="loweralpha">
+<li><p>The SVG image itself, e.g. fixed-size vs. scaling:</p>
+<pre class="literal-block">width="280" viewBox="0 0 280 27"
+height="27" width="100%"
+ height="100%"</pre>
+</li>
+<li><p>The method used to put the image in the document.</p>
+<p>For HTML, there are several alternatives including:</p>
<ul class="simple">
-<li><p>An inline SVG image <object data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 0.8em;" type="image/svg+xml">inline-svg</object> scaled to a height of 0.8 em.</p></li>
+<li><p>using the HTML <span class="docutils literal"><img></span> tag (not for interactive/animated SVG),</p></li>
+<li><p>using the HTML <span class="docutils literal"><object></span> tag,</p></li>
+<li><p>including within SVG using the SVG <span class="docutils literal"><image></span> tag,</p></li>
+<li><p>embedd the SVG code within HTML (inlining).</p></li>
</ul>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1em;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard-scaling.svg</object>
-<p>A scaling image 1 em high, left aligned.</p>
-<p>A scaling image 5 mm x 5 mm, centered, with hyperlink reference:</p>
-<a class="reference internal image-reference" href="#directives"><object class="align-center" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 5mm; height: 5mm;" type="image/svg+xml">../../../docs/user/rst/images/biohazard-scaling.svg</object></a>
-<object class="align-left" data="../../../docs/user/rst/images/biohazard.svg" style="width: 4cm; height: 2em;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard.svg</object>
+<p>The <cite>html4css1</cite> writer uses <span class="docutils literal"><object></span> tags, the <cite>html-base</cite> and <cite>xhtml11</cite>
+writers use <span class="docutils literal"><img></span> tags.</p>
+<!-- cf. http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial -->
+</li>
+<li><p>The viewing agent.</p>
+<p>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 <span class="docutils literal"><img></span> tag).</p>
+</li>
+</ol>
+<p>If the image is wrapped in <span class="docutils literal"><object></span> or <span class="docutils literal"><svg></span> tags, it depends on the
+<span class="docutils literal">viewBox</span> declaration inside the images root <span class="docutils literal"><svg></span> element whether an
+SVG image is scaled or clipped/padded. Images wrapped in <span class="docutils literal"><img></span> are
+always scaled.</p>
+<ul>
+<li><img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-right" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%;" />
+<p>A scaling image (scales with the browser window), occupying 50% of the line
+width. The <span class="docutils literal">viewBox</span> setting in the image file enables auto-scaling also in
+<span class="docutils literal"><object></span> tags and embedded SVG (if width and hight are set to 100% in the
+SVG <image> tag).</p>
+</li>
+<li><img alt="../../../docs/user/rst/images/title.svg" class="align-right" src="../../../docs/user/rst/images/title.svg" style="width: 50%; height: 15px;" />
+<p>A fixed-size image in a box 50% wide and 15 pixles high. This image is
+scaled, if wrapped in an <span class="docutils literal"><img></span> tag but clipped in an <span class="docutils literal"><object></span> tag
+or within SVG.</p>
+</li>
+<li><img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-right" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 50%; height: 1.5em;" />
+<p>A right aligned, scaling image 50% wide and 1.5 em high. (This SVG image
+keeps the aspect ratio.)</p>
+</li>
+<li><p>An inline image <img alt="inline-svg" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 0.8em;" /> scaled to a height of 0.8 em.</p>
+</li>
+<li><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1em;" />
+<p>A scaling image 1 em high, right aligned:</p>
+</li>
+<li><p>A scaling image 5 mm x 5 mm, centered, with hyperlink reference:</p>
+<a class="reference external image-reference" href="SVGImages_"><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-center" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 5mm; height: 5mm;" /></a>
+</li>
+<li><img alt="../../../docs/user/rst/images/biohazard.svg" class="align-right" src="../../../docs/user/rst/images/biohazard.svg" style="width: 4cm; height: 2em;" />
<p>A fixed-size image in a 4 cm x 2 em box.</p>
-<div class="figure">
-<object data="../../../docs/user/rst/images/title.svg" style="width: 290px; height: 28px;" type="image/svg+xml">
-reStructuredText, the markup syntax</object>
-<p class="caption">SVG image in a figure.</p>
+</li>
+</ul>
+<p>Older versions of <cite>webkit</cite> based browsers (chromium, safari, midori,
+konqueror) support the <span class="docutils literal"><img></span> tag but don't display contained bitmap
+images in this case.</p>
+<ul>
+<li><img alt="../../../docs/user/rst/images/biohazard-bitmap.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 3em;" />
+<p>A small, fixed-size SVG image with embedded bitmap, The <span class="docutils literal">:width:</span> is
+set to 3 em in the rST source. Does not scale if wrapped in <span class="docutils literal"><object></span>
+tags.</p>
+</li>
+<li><img alt="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" class="align-right" src="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" style="width: 3em;" />
+<p>A scaling SVG image with embedded bitmap, 3 em wide.</p>
+</li>
+</ul>
+<p>SVG images can also be put in figures:</p>
+<blockquote>
+<div class="figure align-center">
+<img alt="reStructuredText, the markup syntax" src="../../../docs/user/rst/images/title.svg" style="width: 290px; height: 28px;" />
+<p class="caption"><strong>Figure:</strong> SVG image in a figure.</p>
</div>
-<object class="align-right" data="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 3em;" type="image/svg+xml">
-../../../docs/user/rst/images/biohazard-bitmap.svg</object>
-<p>An SVG image with embedded bitmap, 3 em wide, right aligned.
-Older versions of <cite>webkit</cite> based browsers (chromium, safari, midori,
-konqueror) cannot display the contained bitmap image if the SVG is wrapped
-in <span class="docutils literal"><img></span> tags. The image does not scale properly if wrapped in
-<span class="docutils literal"><object></span> tags.</p>
+</blockquote>
</div>
<div class="section" id="swf-images">
<h2><a class="toc-backref" href="#id79"><span class="sectnum">2.25</span> SWF Images</a></h2>
Modified: trunk/docutils/test/functional/input/data/svg_images.txt
===================================================================
--- trunk/docutils/test/functional/input/data/svg_images.txt 2015-03-12 22:43:12 UTC (rev 7826)
+++ trunk/docutils/test/functional/input/data/svg_images.txt 2015-03-13 11:42:35 UTC (rev 7827)
@@ -6,76 +6,122 @@
:height: 48 px
:align: left
-Scalable vector graphics (SVG) images are not supported by all backends.
-Rendering depends partially on the backend, especially if the size is
-not explicitely given.
+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.)
-.. image:: ../../../docs/user/rst/images/title-scaling.svg
- :width: 50%
- :align: left
+Rendering behaviour varies, depending on
-A scaling image occupying 50% of the line width (scales with the browser
-window).
+a) The SVG image itself, e.g. fixed-size vs. scaling::
-Whether an SVG image is scaled or clipped/padded cannot be set in the
-containing HTML. If the image is wrapped in ``<object>`` tags, it
-depends on the viewport declaration inside its root <svg> element, if it is
-wrapped in ``<img>`` it depends on the browser.
+ width="280" viewBox="0 0 280 27"
+ height="27" width="100%"
+ height="100%"
-.. image:: ../../../docs/user/rst/images/title.svg
- :width: 50%
- :height: 15 px
- :align: left
+b) The method used to put the image in the document.
-A fixed-size image in a box with 50% of the line width, 15 pixles high.
+ For HTML, there are several alternatives including:
-.. image:: ../../../docs/user/rst/images/title-scaling.svg
- :width: 50 %
- :height: 1.2 em
- :align: right
+ * 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).
-A scaling image occupying 50% of the line width and 1.2 em high,
-right aligned (this SVG image keeps the aspect ratio):
+ The `html4css1` writer uses ``<object>`` tags, the `html-base` and `xhtml11`
+ writers use ``<img>`` tags.
-.. |inline-svg| image:: ../../../docs/user/rst/images/biohazard-scaling.svg
- :height: 0.8 em
+ .. cf. http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial
-* An inline SVG image |inline-svg| scaled to a height of 0.8 em.
+c) The viewing agent.
-.. image:: ../../../docs/user/rst/images/biohazard-scaling.svg
- :height: 1 em
- :align: left
+ 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.
-A scaling image 1 em high, left aligned.
+* .. image:: ../../../docs/user/rst/images/title-scaling.svg
+ :width: 50%
+ :align: right
-A scaling image 5 mm x 5 mm, centered, with hyperlink reference:
+ 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/biohazard-scaling.svg
- :target: Directives_
- :width: 5 mm
- :height: 5 mm
- :align: center
-.. image:: ../../../docs/user/rst/images/biohazard.svg
- :width: 4 cm
- :height: 2 em
- :align: left
+* .. image:: ../../../docs/user/rst/images/title.svg
+ :width: 50%
+ :height: 15 px
+ :align: right
-A fixed-size image in a 4 cm x 2 em box.
+ 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.
-.. figure:: ../../../docs/user/rst/images/title.svg
- :alt: reStructuredText, the markup syntax
- :width: 290 px
- :height: 28 px
+* .. image:: ../../../docs/user/rst/images/title-scaling.svg
+ :width: 50 %
+ :height: 1.5 em
+ :align: right
- SVG image in a figure.
+ A right aligned, scaling image 50% wide and 1.5 em high. (This SVG image
+ keeps the aspect ratio.)
-.. image:: ../../../docs/user/rst/images/biohazard-bitmap.svg
- :width: 3em
- :align: right
+* An inline image |inline-svg| scaled to a height of 0.8 em.
-An SVG image with embedded bitmap, 3 em wide, right aligned.
+ .. |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) cannot display the contained bitmap image if the SVG is wrapped
-in ``<img>`` tags. The image does not scale properly if wrapped in
-``<object>`` tags.
+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.
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
