From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sun, 26 Mar 2017 18:12:02 +0000 (+0200)
Subject: latin: common styling for svg paths (lines)
X-Git-Tag: v1.10~308
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/5629239957347a7ee23955ca39ba1f021db6d2bc?hp=01d61f72fed7ac041786ea69d1b080f45a4c49d1

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 03820d2..6f8e3e0 100644
--- 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 1d11c3c..8cace93 100644
--- 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 //, $_