Menu
▾
▴
[Docutils-checkins] SF.net SVN: docutils:[9468] trunk/docutils
|
From: <mi...@us...> - 2023-11-10 08:45:43
|
Revision: 9468
http://sourceforge.net/p/docutils/code/9468
Author: milde
Date: 2023-11-10 08:45:38 +0000 (Fri, 10 Nov 2023)
Log Message:
-----------
Update functional tests for HTML
Extend SVG tests and bring them up to date.
Test with both, HTML4 and HTML5.
Minor corrections and edits elsewhere.
Modified Paths:
--------------
trunk/docutils/docs/user/rst/images/biohazard-bitmap-scaling.svg
trunk/docutils/docs/user/rst/images/biohazard-bitmap.svg
trunk/docutils/test/functional/expected/standalone_rst_html4css1.html
trunk/docutils/test/functional/expected/standalone_rst_html5.html
trunk/docutils/test/functional/input/data/html5-features.txt
trunk/docutils/test/functional/input/data/svg_images.txt
trunk/docutils/test/functional/input/data/swf_images.txt
trunk/docutils/test/functional/input/standalone_rst_html5.txt
Added Paths:
-----------
trunk/docutils/test/functional/input/data/interactive-button.svg
trunk/docutils/test/functional/input/data/object-with-hyperlink.svg
Modified: trunk/docutils/docs/user/rst/images/biohazard-bitmap-scaling.svg
===================================================================
--- trunk/docutils/docs/user/rst/images/biohazard-bitmap-scaling.svg 2023-11-10 08:45:23 UTC (rev 9467)
+++ trunk/docutils/docs/user/rst/images/biohazard-bitmap-scaling.svg 2023-11-10 08:45:38 UTC (rev 9468)
@@ -2,50 +2,36 @@
<!-- 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%"
+ viewBox="0 0 16 16"
+ width="100%"
height="100%"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
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" />
+ <a
+ id="a115"
+ xlink:href="#svg-images"
+ transform="translate(-0.51420152,0.95439357)">
+ <image
+ xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAIRJREFU OI2lUkEOwCAIa83+/+XusGCQIWOxF1GhUICSEEFSkvj1BgCjEwwAkkjylW0hyByyBP5+dR2zqrYE ux5kvq8e/AVtCh39HlbhqIIlcafdx+jxFezs2BY3fDkxO0lVezElnGA2MWrzmxftkiASxZIjjiWk BNlYd6NeJCyzLVbZ/92om331AFqcoAAAAABJRU5ErkJggg== "
+ x="5"
+ y="-5"
+ width="10"
+ height="10"
+ transform="rotate(39.01754)"
+ id="image10" />
+ </a>
<text
- x="0.40677962"
- y="15.186441"
+ x="0"
+ y="16"
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"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"><tspan
+ x="0"
+ y="16"
id="tspan2989">turned</tspan></text>
</svg>
Modified: trunk/docutils/docs/user/rst/images/biohazard-bitmap.svg
===================================================================
--- trunk/docutils/docs/user/rst/images/biohazard-bitmap.svg 2023-11-10 08:45:23 UTC (rev 9467)
+++ trunk/docutils/docs/user/rst/images/biohazard-bitmap.svg 2023-11-10 08:45:38 UTC (rev 9468)
@@ -2,49 +2,35 @@
<!-- 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"
width="16"
height="16"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
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" />
+ <a
+ id="a115"
+ xlink:href="#svg-images"
+ transform="translate(-0.51420152,0.95439357)">
+ <image
+ xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAIRJREFU OI2lUkEOwCAIa83+/+XusGCQIWOxF1GhUICSEEFSkvj1BgCjEwwAkkjylW0hyByyBP5+dR2zqrYE ux5kvq8e/AVtCh39HlbhqIIlcafdx+jxFezs2BY3fDkxO0lVezElnGA2MWrzmxftkiASxZIjjiWk BNlYd6NeJCyzLVbZ/92om331AFqcoAAAAABJRU5ErkJggg== "
+ x="5"
+ y="-5"
+ width="10"
+ height="10"
+ transform="rotate(39.01754)"
+ id="image10" />
+ </a>
<text
- x="0.40677962"
- y="15.186441"
+ x="0"
+ y="16"
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"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"><tspan
+ x="0"
+ y="16"
id="tspan2989">turned</tspan></text>
</svg>
Modified: trunk/docutils/test/functional/expected/standalone_rst_html4css1.html
===================================================================
--- trunk/docutils/test/functional/expected/standalone_rst_html4css1.html 2023-11-10 08:45:23 UTC (rev 9467)
+++ trunk/docutils/test/functional/expected/standalone_rst_html4css1.html 2023-11-10 08:45:38 UTC (rev 9468)
@@ -1276,74 +1276,63 @@
or Postscript formats for vector graphics instead). Rendering behaviour
varies, depending on the SVG image itself, the method used to put the
image in the document, and the viewing agent.</p>
+<div class="figure align-center">
+<object data="../../../docs/user/rst/images/title-scaling.svg" style="width: 40%;" type="image/svg+xml">../../../docs/user/rst/images/title-scaling.svg</object>
+<p class="caption">Figure with image occupying 40% of the line width.</p>
+<div class="legend">
+The <cite>viewBox</cite> attribute in the image file enables scaling
+also in <tt class="docutils literal"><object></tt> and <tt class="docutils literal"><svg></tt> nodes.</div>
+</div>
<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
+and in the same manner. Some older browsers, especially IE < 9, have
deficiencies or require plug-ins (i.e. don't support the <tt class="docutils literal"><img></tt> tag).
-The <cite>html4css1</cite> writer includes SVG images using <tt class="docutils literal"><object></tt> tags,
-the <cite>html5</cite> writer uses <tt class="docutils literal"><img></tt> tags.</p>
-<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
-"viewBox" declaration inside the image's 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>An image occupying 50% of the line width. The "viewBox" attribute in
-the image file enables auto-scaling also in <tt class="docutils literal"><object></tt> tags and
-embedded SVG.</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>An image without "viewBox" 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 right aligned image with "viewBox", 50% wide and 1.5 em high.
-(SVG images keep the aspect ratio unless the "preserveAspectRatio"
-attribute is <tt class="docutils literal">"none"</tt>.)</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>An image 1 em high, right aligned:</p>
-</li>
-<li><p class="first">An image 5 mm x 5 mm, centred, with hyperlink reference:</p>
-<a class="reference internal image-reference" href="#svg-images"><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>An image without "viewBox" in a 4 cm x 2 em box.</p>
-</li>
-</ul>
-<p>Older versions of <cite>webkit</cite> based browsers (chromium, safari, midori,
+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.</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 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
-because there is no "viewBox" attribute.</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>An SVG image with embedded bitmap and "viewBox", 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-scaling.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>The "html4css1" writer includes SVG images using <tt class="docutils literal"><object></tt> tags,
+the "html5" writer uses <tt class="docutils literal"><img></tt> tags.</p>
+<p>If an image is wrapped in <tt class="docutils literal"><object></tt> or <tt class="docutils literal"><svg></tt> tags, it
+depends on the <cite>viewBox</cite> declaration inside the image's root
+<tt class="docutils literal"><svg></tt> element whether it is scaled or clipped/padded.
+Images wrapped in <tt class="docutils literal"><img></tt> are always scaled.</p>
+<p>SVG images with <cite>viewBox</cite> keep the aspect ratio unless the
+<cite>preserveAspectRatio</cite> attribute is <tt class="docutils literal">"none"</tt>.
+The following two images are, 40% wide and 1.2 em high:</p>
+<object class="align-left" data="../../../docs/user/rst/images/title-scaling.svg" style="width: 40%; height: 1.2em;" type="image/svg+xml">../../../docs/user/rst/images/title-scaling.svg</object>
+<p>Image with <cite>viewBox</cite>.</p>
+<object class="align-left" data="../../../docs/user/rst/images/title.svg" style="width: 40%; height: 1.2em;" type="image/svg+xml">../../../docs/user/rst/images/title.svg</object>
+<p>Image without <cite>viewBox</cite>.
+This image is scaled, in an <tt class="docutils literal"><img></tt> node
+but clipped in an <tt class="docutils literal"><object></tt> or SVG <tt class="docutils literal"><image></tt> node.</p>
+<object class="align-left" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1.2em;" type="image/svg+xml">../../../docs/user/rst/images/biohazard-scaling.svg</object>
+<p>Image with <cite>viewBox</cite>, 1.2 em high, left aligned and <object data="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1.2em;" type="image/svg+xml">inline-svg</object> inline.</p>
+<a class="reference internal image-reference" href="#svg-images"><object class="align-left" data="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 15mm; height: 5mm;" type="image/svg+xml">../../../docs/user/rst/images/biohazard-scaling.svg</object></a>
+<p>Image with <cite>viewBox</cite>, 5 mm x 15 mm, with hyperlink reference set in rST.</p>
+<object class="align-left" data="../../../docs/user/rst/images/biohazard.svg" style="width: 15mm; height: 5mm;" type="image/svg+xml">../../../docs/user/rst/images/biohazard.svg</object>
+<p>Image without <cite>viewBox</cite>, 5 mm x 15 mm.</p>
+<object class="align-left" data="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" style="width: 2em;" type="image/svg+xml">../../../docs/user/rst/images/biohazard-bitmap-scaling.svg</object>
+<p>Image with embedded bitmap, hyperlink, and <cite>viewBox</cite>, 2 em wide.</p>
+<object class="align-left" data="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 2em;" type="image/svg+xml">../../../docs/user/rst/images/biohazard-bitmap.svg</object>
+<p>Image with embedded bitmap and hyperlink, without <cite>viewBox</cite>.
+Does not scale in <tt class="docutils literal"><object></tt> node.</p>
+<object class="align-left" data="../input/data/object-with-hyperlink.svg" style="width: 2.4em;" type="image/svg+xml">../input/data/object-with-hyperlink.svg</object>
+<a class="reference external image-reference" href="http://oreillymedia.github.io/svg-essentials-examples/ch14/animated_clock_js.svg"><object class="align-right" data="http://oreillymedia.github.io/svg-essentials-examples/ch14/animated_clock_js.svg" style="height: 3em;" type="image/svg+xml">[animated clock]</object></a>
+<p>Hyperlinks and script actions attached to SVG elements work in images
+included as <tt class="docutils literal"><object></tt> but fail in images included as <tt class="docutils literal"><img></tt>.
+Hyperlinks specified in the rST (<tt class="docutils literal">:target:</tt> directive option) always
+work. Due to security/privacy considerations, browsers may block
+<tt class="docutils literal"><object></tt> data from 3rd party sources.</p>
</div>
-</blockquote>
-</div>
<div class="section" id="swf-images">
<h2><a class="toc-backref" href="#toc-entry-44">2.25 SWF Images</a></h2>
-<p>Shockwave Flash is an image/movie format that most modern web browsers
-support via a plugin. It is sometimes blocked due to privacy/security
-concerns.</p>
+<p>The "Shockwave Flash" image/movie format requires a browser plugin.
+It is sometimes blocked due to privacy/security concerns and widely
+replaced by SVG and native video support in HTML5.</p>
<p>Images with extension <tt class="docutils literal">.swf</tt> are placed inside <object> elements.
For complete control over display options use raw HTML.</p>
<object class="align-left" data="../../../docs/user/rst/images/biohazard.swf" style="width: 4cm; height: 2em;" type="application/x-shockwave-flash">[biohazard.swf]</object>
<p>An SWF image in a 4 cm x 2 em box, left aligned.</p>
-<p>An inline SWF image <object data="../../../docs/user/rst/images/biohazard.swf" style="width: 0.8em; height: 0.8em;" type="application/x-shockwave-flash">inline-swf</object> scaled to 0.8 em x 0.8 em.</p>
+<p>An inline SWF image <object data="../../../docs/user/rst/images/biohazard.swf" style="width: 0.8em; height: 0.8em;" type="application/x-shockwave-flash">[biohazard.swf]</object> scaled to 0.8 em x 0.8 em.</p>
</div>
</div>
<div class="section" id="error-handling">
Modified: trunk/docutils/test/functional/expected/standalone_rst_html5.html
===================================================================
--- trunk/docutils/test/functional/expected/standalone_rst_html5.html 2023-11-10 08:45:23 UTC (rev 9467)
+++ trunk/docutils/test/functional/expected/standalone_rst_html5.html 2023-11-10 08:45:38 UTC (rev 9468)
@@ -156,9 +156,10 @@
</li>
<li><p><a class="reference internal" href="#text-level-semantics" id="toc-entry-51"><span class="sectnum">3.3 </span>Text-Level Semantics</a></p></li>
<li><p><a class="reference internal" href="#indicating-edits" id="toc-entry-52"><span class="sectnum">3.4 </span>Indicating Edits</a></p></li>
+<li><p><a class="reference internal" href="#svg-images" id="toc-entry-53"><span class="sectnum">3.5 </span>SVG Images</a></p></li>
</ul>
</li>
-<li><p><a class="reference internal" href="#error-handling" id="toc-entry-53"><span class="sectnum">4 </span>Error Handling</a></p></li>
+<li><p><a class="reference internal" href="#error-handling" id="toc-entry-54"><span class="sectnum">4 </span>Error Handling</a></p></li>
</ul>
</nav>
<section id="structural-elements">
@@ -553,29 +554,29 @@
<h3><a class="toc-backref" href="#toc-entry-22" role="doc-backlink"><span class="sectnum">2.14 </span>Directives</a></h3>
<nav class="contents local" id="contents">
<ul class="auto-toc simple">
-<li><p><a class="reference internal" href="#document-parts" id="toc-entry-54"><span class="sectnum">2.14.1 </span>Document Parts</a></p></li>
-<li><p><a class="reference internal" href="#images-and-figures" id="toc-entry-55"><span class="sectnum">2.14.2 </span>Images and Figures</a></p></li>
-<li><p><a class="reference internal" href="#tables" id="toc-entry-56"><span class="sectnum">2.14.3 </span>Tables</a></p></li>
-<li><p><a class="reference internal" href="#admonitions" id="toc-entry-57"><span class="sectnum">2.14.4 </span>Admonitions</a></p></li>
-<li><p><a class="reference internal" href="#topics-sidebars-and-rubrics" id="toc-entry-58"><span class="sectnum">2.14.5 </span>Topics, Sidebars, and Rubrics</a></p></li>
-<li><p><a class="reference internal" href="#target-footnotes" id="toc-entry-59"><span class="sectnum">2.14.6 </span>Target Footnotes</a></p></li>
-<li><p><a class="reference internal" href="#replacement-text" id="toc-entry-60"><span class="sectnum">2.14.7 </span>Replacement Text</a></p></li>
-<li><p><a class="reference internal" href="#compound-paragraph" id="toc-entry-61"><span class="sectnum">2.14.8 </span>Compound Paragraph</a></p></li>
-<li><p><a class="reference internal" href="#parsed-literal-blocks" id="toc-entry-62"><span class="sectnum">2.14.9 </span>Parsed Literal Blocks</a></p></li>
-<li><p><a class="reference internal" href="#code" id="toc-entry-63"><span class="sectnum">2.14.10 </span>Code</a></p></li>
-<li><p><a class="reference internal" href="#meta" id="toc-entry-64"><span class="sectnum">2.14.11 </span>Meta</a></p></li>
+<li><p><a class="reference internal" href="#document-parts" id="toc-entry-55"><span class="sectnum">2.14.1 </span>Document Parts</a></p></li>
+<li><p><a class="reference internal" href="#images-and-figures" id="toc-entry-56"><span class="sectnum">2.14.2 </span>Images and Figures</a></p></li>
+<li><p><a class="reference internal" href="#tables" id="toc-entry-57"><span class="sectnum">2.14.3 </span>Tables</a></p></li>
+<li><p><a class="reference internal" href="#admonitions" id="toc-entry-58"><span class="sectnum">2.14.4 </span>Admonitions</a></p></li>
+<li><p><a class="reference internal" href="#topics-sidebars-and-rubrics" id="toc-entry-59"><span class="sectnum">2.14.5 </span>Topics, Sidebars, and Rubrics</a></p></li>
+<li><p><a class="reference internal" href="#target-footnotes" id="toc-entry-60"><span class="sectnum">2.14.6 </span>Target Footnotes</a></p></li>
+<li><p><a class="reference internal" href="#replacement-text" id="toc-entry-61"><span class="sectnum">2.14.7 </span>Replacement Text</a></p></li>
+<li><p><a class="reference internal" href="#compound-paragraph" id="toc-entry-62"><span class="sectnum">2.14.8 </span>Compound Paragraph</a></p></li>
+<li><p><a class="reference internal" href="#parsed-literal-blocks" id="toc-entry-63"><span class="sectnum">2.14.9 </span>Parsed Literal Blocks</a></p></li>
+<li><p><a class="reference internal" href="#code" id="toc-entry-64"><span class="sectnum">2.14.10 </span>Code</a></p></li>
+<li><p><a class="reference internal" href="#meta" id="toc-entry-65"><span class="sectnum">2.14.11 </span>Meta</a></p></li>
</ul>
</nav>
<p>These are just a sample of the many reStructuredText Directives. For
others, please see <a class="reference external" href="https://docutils.sourceforge.io/docs/ref/rst/directives.html">reStructuredText Directives</a> <a class="brackets" href="#footnote-14" id="footnote-reference-28" role="doc-noteref"><span class="fn-bracket">[</span>14<span class="fn-bracket">]</span></a>.</p>
<section id="document-parts">
-<h4><a class="toc-backref" href="#toc-entry-54" role="doc-backlink"><span class="sectnum">2.14.1 </span>Document Parts</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-55" role="doc-backlink"><span class="sectnum">2.14.1 </span>Document Parts</a></h4>
<p>An example of the "contents" directive can be seen above this section
(a local, untitled table of <a class="reference internal" href="#contents">contents</a>) and at the beginning of the
document (a document-wide <a class="reference internal" href="#table-of-contents">table of contents</a>).</p>
</section>
<section id="images-and-figures">
-<h4><a class="toc-backref" href="#toc-entry-55" role="doc-backlink"><span class="sectnum">2.14.2 </span>Images and Figures</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-56" role="doc-backlink"><span class="sectnum">2.14.2 </span>Images and Figures</a></h4>
<p>An image directive (also clickable -- a hyperlink reference):</p>
<a class="reference internal image-reference" href="#directives"><img alt="../../../docs/user/rst/images/title.png" class="class1 class2" src="../../../docs/user/rst/images/title.png" style="width: 70%;" /></a>
<p>Image with multiple IDs:</p>
@@ -669,7 +670,7 @@
upon the style sheet and the browser or rendering software used.</p>
</section>
<section id="tables">
-<h4><a class="toc-backref" href="#toc-entry-56" role="doc-backlink"><span class="sectnum">2.14.3 </span>Tables</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-57" role="doc-backlink"><span class="sectnum">2.14.3 </span>Tables</a></h4>
<p>Tables may be given titles and additional arguments with the <em>table</em>
directive:</p>
<table class="align-left">
@@ -751,7 +752,7 @@
</table>
</section>
<section id="admonitions">
-<h4><a class="toc-backref" href="#toc-entry-57" role="doc-backlink"><span class="sectnum">2.14.4 </span>Admonitions</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-58" role="doc-backlink"><span class="sectnum">2.14.4 </span>Admonitions</a></h4>
<aside class="admonition attention">
<p class="admonition-title">Attention!</p>
<p>Directives at large.</p>
@@ -800,7 +801,7 @@
</aside>
</section>
<section id="topics-sidebars-and-rubrics">
-<h4><a class="toc-backref" href="#toc-entry-58" role="doc-backlink"><span class="sectnum">2.14.5 </span>Topics, Sidebars, and Rubrics</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-59" role="doc-backlink"><span class="sectnum">2.14.5 </span>Topics, Sidebars, and Rubrics</a></h4>
<p><em>Sidebars</em> are like miniature, parallel documents.</p>
<aside class="sidebar">
<p class="sidebar-title">Optional Sidebar Title</p>
@@ -824,7 +825,7 @@
allowed (e.g. inside a directive).</p>
</section>
<section id="target-footnotes">
-<h4><a class="toc-backref" href="#toc-entry-59" role="doc-backlink"><span class="sectnum">2.14.6 </span>Target Footnotes</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-60" role="doc-backlink"><span class="sectnum">2.14.6 </span>Target Footnotes</a></h4>
<aside class="footnote-list brackets">
<aside class="footnote brackets" id="footnote-7" role="doc-footnote">
<span class="label"><span class="fn-bracket">[</span>7<span class="fn-bracket">]</span></span>
@@ -882,11 +883,11 @@
</aside>
</section>
<section id="replacement-text">
-<h4><a class="toc-backref" href="#toc-entry-60" role="doc-backlink"><span class="sectnum">2.14.7 </span>Replacement Text</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-61" role="doc-backlink"><span class="sectnum">2.14.7 </span>Replacement Text</a></h4>
<p>I recommend you try <a class="reference external" href="http://www.python.org/">Python, <em>the</em> best language around</a> <a class="brackets" href="#footnote-7" id="footnote-reference-20" role="doc-noteref"><span class="fn-bracket">[</span>7<span class="fn-bracket">]</span></a>.</p>
</section>
<section id="compound-paragraph">
-<h4><a class="toc-backref" href="#toc-entry-61" role="doc-backlink"><span class="sectnum">2.14.8 </span>Compound Paragraph</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-62" role="doc-backlink"><span class="sectnum">2.14.8 </span>Compound Paragraph</a></h4>
<p>The <em>compound</em> directive is used to create a "compound paragraph", which
is a single logical paragraph containing multiple physical body
elements. For example:</p>
@@ -992,7 +993,7 @@
</div>
</section>
<section id="parsed-literal-blocks">
-<h4><a class="toc-backref" href="#toc-entry-62" role="doc-backlink"><span class="sectnum">2.14.9 </span>Parsed Literal Blocks</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-63" role="doc-backlink"><span class="sectnum">2.14.9 </span>Parsed Literal Blocks</a></h4>
<pre class="literal-block">This is a parsed literal block.
This line is indented. The next line is blank.
@@ -1002,7 +1003,7 @@
footnotes <a class="brackets" href="#footnote-1" id="footnote-reference-9" role="doc-noteref"><span class="fn-bracket">[</span>1<span class="fn-bracket">]</span></a>, <span class="target" id="hyperlink-targets">hyperlink targets</span>, and <a class="reference external" href="http://www.python.org/">references</a>.</pre>
</section>
<section id="code">
-<h4><a class="toc-backref" href="#toc-entry-63" role="doc-backlink"><span class="sectnum">2.14.10 </span>Code</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-64" role="doc-backlink"><span class="sectnum">2.14.10 </span>Code</a></h4>
<p>Blocks of source code can be set with the <cite>code</cite> directive. If the code
language is specified, the content is parsed and tagged by the <a class="reference external" href="http://pygments.org/">Pygments</a> <a class="brackets" href="#footnote-8" id="footnote-reference-21" role="doc-noteref"><span class="fn-bracket">[</span>8<span class="fn-bracket">]</span></a>
syntax highlighter and can be formatted with a style sheet. (Code parsing
@@ -1027,7 +1028,7 @@
</code><small class="ln">2 </small><code data-lineno="2 ">.. footer:: Document footer</code></pre>
</section>
<section id="meta">
-<h4><a class="toc-backref" href="#toc-entry-64" role="doc-backlink"><span class="sectnum">2.14.11 </span>Meta</a></h4>
+<h4><a class="toc-backref" href="#toc-entry-65" role="doc-backlink"><span class="sectnum">2.14.11 </span>Meta</a></h4>
<p>The <a class="reference external" href="https://docutils.sourceforge.io/docs/ref/rst/directives.html#metadata">“meta” directive</a> <a class="brackets" href="#footnote-15" id="footnote-reference-29" role="doc-noteref"><span class="fn-bracket">[</span>15<span class="fn-bracket">]</span></a> is used to specify metadata to be stored in,
e.g., HTML META tags or ODT file properties.</p>
</section>
@@ -1241,7 +1242,6 @@
<p><span class="green sc" lang="en-gb">British colourful text in small-caps</span>.</p>
</li>
</ul>
-<!-- HTML Specific -->
</section>
</section>
<section id="changes-to-the-html4css1-writer">
@@ -1270,6 +1270,7 @@
Use <ins> and <del> if a matching class value
is found in <cite>inline</cite>, <cite>literal</cite>, or <cite>container</cite> elements.
(See <a class="reference internal" href="#text-level-semantics">text-level semantics</a> and <a class="reference internal" href="#indicating-edits">indicating edits</a>.)</p></li>
+<li><p>Use <img> tags for SVG images and <video> for video formats.</p></li>
</ul>
<section id="field-list-rendering">
<h3><a class="toc-backref" href="#toc-entry-44" role="doc-backlink"><span class="sectnum">3.1 </span>Field List Rendering</a></h3>
@@ -1760,9 +1761,145 @@
</dd>
</dl>
</section>
+<section id="svg-images">
+<h3><a class="toc-backref" href="#toc-entry-53" role="doc-backlink"><span class="sectnum">3.5 </span>SVG Images</a></h3>
+<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-compatible
+way to include vector graphics in HTML documents. However, they are not
+supported by all backends/output formats (LaTeX, e.g., supports the PDF
+or Postscript formats for vector graphics instead). Rendering behaviour
+varies, depending on the SVG image itself, the method used to put the
+image in the document, and the viewing agent.</p>
+<figure class="align-center">
+<img alt="../../../docs/user/rst/images/title-scaling.svg" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 40%;" />
+<figcaption>
+<p>Figure with image occupying 40% of the line width.</p>
+<div class="legend">
+<p>The <cite>viewBox</cite> attribute in the image file enables scaling
+also in <span class="docutils literal"><object></span> and <span class="docutils literal"><svg></span> nodes.</p>
+</div>
+</figcaption>
+</figure>
+<p>All up-to-date HTML browsers support SVG, however not all do this fully
+and in the same manner. Some older browsers, especially IE < 9, have
+deficiencies or require plug-ins (i.e. don't support the <span class="docutils literal"><img></span> tag).
+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.</p>
+<p>The "html4css1" writer includes SVG images using <span class="docutils literal"><object></span> tags,
+the "html5" writer uses <span class="docutils literal"><img></span> tags.</p>
+<p>If an image is wrapped in <span class="docutils literal"><object></span> or <span class="docutils literal"><svg></span> tags, it
+depends on the <cite>viewBox</cite> declaration inside the image's root
+<span class="docutils literal"><svg></span> element whether it is scaled or clipped/padded.
+Images wrapped in <span class="docutils literal"><img></span> are always scaled.</p>
+<p>SVG images with <cite>viewBox</cite> keep the aspect ratio unless the
+<cite>preserveAspectRatio</cite> attribute is <span class="docutils literal">"none"</span>.
+The following two images are, 40% wide and 1.2 em high:</p>
+<img alt="../../../docs/user/rst/images/title-scaling.svg" class="align-left" src="../../../docs/user/rst/images/title-scaling.svg" style="width: 40%; height: 1.2em;" />
+<p>Image with <cite>viewBox</cite>.</p>
+<img alt="../../../docs/user/rst/images/title.svg" class="align-left" src="../../../docs/user/rst/images/title.svg" style="width: 40%; height: 1.2em;" />
+<p>Image without <cite>viewBox</cite>.
+This image is scaled, in an <span class="docutils literal"><img></span> node
+but clipped in an <span class="docutils literal"><object></span> or SVG <span class="docutils literal"><image></span> node.</p>
+<img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-left" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1.2em;" />
+<p>Image with <cite>viewBox</cite>, 1.2 em high, left aligned and <img alt="inline-svg" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="height: 1.2em;" /> inline.</p>
+<a class="reference internal image-reference" href="#svg-images"><img alt="../../../docs/user/rst/images/biohazard-scaling.svg" class="align-left" src="../../../docs/user/rst/images/biohazard-scaling.svg" style="width: 15mm; height: 5mm;" /></a>
+<p>Image with <cite>viewBox</cite>, 5 mm x 15 mm, with hyperlink reference set in rST.</p>
+<img alt="../../../docs/user/rst/images/biohazard.svg" class="align-left" src="../../../docs/user/rst/images/biohazard.svg" style="width: 15mm; height: 5mm;" />
+<p>Image without <cite>viewBox</cite>, 5 mm x 15 mm.</p>
+<img alt="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" class="align-left" src="../../../docs/user/rst/images/biohazard-bitmap-scaling.svg" style="width: 2em;" />
+<p>Image with embedded bitmap, hyperlink, and <cite>viewBox</cite>, 2 em wide.</p>
+<img alt="../../../docs/user/rst/images/biohazard-bitmap.svg" class="align-left" src="../../../docs/user/rst/images/biohazard-bitmap.svg" style="width: 2em;" />
+<p>Image with embedded bitmap and hyperlink, without <cite>viewBox</cite>.
+Does not scale in <span class="docutils literal"><object></span> node.</p>
+<img alt="../input/data/object-with-hyperlink.svg" class="align-left" src="../input/data/object-with-hyperlink.svg" style="width: 2.4em;" />
+<a class="reference external image-reference" href="http://oreillymedia.github.io/svg-essentials-examples/ch14/animated_clock_js.svg"><img alt="[animated clock]" class="align-right" src="http://oreillymedia.github.io/svg-essentials-examples/ch14/animated_clock_js.svg" style="height: 3em;" /></a>
+<p>Hyperlinks and script actions attached to SVG elements work in images
+included as <span class="docutils literal"><object></span> but fail in images included as <span class="docutils literal"><img></span>.
+Hyperlinks specified in the rST (<span class="docutils literal">:target:</span> directive option) always
+work. Due to security/privacy considerations, browsers may block
+<span class="docutils literal"><object></span> data from 3rd party sources.</p>
+<div class="align-left"><svg
+ width="33.456219"
+ height="33.145325"
+ viewBox="0 0 8.8519579 8.7697005"
+ version="1.1"
+ id="svg322"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg">
+ <defs
+ id="defs317" />
+ <a
+ id="a4351"
+ xlink:href="https://docutils.sourceforge.io/"
+ transform="translate(-1.8409244,-0.15358876)"
+ style="fill:#85ffdb;fill-opacity:1">
+ <path
+ style="fill:#85ffdb;fill-opacity:1;stroke:#000000;stroke-width:0.24;stroke-linejoin:round;stroke-opacity:1"
+ id="path1862"
+ d="M 4.812463,4.5429554 A 1.6221726,1.516379 0 0 1 3.0162047,4.9743989 1.6221726,1.516379 0 0 1 1.960933,3.5487498 1.6221726,1.516379 0 0 1 3.0259962,2.1294776 1.6221726,1.516379 0 0 1 4.8192475,2.5717165" />
+ </a>
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.24;stroke-linejoin:round;stroke-opacity:1"
+ id="path1864"
+ d="M -5.798163,4.4167861 A 1.6221726,1.516379 0 0 1 -7.5944213,4.8482297 1.6221726,1.516379 0 0 1 -8.649693,3.4225806 1.6221726,1.516379 0 0 1 -7.5846298,2.0033084 1.6221726,1.516379 0 0 1 -5.7913785,2.4455473"
+ transform="rotate(-90)" />
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.24;stroke-linejoin:round;stroke-opacity:1"
+ id="path1868"
+ d="M 2.9715385,-4.4351721 A 1.6221726,1.516379 0 0 1 1.1752802,-4.0037286 1.6221726,1.516379 0 0 1 0.12000852,-5.4293777 1.6221726,1.516379 0 0 1 1.1850717,-6.8486498 1.6221726,1.516379 0 0 1 2.978323,-6.406411"
+ transform="rotate(90)" />
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.24;stroke-linejoin:round;stroke-opacity:1"
+ id="path1870"
+ d="m -5.8804188,-4.3803354 a 1.6221726,1.516379 0 0 1 -1.7962583,0.4314435 1.6221726,1.516379 0 0 1 -1.0552717,-1.425649 1.6221726,1.516379 0 0 1 1.0650632,-1.4192722 1.6221726,1.516379 0 0 1 1.7932513,0.4422389"
+ transform="scale(-1)" />
+</svg>
+</div><div class="align-right"><!-- https://www.petercollingridge.co.uk/tutorials/svg/interactive/button/ -->
+<svg viewBox="0 0 50 22"
+ xmlns="http://www.w3.org/2000/svg"
+ height="2em">
+ <script type="text/javascript"><![CDATA[
+ function buttonClick(evt) {
+ alert('Click');
+ }
+ ]]></script>
+ <g onmouseup="buttonClick(evt)">
+ <rect x="0" y="0" rx="5" ry="5" width="50" height="22"
+ style="fill: #85ffdb; cursor: pointer;" />
+ <text x="5" y="16" font-size="12px">Button</text>
+ </g>
+</svg>
+</div><p>SVG images can also be included with the <span class="docutils literal">:file:</span> or <span class="docutils literal">:url:</span> options
+of the "raw" directive.
+Then, hyperlinks and script actions work also with the "html5" writer;
+however, scaling must be done directly in the image or with custom CSS
+rules.</p>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ version="1.1"
+ style="width: 2.4em; height: 2.4em"
+ class="align-left">
+ <image xlink:href="file:../input/data/object-with-hyperlink.svg"
+ width="2.4em" height="2.4em" />
+</svg>
+
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ version="1.1"
+ width="4.5em" height="2em"
+ class="align-right">
+ <image xlink:href="file:../input/data/interactive-button.svg"
+ width="4.5em" height="2em" />
+</svg><p>Hyperlinks and script actions fail inside SVG <span class="docutils literal"><image></span> nodes, so
+<span class="docutils literal"><object></span> or <span class="docutils literal"><iframe></span> nodes seem to be the only ways to reference
+external image files while keeping interactivity.</p>
</section>
+</section>
<section id="error-handling">
-<h2><a class="toc-backref" href="#toc-entry-53" role="doc-backlink"><span class="sectnum">4 </span>Error Handling</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-54" role="doc-backlink"><span class="sectnum">4 </span>Error Handling</a></h2>
<p>Any errors caught during processing will generate system messages.</p>
<p>There should be five messages in the following, auto-generated
section, "Docutils System Messages":</p>
Modified: trunk/docutils/test/functional/input/data/html5-features.txt
===================================================================
--- trunk/docutils/test/functional/input/data/html5-features.txt 2023-11-10 08:45:23 UTC (rev 9467)
+++ trunk/docutils/test/functional/input/data/html5-features.txt 2023-11-10 08:45:38 UTC (rev 9468)
@@ -35,6 +35,8 @@
is found in `inline`, `literal`, or `container` elements.
(See `text-level semantics`_ and `indicating edits`_.)
+* Use <img> tags for SVG images and <video> for video formats.
+
Field List Rendering
--------------------
Added: trunk/docutils/test/functional/input/data/interactive-button.svg
===================================================================
--- trunk/docutils/test/functional/input/data/interactive-button.svg (rev 0)
+++ trunk/docutils/test/functional/input/data/interactive-button.svg 2023-11-10 08:45:38 UTC (rev 9468)
@@ -0,0 +1,15 @@
+<!-- https://www.petercollingridge.co.uk/tutorials/svg/interactive/button/ -->
+<svg viewBox="0 0 50 22"
+ xmlns="http://www.w3.org/2000/svg"
+ height="2em">
+ <script type="text/javascript"><![CDATA[
+ function buttonClick(evt) {
+ alert('Click');
+ }
+ ]]></script>
+ <g onmouseup="buttonClick(evt)">
+ <rect x="0" y="0" rx="5" ry="5" width="50" height="22"
+ style="fill: #85ffdb; cursor: pointer;" />
+ <text x="5" y="16" font-size="12px">Button</text>
+ </g>
+</svg>
Added: trunk/docutils/test/functional/input/data/object-with-hyperlink.svg
===================================================================
--- trunk/docutils/test/functional/input/data/object-with-hyperlink.svg (rev 0)
+++ trunk/docutils/test/functional/input/data/object-with-hyperlink.svg 2023-11-10 08:45:38 UTC (rev 9468)
@@ -0,0 +1,36 @@
+<svg
+ width="33.456219"
+ height="33.145325"
+ viewBox="0 0 8.8519579 8.7697005"
+ version="1.1"
+ id="svg322"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg">
+ <defs
+ id="defs317" />
+ <a
+ id="a4351"
+ xlink:href="https://docutils.sourceforge.io/"
+ transform="translate(-1.8409244,-0.15358876)"
+ style="fill:#85ffdb;fill-opacity:1">
+ <path
+ style="fill:#85ffdb;fill-opacity:1;stroke:#000000;stroke-width:0.24;stroke-linejoin:round;stroke-opacity:1"
+ id="path1862"
+ d="M 4.812463,4.5429554 A 1.6221726,1.516379 0 0 1 3.0162047,4.9743989 1.6221726,1.516379 0 0 1 1.960933,3.5487498 1.6221726,1.516379 0 0 1 3.0259962,2.1294776 1.6221726,1.516379 0 0 1 4.8192475,2.5717165" />
+ </a>
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.24;stroke-linejoin:round;stroke-opacity:1"
+ id="path1864"
+ d="M -5.798163,4.4167861 A 1.6221726,1.516379 0 0 1 -7.5944213,4.8482297 1.6221726,1.516379 0 0 1 -8.649693,3.4225806 1.6221726,1.516379 0 0 1 -7.5846298,2.0033084 1.6221726,1.516379 0 0 1 -5.7913785,2.4455473"
+ transform="rotate(-90)" />
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.24;stroke-linejoin:round;stroke-opacity:1"
+ id="path1868"
+ d="M 2.9715385,-4.4351721 A 1.6221726,1.516379 0 0 1 1.1752802,-4.0037286 1.6221726,1.516379 0 0 1 0.12000852,-5.4293777 1.6221726,1.516379 0 0 1 1.1850717,-6.8486498 1.6221726,1.516379 0 0 1 2.978323,-6.406411"
+ transform="rotate(90)" />
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.24;stroke-linejoin:round;stroke-opacity:1"
+ id="path1870"
+ d="m -5.8804188,-4.3803354 a 1.6221726,1.516379 0 0 1 -1.7962583,0.4314435 1.6221726,1.516379 0 0 1 -1.0552717,-1.425649 1.6221726,1.516379 0 0 1 1.0650632,-1.4192722 1.6221726,1.516379 0 0 1 1.7932513,0.4422389"
+ transform="scale(-1)" />
+</svg>
Modified: trunk/docutils/test/functional/input/data/svg_images.txt
===================================================================
--- trunk/docutils/test/functional/input/data/svg_images.txt 2023-11-10 08:45:23 UTC (rev 9467)
+++ trunk/docutils/test/functional/input/data/svg_images.txt 2023-11-10 08:45:38 UTC (rev 9468)
@@ -13,95 +13,101 @@
varies, depending on the SVG image itself, the method used to put the
image in the document, and 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).
-The `html4css1` writer includes SVG images using ``<object>`` tags,
-the `html5` writer uses ``<img>`` tags.
+.. figure:: ../../../docs/user/rst/images/title-scaling.svg
+ :width: 40%
+ :align: center
+ Figure with image occupying 40% of the line width.
-If the image is wrapped in ``<object>`` or ``<svg>`` tags, it depends on the
-"viewBox" declaration inside the image's root ``<svg>`` element whether an
-SVG image is scaled or clipped/padded. Images wrapped in ``<img>`` are
-always scaled.
+ The `viewBox` attribute in the image file enables scaling
+ also in ``<object>`` and ``<svg>`` nodes.
-* .. image:: ../../../docs/user/rst/images/title-scaling.svg
- :width: 50%
- :align: right
+All up-to-date HTML browsers support SVG, however not all do this fully
+and in the same manner. Some older browsers, especially IE < 9, have
+deficiencies or require plug-ins (i.e. don't support the ``<img>`` tag).
+Older versions of `webkit` based browsers (chromium, safari, midori,
+konqueror) support the ``<img>`` tag but don't display contained bitmap
+images.
- An image occupying 50% of the line width. The "viewBox" attribute in
- the image file enables auto-scaling also in ``<object>`` tags and
- embedded SVG.
+The "html4css1" writer includes SVG images using ``<object>`` tags,
+the "html5" writer uses ``<img>`` tags.
-* .. image:: ../../../docs/user/rst/images/title.svg
- :width: 50%
- :height: 15 px
- :align: right
+If an image is wrapped in ``<object>`` or ``<svg>`` tags, it
+depends on the `viewBox` declaration inside the image's root
+``<svg>`` element whether it is scaled or clipped/padded.
+Images wrapped in ``<img>`` are always scaled.
- An image without "viewBox" 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.
+SVG images with `viewBox` keep the aspect ratio unless the
+`preserveAspectRatio` attribute is ``"none"``.
+The following two images are, 40% wide and 1.2 em high:
-* .. image:: ../../../docs/user/rst/images/title-scaling.svg
- :width: 50 %
- :height: 1.5 em
- :align: right
+.. image:: ../../../docs/user/rst/images/title-scaling.svg
+ :width: 40 %
+ :height: 1.2 em
+ :align: left
- A right aligned image with "viewBox", 50% wide and 1.5 em high.
- (SVG images keep the aspect ratio unless the "preserveAspectRatio"
- attribute is ``"none"``.)
+Image with `viewBox`.
-* An inline image |inline-svg| scaled to a height of 0.8 em.
+.. image:: ../../../docs/user/rst/images/title.svg
+ :width: 40%
+ :height: 1.2 em
+ :align: left
- .. |inline-svg| image:: ../../../docs/user/rst/images/biohazard-scaling.svg
- :height: 0.8 em
+Image without `viewBox`.
+This image is scaled, in an ``<img>`` node
+but clipped in an ``<object>`` or SVG ``<image>`` node.
-* .. image:: ../../../docs/user/rst/images/biohazard-scaling.svg
- :height: 1 em
- :align: right
+.. image:: ../../../docs/user/rst/images/biohazard-scaling.svg
+ :height: 1.2 em
+ :align: left
- An image 1 em high, right aligned:
+Image with `viewBox`, 1.2 em high, left aligned and |inline-svg| inline.
-* An image 5 mm x 5 mm, centred, with hyperlink reference:
+.. |inline-svg| image:: ../../../docs/user/rst/images/biohazard-scaling.svg
+ :height: 1.2 em
- .. 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-scaling.svg
+ :height: 5 mm
+ :width: 15 mm
+ :align: left
+ :target: `SVG Images`_
-* .. image:: ../../../docs/user/rst/images/biohazard.svg
- :width: 4 cm
- :height: 2 em
- :align: right
+Image with `viewBox`, 5 mm x 15 mm, with hyperlink reference set in rST.
- An image without "viewBox" in a 4 cm x 2 em box.
+.. image:: ../../../docs/user/rst/images/biohazard.svg
+ :height: 5 mm
+ :width: 15 mm
+ :align: left
-Older versions of `webkit` based browsers (chromium, safari, midori,
-konqueror) support the ``<img>`` tag but don't display contained bitmap
-images.
+Image without `viewBox`, 5 mm x 15 mm.
-* .. image:: ../../../docs/user/rst/images/biohazard-bitmap.svg
- :width: 3em
- :align: right
+.. image:: ../../../docs/user/rst/images/biohazard-bitmap-scaling.svg
+ :width: 2 em
+ :align: left
- A small SVG image with embedded bitmap, The ``:width:`` is set to 3 em
- in the rST source. Does not scale if wrapped in ``<object>`` tags
- because there is no "viewBox" attribute.
+Image with embedded bitmap, hyperlink, and `viewBox`, 2 em wide.
+.. image:: ../../../docs/user/rst/images/biohazard-bitmap.svg
+ :width: 2 em
+ :align: left
-* .. image:: ../../../docs/user/rst/images/biohazard-bitmap-scaling.svg
- :width: 3em
- :align: right
+Image with embedded bitmap and hyperlink, without `viewBox`.
+Does not scale in ``<object>`` node.
- An SVG image with embedded bitmap and "viewBox", 3 em wide.
+.. image:: ../input/data/object-with-hyperlink.svg
+ :width: 2.4 em
+ :align: left
-SVG images can also be put in figures:
+.. image:: http://oreillymedia.github.io/svg-essentials-examples/ch14/
+ animated_clock_js.svg
+ :target: http://oreillymedia.github.io/svg-essentials-examples/ch14/
+ animated_clock_js.svg
+ :alt: [animated clock]
+ :height: 3em
+ :align: right
- .. figure:: ../../../docs/user/rst/images/title-scaling.svg
- :alt: reStructuredText, the markup syntax
- :width: 290 px
- :height: 28 px
- :align: center
-
- SVG image in a figure.
+Hyperlinks and script actions attached to SVG elements work in images
+included as ``<object>`` but fail in images included as ``<img>``.
+Hyperlinks specified in the rST (``:target:`` directive option) always
+work. Due to security/privacy considerations, browsers may block
+``<object>`` data from 3rd party sources.
Modified: trunk/docutils/test/functional/input/data/swf_images.txt
===================================================================
--- trunk/docutils/test/functional/input/data/swf_images.txt 2023-11-10 08:45:23 UTC (rev 9467)
+++ trunk/docutils/test/functional/input/data/swf_images.txt 2023-11-10 08:45:38 UTC (rev 9468)
@@ -1,9 +1,9 @@
SWF Images
----------
-Shockwave Flash is an image/movie format that most modern web browsers
-support via a plugin. It is sometimes blocked due to privacy/security
-concerns.
+The "Shockwave Flash" image/movie format requires a browser plugin.
+It is sometimes blocked due to privacy/security concerns and widely
+replaced by SVG and native video support in HTML5.
Images with extension ``.swf`` are placed inside <object> elements.
For complete control over display options use raw HTML.
@@ -17,6 +17,7 @@
An SWF image in a 4 cm x 2 em box, left aligned.
.. |inline-swf| image:: ../../../docs/user/rst/images/biohazard.swf
+ :alt: [biohazard.swf]
:width: 0.8 em
:height: 0.8 em
Modified: trunk/docutils/test/functional/input/standalone_rst_html5.txt
===================================================================
--- trunk/docutils/test/functional/input/standalone_rst_html5.txt 2023-11-10 08:45:23 UTC (rev 9467)
+++ trunk/docutils/test/functional/input/standalone_rst_html5.txt 2023-11-10 08:45:38 UTC (rev 9468)
@@ -6,11 +6,51 @@
.. include:: data/list_table.txt
.. include:: data/custom_roles.txt
-.. HTML Specific
-
.. include:: data/html5-features.txt
.. include:: data/html5-text-level-tags.txt
+.. include:: data/svg_images.txt
+
+.. raw:: html
+ :file: data/object-with-hyperlink.svg
+ :class: align-left
+
+.. raw:: html
+ :file: data/interactive-button.svg
+ :class: align-right
+
+SVG images can also be included with the ``:file:`` or ``:url:`` options
+of the "raw" directive.
+Then, hyperlinks and script actions work also with the "html5" writer;
+however, scaling must be done directly in the image or with custom CSS
+rules.
+
+.. raw:: html
+
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ version="1.1"
+ style="width: 2.4em; height: 2.4em"
+ class="align-left">
+ <image xlink:href="file:../input/data/object-with-hyperlink.svg"
+ width="2.4em" height="2.4em" />
+ </svg>
+
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ version="1.1"
+ width="4.5em" height="2em"
+ class="align-right">
+ <image xlink:href="file:../input/data/interactive-button.svg"
+ width="4.5em" height="2em" />
+ </svg>
+
+Hyperlinks and script actions fail inside SVG ``<image>`` nodes, so
+``<object>`` or ``<iframe>`` nodes seem to be the only ways to reference
+external image files while keeping interactivity.
+
.. include:: data/errors.txt
.. footer:: |HTML 5| |validator| |valid-CSS2|
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
