From: Norman Walsh <ndw@nwalsh.com>
Date: Thu, 23 May 2002 12:58:32 +0000 (+0000)
Subject: Support for SVG in HTML
X-Git-Tag: release/1.79.1~6^2~5669
X-Git-Url: https://granicus.if.org/sourcecode?a=commitdiff_plain;h=577ee2a32a6d4c813a601a5e8c6a402f18f7c450;p=docbook-dsssl

Support for SVG in HTML
---

diff --git a/xsl/common/common.xsl b/xsl/common/common.xsl
index c1d08ef6c..24598de79 100644
--- a/xsl/common/common.xsl
+++ b/xsl/common/common.xsl
@@ -887,6 +887,8 @@ object is recognized as a graphic.</para>
   </xsl:variable>
 
   <xsl:choose>
+    <xsl:when xmlns:svg="http://www.w3.org/2000/svg"
+              test="$use.svg != 0 and $object/svg:*">1</xsl:when>
     <xsl:when test="$graphic.format = '1'">1</xsl:when>
     <xsl:when test="$graphic.ext = '1'">1</xsl:when>
     <xsl:otherwise>0</xsl:otherwise>
diff --git a/xsl/fo/param.ent b/xsl/fo/param.ent
index 50cc99983..4cadd7930 100644
--- a/xsl/fo/param.ent
+++ b/xsl/fo/param.ent
@@ -130,6 +130,7 @@
 <!ENTITY toc.margin.properties SYSTEM "../params/toc.margin.properties.xml">
 <!ENTITY toc.section.depth SYSTEM "../params/toc.section.depth.xml">
 <!ENTITY use.extensions SYSTEM "../params/use.extensions.xml">
+<!ENTITY use.svg SYSTEM "../params/use.svg.xml">
 <!ENTITY ulink.footnotes SYSTEM "../params/ulink.footnotes.xml">
 <!ENTITY ulink.hyphenate SYSTEM "../params/ulink.hyphenate.xml">
 <!ENTITY ulink.show SYSTEM "../params/ulink.show.xml">
diff --git a/xsl/fo/param.xweb b/xsl/fo/param.xweb
index 4f6294c08..f7cd65f80 100644
--- a/xsl/fo/param.xweb
+++ b/xsl/fo/param.xweb
@@ -190,6 +190,7 @@ generate.section.toc.level;
 &ulink.hyphenate;
 &shade.verbatim;
 &shade.verbatim.style;
+&use.svg;
 </reference>
 
 <reference><title>Pagination and General Styles</title>
@@ -501,6 +502,7 @@ around all these parameters.</para>
 <src:fragref linkend="toc.margin.properties.frag"/>
 <src:fragref linkend="toc.section.depth.frag"/>
 <src:fragref linkend="use.extensions.frag"/>
+<src:fragref linkend="use.svg.frag"/>
 <src:fragref linkend="ulink.footnotes.frag"/>
 <src:fragref linkend="ulink.hyphenate.frag"/>
 <src:fragref linkend="ulink.show.frag"/>
diff --git a/xsl/html/graphics.xsl b/xsl/html/graphics.xsl
index fa1f1eb34..0a6e8a162 100644
--- a/xsl/html/graphics.xsl
+++ b/xsl/html/graphics.xsl
@@ -32,7 +32,8 @@
 
 <xsl:template name="is.graphic.format">
   <xsl:param name="format"></xsl:param>
-  <xsl:if test="$format = 'PNG'
+  <xsl:if test="$format = 'SVG'
+                or $format = 'PNG'
                 or $format = 'JPG'
                 or $format = 'JPEG'
                 or $format = 'linespecific'
@@ -44,7 +45,8 @@
 
 <xsl:template name="is.graphic.extension">
   <xsl:param name="ext"></xsl:param>
-  <xsl:if test="$ext = 'png'
+  <xsl:if test="$ext = 'svg'
+                or $ext = 'png'
                 or $ext = 'jpeg'
                 or $ext = 'jpg'
                 or $ext = 'avi'
@@ -427,108 +429,54 @@ valign: <xsl:value-of select="@valign"/></xsl:message>
 -->
 
   <xsl:variable name="img">
-    <xsl:element name="{$tag}">
-      <xsl:attribute name="src">
-        <xsl:value-of select="$filename"/>
-      </xsl:attribute>
-
-      <xsl:choose>
-        <xsl:when test="@contentwidth or @contentdepth">
-          <!-- ignore @width/@depth, @scale, and @scalefit if specified -->
-          <xsl:if test="@contentwidth">
-            <xsl:attribute name="width">
-              <xsl:value-of select="$scaled.contentwidth"/>
-            </xsl:attribute>
-          </xsl:if>
-          <xsl:if test="@contentdepth">
-            <xsl:attribute name="height">
-              <xsl:value-of select="$scaled.contentdepth"/>
-            </xsl:attribute>
-          </xsl:if>
-        </xsl:when>
-
-        <xsl:when test="$scale != 1.0">
-          <!-- scaling is always uniform, so we only have to specify one dimension -->
-          <!-- ignore @scalefit if specified -->
-          <xsl:attribute name="width">
-            <xsl:value-of select="$scaled.contentwidth"/>
+    <xsl:choose>
+      <xsl:when test="@format = 'SVG'">
+        <object data="{$filename}" type="image/svg+xml">
+          <xsl:call-template name="process.image.attributes">
+            <xsl:with-param name="alt" select="$alt"/>
+            <xsl:with-param name="html.depth" select="$html.depth"/>
+            <xsl:with-param name="html.width" select="$html.width"/>
+            <xsl:with-param name="longdesc" select="$longdesc"/>
+            <xsl:with-param name="scale" select="$scale"/>
+            <xsl:with-param name="scalefit" select="$scalefit"/>
+            <xsl:with-param name="scaled.contentdepth" select="$scaled.contentdepth"/>
+            <xsl:with-param name="scaled.contentwidth" select="$scaled.contentwidth"/>
+            <xsl:with-param name="viewport" select="$viewport"/>
+          </xsl:call-template>
+          <embed src="{$filename}" type="image/svg+xml">
+            <xsl:call-template name="process.image.attributes">
+              <xsl:with-param name="alt" select="$alt"/>
+              <xsl:with-param name="html.depth" select="$html.depth"/>
+              <xsl:with-param name="html.width" select="$html.width"/>
+              <xsl:with-param name="longdesc" select="$longdesc"/>
+              <xsl:with-param name="scale" select="$scale"/>
+              <xsl:with-param name="scalefit" select="$scalefit"/>
+              <xsl:with-param name="scaled.contentdepth" select="$scaled.contentdepth"/>
+              <xsl:with-param name="scaled.contentwidth" select="$scaled.contentwidth"/>
+              <xsl:with-param name="viewport" select="$viewport"/>
+            </xsl:call-template>
+          </embed>
+        </object>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:element name="{$tag}">
+          <xsl:attribute name="src">
+            <xsl:value-of select="$filename"/>
           </xsl:attribute>
-        </xsl:when>
-
-        <xsl:when test="$scalefit != 0">
-          <xsl:choose>
-            <xsl:when test="contains($html.width, '%')">
-              <xsl:choose>
-                <xsl:when test="$viewport != 0">
-                  <!-- The *viewport* will be scaled, so use 100% here! -->
-                  <xsl:attribute name="width">
-                    <xsl:value-of select="'100%'"/>
-                  </xsl:attribute>
-                </xsl:when>
-                <xsl:otherwise>
-                  <xsl:attribute name="width">
-                    <xsl:value-of select="$html.width"/>
-                  </xsl:attribute>
-                </xsl:otherwise>
-              </xsl:choose>
-            </xsl:when>
-
-            <xsl:when test="contains($html.depth, '%')">
-              <!-- HTML doesn't deal with this case very well...do nothing -->
-            </xsl:when>
-
-            <xsl:when test="$scaled.contentwidth != '' and $html.width != ''
-                            and $scaled.contentdepth != '' and $html.depth != ''">
-              <!-- scalefit should not be anamorphic; figure out which direction -->
-              <!-- has the limiting scale factor and scale in that direction -->
-              <xsl:choose>
-                <xsl:when test="$html.width div $scaled.contentwidth &gt;
-                                $html.depth div $scaled.contentdepth">
-                  <xsl:attribute name="height">
-                    <xsl:value-of select="$html.depth"/>
-                  </xsl:attribute>
-                </xsl:when>
-                <xsl:otherwise>
-                  <xsl:attribute name="width">
-                    <xsl:value-of select="$html.width"/>
-                  </xsl:attribute>
-                </xsl:otherwise>
-              </xsl:choose>
-            </xsl:when>
-
-            <xsl:when test="$scaled.contentwidth != '' and $html.width != ''">
-              <xsl:attribute name="width">
-                <xsl:value-of select="$html.width"/>
-              </xsl:attribute>
-            </xsl:when>
-
-            <xsl:when test="$scaled.contentdepth != '' and $html.depth != ''">
-              <xsl:attribute name="width">
-                <xsl:value-of select="$html.width"/>
-              </xsl:attribute>
-            </xsl:when>
-          </xsl:choose>
-        </xsl:when>
-      </xsl:choose>
-
-      <xsl:if test="$alt != ''">
-        <xsl:attribute name="alt">
-          <xsl:value-of select="$alt"/>
-        </xsl:attribute>
-      </xsl:if>
-
-      <xsl:if test="$longdesc != ''">
-        <xsl:attribute name="longdesc">
-          <xsl:value-of select="$longdesc"/>
-        </xsl:attribute>
-      </xsl:if>
-
-      <xsl:if test="@align and $viewport = 0">
-        <xsl:attribute name="align">
-          <xsl:value-of select="@align"/>
-        </xsl:attribute>
-      </xsl:if>
-    </xsl:element>
+          <xsl:call-template name="process.image.attributes">
+            <xsl:with-param name="alt" select="$alt"/>
+            <xsl:with-param name="html.depth" select="$html.depth"/>
+            <xsl:with-param name="html.width" select="$html.width"/>
+            <xsl:with-param name="longdesc" select="$longdesc"/>
+            <xsl:with-param name="scale" select="$scale"/>
+            <xsl:with-param name="scalefit" select="$scalefit"/>
+            <xsl:with-param name="scaled.contentdepth" select="$scaled.contentdepth"/>
+            <xsl:with-param name="scaled.contentwidth" select="$scaled.contentwidth"/>
+            <xsl:with-param name="viewport" select="$viewport"/>
+          </xsl:call-template>
+        </xsl:element>
+      </xsl:otherwise>
+    </xsl:choose>
   </xsl:variable>
 
   <xsl:choose>
@@ -581,6 +529,115 @@ valign: <xsl:value-of select="@valign"/></xsl:message>
   </xsl:choose>
 </xsl:template>
 
+<xsl:template name="process.image.attributes">
+  <xsl:param name="alt"/>
+  <xsl:param name="html.width"/>
+  <xsl:param name="html.depth"/>
+  <xsl:param name="longdesc"/>
+  <xsl:param name="scale"/>
+  <xsl:param name="scalefit"/>
+  <xsl:param name="scaled.contentdepth"/>
+  <xsl:param name="scaled.contentwidth"/>
+  <xsl:param name="viewport"/>
+
+  <xsl:choose>
+    <xsl:when test="@contentwidth or @contentdepth">
+      <!-- ignore @width/@depth, @scale, and @scalefit if specified -->
+      <xsl:if test="@contentwidth">
+        <xsl:attribute name="width">
+          <xsl:value-of select="$scaled.contentwidth"/>
+        </xsl:attribute>
+      </xsl:if>
+      <xsl:if test="@contentdepth">
+        <xsl:attribute name="height">
+          <xsl:value-of select="$scaled.contentdepth"/>
+        </xsl:attribute>
+      </xsl:if>
+    </xsl:when>
+
+    <xsl:when test="$scale != 1.0">
+      <!-- scaling is always uniform, so we only have to specify one dimension -->
+      <!-- ignore @scalefit if specified -->
+      <xsl:attribute name="width">
+        <xsl:value-of select="$scaled.contentwidth"/>
+      </xsl:attribute>
+    </xsl:when>
+
+    <xsl:when test="$scalefit != 0">
+      <xsl:choose>
+        <xsl:when test="contains($html.width, '%')">
+          <xsl:choose>
+            <xsl:when test="$viewport != 0">
+              <!-- The *viewport* will be scaled, so use 100% here! -->
+              <xsl:attribute name="width">
+                <xsl:value-of select="'100%'"/>
+              </xsl:attribute>
+            </xsl:when>
+            <xsl:otherwise>
+              <xsl:attribute name="width">
+                <xsl:value-of select="$html.width"/>
+              </xsl:attribute>
+            </xsl:otherwise>
+          </xsl:choose>
+        </xsl:when>
+
+        <xsl:when test="contains($html.depth, '%')">
+          <!-- HTML doesn't deal with this case very well...do nothing -->
+        </xsl:when>
+
+        <xsl:when test="$scaled.contentwidth != '' and $html.width != ''
+                        and $scaled.contentdepth != '' and $html.depth != ''">
+          <!-- scalefit should not be anamorphic; figure out which direction -->
+          <!-- has the limiting scale factor and scale in that direction -->
+          <xsl:choose>
+            <xsl:when test="$html.width div $scaled.contentwidth &gt;
+                            $html.depth div $scaled.contentdepth">
+              <xsl:attribute name="height">
+                <xsl:value-of select="$html.depth"/>
+              </xsl:attribute>
+            </xsl:when>
+            <xsl:otherwise>
+              <xsl:attribute name="width">
+                <xsl:value-of select="$html.width"/>
+              </xsl:attribute>
+            </xsl:otherwise>
+          </xsl:choose>
+        </xsl:when>
+
+        <xsl:when test="$scaled.contentwidth != '' and $html.width != ''">
+          <xsl:attribute name="width">
+            <xsl:value-of select="$html.width"/>
+          </xsl:attribute>
+        </xsl:when>
+
+        <xsl:when test="$scaled.contentdepth != '' and $html.depth != ''">
+          <xsl:attribute name="width">
+            <xsl:value-of select="$html.width"/>
+          </xsl:attribute>
+        </xsl:when>
+      </xsl:choose>
+    </xsl:when>
+  </xsl:choose>
+
+  <xsl:if test="$alt != ''">
+    <xsl:attribute name="alt">
+      <xsl:value-of select="$alt"/>
+    </xsl:attribute>
+  </xsl:if>
+
+  <xsl:if test="$longdesc != ''">
+    <xsl:attribute name="longdesc">
+      <xsl:value-of select="$longdesc"/>
+    </xsl:attribute>
+  </xsl:if>
+
+  <xsl:if test="@align and $viewport = 0">
+    <xsl:attribute name="align">
+      <xsl:value-of select="@align"/>
+    </xsl:attribute>
+  </xsl:if>
+</xsl:template>
+
 <!-- ==================================================================== -->
 
 <xsl:template match="graphic">
@@ -683,7 +740,15 @@ valign: <xsl:value-of select="@valign"/></xsl:message>
 </xsl:template>
 
 <xsl:template match="imageobject">
-  <xsl:apply-templates select="imagedata"/>
+  <xsl:choose>
+    <xsl:when xmlns:svg="http://www.w3.org/2000/svg"
+              test="svg:*">
+      <xsl:apply-templates/>
+    </xsl:when>
+    <xsl:otherwise>
+      <xsl:apply-templates select="imagedata"/>
+    </xsl:otherwise>
+  </xsl:choose>
 </xsl:template>
 
 <xsl:template match="imagedata">
@@ -926,4 +991,14 @@ valign: <xsl:value-of select="@valign"/></xsl:message>
   </div>
 </xsl:template>
 
+<!-- ==================================================================== -->
+<!-- "Support" for SVG -->
+
+<xsl:template match="svg:*" xmlns:svg="http://www.w3.org/2000/svg">
+  <xsl:copy>
+    <xsl:copy-of select="@*"/>
+    <xsl:apply-templates/>
+  </xsl:copy>
+</xsl:template>
+
 </xsl:stylesheet>
diff --git a/xsl/html/param.ent b/xsl/html/param.ent
index 50d6916ec..0112fbc34 100644
--- a/xsl/html/param.ent
+++ b/xsl/html/param.ent
@@ -152,4 +152,5 @@
 <!ENTITY ulink.target SYSTEM "../params/ulink.target.xml">
 <!ENTITY use.extensions SYSTEM "../params/use.extensions.xml">
 <!ENTITY use.id.as.filename SYSTEM "../params/use.id.as.filename.xml">
+<!ENTITY use.svg SYSTEM "../params/use.svg.xml">
 <!ENTITY variablelist.as.table SYSTEM "../params/variablelist.as.table.xml">
diff --git a/xsl/html/param.xweb b/xsl/html/param.xweb
index 1fe242550..7148c8a44 100644
--- a/xsl/html/param.xweb
+++ b/xsl/html/param.xweb
@@ -219,6 +219,7 @@ to be incomplete. Don't forget to read the source, too :-)</para>
 &tex.math.delims;
 &pixels.per.inch;
 &points.per.em;
+&use.svg;
 </reference>
 
 <reference><title>Chunking</title>
@@ -460,6 +461,7 @@ around all these parameters.</para>
 <src:fragref linkend="ulink.target.frag"/>
 <src:fragref linkend="use.extensions.frag"/>
 <src:fragref linkend="use.id.as.filename.frag"/>
+<src:fragref linkend="use.svg.frag"/>
 <src:fragref linkend="variablelist.as.table.frag"/>
 
 </xsl:stylesheet>
diff --git a/xsl/params/use.svg.xml b/xsl/params/use.svg.xml
new file mode 100644
index 000000000..041d1addc
--- /dev/null
+++ b/xsl/params/use.svg.xml
@@ -0,0 +1,25 @@
+<refentry id="use.svg">
+<refmeta>
+<refentrytitle>use.svg</refentrytitle>
+<refmiscinfo role="type">boolean</refmiscinfo>
+</refmeta>
+<refnamediv>
+<refname>use.svg</refname>
+<refpurpose>Allow SVG in the result tree?</refpurpose>
+</refnamediv>
+
+<refsynopsisdiv>
+<src:fragment id='use.svg.frag'>
+<xsl:param name="use.svg" select="1"/>
+</src:fragment>
+</refsynopsisdiv>
+
+<refsect1><title>Description</title>
+
+<para>If non-zero, SVG will be considered an acceptable image format. SVG
+is passed through to the result tree, so correct rendering of the resulting
+diagram depends on the formatter (FO processor or web browser) that is used
+to process the output from the stylesheet.</para>
+
+</refsect1>
+</refentry>