On a black background, the black icon shadows are invisible. This is
not a huge problem but we can use CSS rules to make them visible again.
To do this, the SVG embedding is adjusted to automatically add classes
based on the filename in order to differentiate between the various
images, and additional classes are added to the icons to enable
selectors to match the shadows.
The results seem OK.
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient8662"
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient8662"
id="radialGradient1444"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,1.614716e-15,16.87306)"
id="radialGradient1444"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,1.614716e-15,16.87306)"
sodipodi:rx="15.644737"
sodipodi:cy="36.421127"
sodipodi:cx="24.837126"
sodipodi:rx="15.644737"
sodipodi:cy="36.421127"
sodipodi:cx="24.837126"
id="path8660"
style="opacity:0.20454545;color:#000000;fill:url(#radialGradient1444);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible"
sodipodi:type="arc" />
id="path8660"
style="opacity:0.20454545;color:#000000;fill:url(#radialGradient1444);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible"
sodipodi:type="arc" />
r="117.14286" />
<linearGradient
inkscape:collect="always"
r="117.14286" />
<linearGradient
inkscape:collect="always"
id="linearGradient5060">
<stop
style="stop-color:black;stop-opacity:1;"
id="linearGradient5060">
<stop
style="stop-color:black;stop-opacity:1;"
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5048"
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5048"
id="linearGradient6715"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(2.774389,0,0,1.969706,-1892.179,-872.8854)"
id="linearGradient6715"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(2.774389,0,0,1.969706,-1892.179,-872.8854)"
<g
style="display:inline"
transform="matrix(2.262383e-2,0,0,2.086758e-2,43.38343,36.36962)"
<g
style="display:inline"
transform="matrix(2.262383e-2,0,0,2.086758e-2,43.38343,36.36962)"
id="g6707">
<rect
style="opacity:0.40206185;color:black;fill:url(#linearGradient6715);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
id="g6707">
<rect
style="opacity:0.40206185;color:black;fill:url(#linearGradient6715);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient8662"
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient8662"
id="radialGradient8668"
cx="24.837126"
cy="36.421127"
id="radialGradient8668"
cx="24.837126"
cy="36.421127"
sodipodi:rx="15.644737"
sodipodi:cy="36.421127"
sodipodi:cx="24.837126"
sodipodi:rx="15.644737"
sodipodi:cy="36.421127"
sodipodi:cx="24.837126"
id="path8660"
style="opacity:0.14117647;color:#000000;fill:url(#radialGradient8668);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
sodipodi:type="arc" />
id="path8660"
style="opacity:0.14117647;color:#000000;fill:url(#radialGradient8668);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
sodipodi:type="arc" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient8662"
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient8662"
id="radialGradient1444"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,1.614716e-15,16.87306)"
id="radialGradient1444"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,1.614716e-15,16.87306)"
sodipodi:rx="15.644737"
sodipodi:cy="36.421127"
sodipodi:cx="24.837126"
sodipodi:rx="15.644737"
sodipodi:cy="36.421127"
sodipodi:cx="24.837126"
id="path8660"
style="opacity:0.29946521;color:#000000;fill:url(#radialGradient1444);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible"
sodipodi:type="arc" />
id="path8660"
style="opacity:0.29946521;color:#000000;fill:url(#radialGradient1444);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible"
sodipodi:type="arc" />
#footer { padding: 0 1em; }
}
#footer { padding: 0 1em; }
}
+// lighten icon shadows in dark mode
+@media (prefers-color-scheme: dark) {
+ svg.icons { path.shadow, g.shadow>* { opacity: 0.7; } }
+ svg.icons .shadow>stop { stop-color: #aaa; }
+ svg.return path.shadow { opacity: 0.45; }
+}
+
// page-specific dark mode styles
@media (prefers-color-scheme: dark) and (min-width: 35em) {
#page_weblog_responsive_tables {
// page-specific dark mode styles
@media (prefers-color-scheme: dark) and (min-width: 35em) {
#page_weblog_responsive_tables {
<!--
Nick's web site: SVG embedding.
<!--
Nick's web site: SVG embedding.
- Copyright © 2021 Nick Bowler
+ Copyright © 2021-2022 Nick Bowler
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
<xsl:value-of select='concat("es-", generate-id($idnode))' />
</xsl:attribute>
</xsl:if>
<xsl:value-of select='concat("es-", generate-id($idnode))' />
</xsl:attribute>
</xsl:if>
- <xsl:apply-templates mode='embed-svg' select='@*[local-name()!="id"]' />
+ <xsl:choose>
+ <xsl:when test='$idnode/@src and not(parent::*)'>
+ <!-- remove .svg suffix -->
+ <xsl:variable name='raw'
+ select='substring($idnode/@src, 1, string-length($idnode/@src)-4)' />
+
+ <xsl:attribute name='class'>
+ <xsl:value-of select='normalize-space(concat(@class, " embed ",
+ translate($raw, "/", " ")))' />
+ </xsl:attribute>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:apply-templates mode='embed-svg' select='@class' />
+ </xsl:otherwise>
+ </xsl:if>
+ <xsl:apply-templates mode='embed-svg'
+ select='@*[local-name()!="id" and local-name()!="class"]' />
<xsl:apply-templates mode='embed-svg' select='node()'>
<xsl:sort select='-count(self::svg:metadata)' data-type='number' />
</xsl:apply-templates>
<xsl:apply-templates mode='embed-svg' select='node()'>
<xsl:sort select='-count(self::svg:metadata)' data-type='number' />
</xsl:apply-templates>