latin: common styling for svg paths (lines)

SVG data is always inlined, so making it dependent on page style should not
be an issue.  Simplifies all paths to be lines unless fill is specified,
decreasing total size from 46kB to 38kB (though only 50 bytes over 4kB
compressed).

diff --git a/latin.plp b/latin.plp
index 03820d2c4717b3c69a26dcbd0e7e5e562349650d..6f8e3e0d8cb6b7b2108a40e1de0ee416f3e305fb 100644 (file)
--- a/latin.plp
+++ b/latin.plp
@@ -22,6 +22,11 @@ Html({
                src: url("/suetterlin.ttf");
        }
        .glyphs tr:first-child+tr+tr td { font-family: Suetterlin }
+
+       svg path:not([fill]) {
+               stroke: currentColor;
+               fill: none;
+       }
 </style>
 
 <h1>Latin alphabet</h1>

diff --git a/writing-latn.inc.pl b/writing-latn.inc.pl
index 1d11c3c18845845bdfe15d82ed5f8cd26f4fb6d2..8cace931f5add7f2855a4f0902c2bb7049b7be7f 100644 (file)
--- a/writing-latn.inc.pl
+++ b/writing-latn.inc.pl
@@ -155,8 +155,8 @@ my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
                !$_ ? '-' : sprintf(
                        join('',
                                '<svg width="20" height="20" viewBox="0 0 10 15">',
-                               '<path stroke="currentColor" d="M5,6 v7"/>',
-                               '<path stroke="currentColor" fill="none" d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
+                               '<path d="M5,6 v7"/>',
+                               '<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
                                '</svg>',
                        ),
                        ['6', '3v3', '9v-3']->[$pl],
@@ -175,10 +175,10 @@ my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
        map { !$_ ? '-' : sprintf
                join('',
                        '<svg width="20" height="20" viewBox="0 0 8 18">',
-                       '<path stroke="currentColor" d="M4,1 v18"/>',
+                       '<path d="M4,1 v18"/>',
                        (map {(
-                               qq(<path stroke="currentColor" d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
-                               qq(<path stroke="currentColor" d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
+                               qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
+                               qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
                        )} 3, 7, 14),
                        '</svg>',
                ),
@@ -210,7 +210,7 @@ my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
 '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>' => [
        map { sprintf
                '<svg width="20" height="20" viewBox="0 0 8 6">'
-               . '<path stroke="currentColor" d="M1%s"/></svg>',
+               . '<path d="M1%s"/></svg>',
                join ' m2',
                map { sprintf ',%dv%dm0,-%d',
                        ($_ & 1 ? 0 : 2),  2 + ($_ & 2) + ($_ & 1) * 2,
@@ -238,8 +238,8 @@ my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
                s/(?:h|m[^0]).*?h\K/-/;
                m/h/ or s/v/l3,/g;
                m/v/ or s/h([^h]*)/l$1,3/g;
-               my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1" fill="currentColor">);
-               qq(<path stroke="currentColor" stroke-linecap="square" fill="none" d="$_"/>$dot)
+               my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1">);
+               qq(<path stroke-linecap="square" d="$_"/>$dot)
        }
        qw(
                Hvh  vhv  vh  hvh  vhvh  Hhvh  hv  Vvhv  Hhv
@@ -253,7 +253,7 @@ my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
        map { sprintf
                '<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
                . '<path%s d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
-               ' stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"',
+               ' stroke-linecap="round" stroke-linejoin="round"',
                'h.5v.5h-.5v-.5',  # start anchor
                map { ['M', 'h0M', 'L']->[$_] }
                split //, $_