[css-color-4][editorial] Add width/height attributes to all the SVG <img>s, and add an opaque backdrop and explicit width/height to the SVG files.

tabatkins · tabatkins · commit d2b08723dd66 · 2021-04-14T18:05:48.000-07:00
diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs
@@ -2791,7 +2791,7 @@ Device-independent Colors: Lab and LCH</h2>
 	the Lab color space is intended to be <em>perceptually uniform</em>.
 
 	<figure>
-		<img src="images/L-axis.svg" style="width: 30vmin">
+		<img src="images/L-axis.svg" width=240 height=575>
 		<figcaption>
 			This figure shows the Lightness axis of the CIE Lab colorspace.
 			Twenty neutral swatches are shown (L=0%, L=5%, to L=100%).
@@ -2832,7 +2832,7 @@ Device-independent Colors: Lab and LCH</h2>
 	towards the positive b axis.
 
 	<figure>
-		<img src="images/CH-plane-wheel.svg">
+		<img src="images/CH-plane-wheel.svg" width="500" height="500">
 		<figcaption>
 			This figure shows the L=50 plane of the CIE Lab colorspace.
 			20 degree increments in CIE LCH are displayed as circles
@@ -3341,7 +3341,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 			Cl is the corresponding linear-light component.
 
 			<figure>
-				<img src="images/sRGB-prim-sec.svg" style="width: 53.8vmin"
+				<img src="images/sRGB-prim-sec.svg" width=540 height=520
 				alt="diagram of sRGB primaries and secondaries in LCH">
 				<figcaption>Visualization of the sRGB colorspace in LCH. The primaries and secondaries are shown.</figcaption>
 			</figure>
@@ -3382,7 +3382,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 			</table>
 
 			<figure>
-				<img src="images/P3-prim-sec.svg" style="width: 60vmin"
+				<img src="images/P3-prim-sec.svg" width=580 height=560
 				alt="diagram of P3 primaries and secondaries in LCH">
 				<figcaption>Visualization of the P3 colorspace in LCH.
 					The primaries and secondaries are shown
@@ -3426,7 +3426,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 			</table>
 
 			<figure>
-				<img src="images/a98-prim-sec.svg" style="width: 66.2vmin"
+				<img src="images/a98-prim-sec.svg" width=640 height=560
 				alt="diagram of a98 primaries and secondaries in LCH">
 				<figcaption>Visualization of the a98 colorspace in LCH.
 					The primaries and secondaries are shown
@@ -3500,7 +3500,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 					C is the red, green or blue component.
 
 				<figure>
-					<img src="images/prophoto-prim-sec.svg" style="width: 80.68vmin"
+					<img src="images/prophoto-prim-sec.svg" width=780 height=760
 					alt="diagram of prophoto primaries and secondaries in LCH">
 					<figcaption>Visualization of the prophoto-rgb colorspace in LCH. The primaries and secondaries are shown
 					(but in sRGB, not in the correct colors).
@@ -3563,7 +3563,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 				Cl is the corresponding linear-light component.
 
 			<figure>
-				<img src="images/2020-prim-sec.svg" style="width: 69.3vmin"
+				<img src="images/2020-prim-sec.svg" width=670 height=580
 				alt="diagram of rec2020 primaries and secondaries in LCH">
 				<figcaption>Visualization of the rec2020 colorspace in LCH. The primaries and secondaries are shown
 				(but in sRGB, not in the correct colors).
@@ -3884,7 +3884,7 @@ Also, procedures that rely on knowing the color
 can proceed as normal.
 
 <figure>
-	<img src="images/macbeth-roundtrip.svg" style="width: 60vmin">
+	<img src="images/macbeth-roundtrip.svg" width=670 height=450>
 	<figcaption>
 		<p>A color checker, used for ensuring color fidelity
 		in the print and photographic industries.
@@ -4191,7 +4191,7 @@ Device-dependent CMYK Colors: the ''device-cmyk()'' function</h2>
 	the colorimetry of the RGB space, and so on.
 
 	<figure>
-		<img src="images/macbeth-naive.svg" style="width: 60vmin">
+		<img src="images/macbeth-naive.svg" width=670 height=450>
 		<figcaption>
 			<p>A color checker, used for ensuring color fidelity
 			in the print and photographic industries.
@@ -4313,7 +4313,7 @@ Transparency: the 'opacity' property</h2>
 	any overlapping portions do not increase the opacity.
 
 	<figure id="arabic-opacity-rendering">
-		<img src="images/joining-and-transparency.svg"
+		<img src="images/joining-and-transparency.svg" width=713 height=156
 		alt="overlapping glyphs rendered correctly, and incorrectly">
 		<figcaption>
 			Correct and incorrect rendering of text
diff --git a/css-color-4/images/2020-prim-sec.svg b/css-color-4/images/2020-prim-sec.svg
@@ -1,9 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-180 -145 335 290" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-180 -145 335 290" overflow="visible" width="670" height="580">
 <desc>Show a top-down view of the CIE Lab colorspace.
       The rec2020 primaries and secondaries are shown,
       with an annotation indicating the L value.
       For comparison, the sRGB primaries and secondaries are also shown.
 </desc>
+<rect x="-180" y="-145" width="100%" height="100%" fill="white" />
 <g fill="none" stroke="black" stroke-width="0.5">
 
 <!-- axes -->
diff --git a/css-color-4/images/CH-plane-wheel.svg b/css-color-4/images/CH-plane-wheel.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-80 -80 160 160" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-80 -80 160 160" overflow="visible" width="500" height="500">
 <desc>Show the L=50 plane of the CIE Lab colorspace.
       20 degree increments in CIE LCH are converted to Lab,
       then displayed as circles with the cx coordinate = CIE a and
@@ -8,6 +8,7 @@
       The colors are converted to sRGB which is used to fill the circles
       The out of gamut circles are visualized as grey with a red warning outer stroke.
 </desc>
+<rect x="-80" y="-80" width="100%" height="100%" fill="white" />
 <g fill="none" stroke="black" stroke-width="0.3">
   <polyline points="0 -70 0 70"/>
   <polyline points="-70 0 70 0"/>
diff --git a/css-color-4/images/L-axis.svg b/css-color-4/images/L-axis.svg
@@ -1,7 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -105 48 115" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -105 48 115" overflow="visible" width="240" height="575">
 <desc>Show the L axis of CIE Lab colorspace.
 </desc>
 
+<rect x="-5" y="-105" width="100%" height="100%" fill="white" />
+
 <g class="swatches">
     <!-- 20 swatches from L=0 to L=100-->
     <!-- for(i=0; i<=100; i+=5){console.log(100*LCH_to_sRGB([i,0,0])[1])} -->
diff --git a/css-color-4/images/P3-prim-sec.svg b/css-color-4/images/P3-prim-sec.svg
@@ -1,9 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-140 -140 290 280" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-140 -140 290 280" overflow="visible" width="580" height="560">
 <desc>Show a top-down view of the CIE Lab colorspace.
       The display-p3 primaries and secondaries are shown,
       with an annotation indicating the L value.
       For comparison, the sRGB primaries and secondaries are also shown.
 </desc>
+<rect x="-140" y="-140" width="100%" height="100%" fill="white" />
 <g fill="none" stroke="black" stroke-width="0.5">
 
 <!-- axes -->
diff --git a/css-color-4/images/a98-prim-sec.svg b/css-color-4/images/a98-prim-sec.svg
@@ -1,9 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-170 -140 320 280" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-170 -140 320 280" overflow="visible" width="640" height="560">
 <desc>Show a top-down view of the CIE Lab colorspace.
       The a98-rgb primaries and secondaries are shown,
       with an annotation indicating the L value.
       For comparison, the sRGB primaries and secondaries are also shown.
 </desc>
+<rect x="-170" y="-140" width="100%" height="100%" fill="white" />
 <g fill="none" stroke="black" stroke-width="0.5">
 
 <!-- axes -->
diff --git a/css-color-4/images/joining-and-transparency.svg b/css-color-4/images/joining-and-transparency.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="713px" height="156px" viewBox="0 0 713 156" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="713px" height="156px" viewBox="0 0 713 156" version="1.1" xmlns="http://www.w3.org/2000/svg"
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>joining-and-transparency</title>
     <desc>Created with Sketch.</desc>
diff --git a/css-color-4/images/macbeth-naive.svg b/css-color-4/images/macbeth-naive.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 45">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 45" width="670" height="450">
 <desc>Show a MacBeth color checker.
 Rectangular patches are sRGB, converted from averaged measured Lab values.
 Circles show same Lab values, converted to CMYK
diff --git a/css-color-4/images/macbeth-pdfium.svg b/css-color-4/images/macbeth-pdfium.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 45">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 45" width="670" height="450">
 <desc>Show a MacBeth color checker.
 Rectangular patches are sRGB, converted from averaged measured Lab values.
 Circles show same Lab values, converted to CMYK
diff --git a/css-color-4/images/macbeth-roundtrip.svg b/css-color-4/images/macbeth-roundtrip.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 45">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 45" width="670" height="450">
 <desc>Show a MacBeth color checker.
 Rectangular patches are sRGB, converted from averaged measured Lab values.
 Circles show same Lab values, converted to CMYK
diff --git a/css-color-4/images/prophoto-prim-sec.svg b/css-color-4/images/prophoto-prim-sec.svg
@@ -1,9 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-220 -190 390 380" >
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-220 -190 390 380" width="780" height="760">
 <desc>Show a top-down view of the CIE Lab colorspace.
       The prophoto-rgb primaries and secondaries are shown,
       with an annotation indicating the L value.
       For comparison, the sRGB primaries and secondaries are also shown.
 </desc>
+<rect x="-220" y="-190" width="100%" height="100%" fill="white" />
 <g fill="none" stroke="black" stroke-width="0.5">
 
 <!-- <rect fill="none" stroke="red" width="390" height="380" x="-220" y="-190"/> -->
diff --git a/css-color-4/images/sRGB-prim-sec.svg b/css-color-4/images/sRGB-prim-sec.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-130 -130 260 260" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-130 -130 270 260" overflow="visible" width="540" height="520">
 <desc>Show a top-down view of the CIE Lab colorspace.
       The sRGB primaries and secondaries are shown,
       with an annotation indicating the L value
@@ -7,6 +7,7 @@
       mix is lch(69.4521% 102.5872 61.4053) which is rgb(75.3600% 65.6304% 16.9796%) lab(69.4521, 49.09932548023713, 90.07435729010635)
 
 </desc>
+<rect x="-130" y="-130" width="100%" height="100%" fill="white" />
 <g fill="none" stroke="black" stroke-width="0.5">
 
 <!-- axes -->
