Merge pull request #826 from lit/svg-tutorial

[tutorials] svg tutorial updates

Author: taylor-vann

packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html

@@ -76,8 +76,8 @@
       <input value="T">
       <input type="range" min="2" max="29" value="8">
       <input type="range" min="0" max="360" value="0">
-      <input type="color" value="#000000">
       <input type="color" value="#7acbf1">
+      <input type="color" value="#e3a7b2">
       <input type="color" value="#ffffff">
     </div>
   </body>

packages/lit-dev-content/site/tutorials/content/svg-templates/03.md

@@ -37,7 +37,7 @@ const helloTile = svg`
     clip-path="url(#rect-clip)"
     width="300"
     height="300"
-    fill="#000">
+    fill="#000000">
   </rect>
 ```
 

packages/lit-dev-content/site/tutorials/content/svg-templates/04.md

@@ -92,7 +92,7 @@ render() {
   return html`
     <svg height="100%" width="100%">
       ...
-      <rect height="100%" width="100%" fill="#fff"></rect>
+      <rect height="100%" width="100%" fill="#ffffff"></rect>
       <rect height="100%" width="100%" fill="url(#repeat-pattern)"></rect>
     </svg>
   `;

packages/lit-dev-content/site/tutorials/content/svg-templates/05.md

@@ -12,19 +12,13 @@ CSS applies attributes to HTML.
 However, only [SVG presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
 can be applied to SVG through CSS.
 
-In the following example, all `<rect>` elements will be as wide as
-their parent element while elements using the class `background` will
+In the following example, all elements using the class `background` will
 have a black fill.
 
-
 ```ts
 const helloSvgCss = css`
-  rect {
-    width: 100%;
-  }
-
   .background {
-    fill: #000;
+    fill: #000000;
   }
 `;
 ```
@@ -44,7 +38,7 @@ HTML counterpart.
 ```ts
 const helloCssCustomProperties = css`
   .background {
-    fill: var(--background-color, #ff8800);
+    fill: var(--background-color, #000000);
   }
 `;
 ```
@@ -68,7 +62,7 @@ const svgCSS = css`
   }
 
   text {
-    fill: #fff;
+    fill: #ffffff;
     dominant-baseline: hanging;
     font-family: monospace;
     font-size: 24px;
@@ -90,14 +84,14 @@ representing the required theme.
 ```ts
 const themeCSS = css`
   .background {
-    fill: var(--background-color, #000);
+    fill: var(--background-color, #000000);
   }
 
   text {
-    fill: var(--font-color, #fff);
+    fill: var(--font-color, #ffffff);
     font-size: var(--font-size, 26px);
     stroke-width: var(--stroke-width, 1.2px);
-    stroke: var(--stroke-color, #eee);
+    stroke: var(--stroke-color, #eeeeee);
   }
 `;
 ```
@@ -147,11 +141,11 @@ Finally add CSS custom properties to the styles in `index.html` to theme
 
 ```css
 :root {
-  --background-color: #000;
-  --font-color: #fff;
+  --background-color: #000000;
+  --font-color: #ffffff;
   --font-size: 26px;
   --stroke-width: 1.2px;
-  --stroke-color: #7acbf1;
+  --stroke-color: #eeeeee;
 
   font-family: 'Open Sans', sans-serif;
   font-size: 1.5em;