Add post: SVG viewPort, width and height

Fixes #141

package.json

@@ -13,6 +13,7 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "devDependencies": {
+    "@joeinnes/svelte-image": "^0.0.4",
     "@maiertech/prettier-config": "^2.0.0",
     "@stackblitz/sdk": "^1.5.6",
     "@sveltejs/adapter-auto": "^1.0.0-next.30",

src/lib/data/categories.ts

@@ -18,7 +18,6 @@ const categories: Tag[] = [
     title: 'Data visualization',
     description: 'I write about data visualization with Svelte and D3.',
     path: `${base}/data-viz`,
-    suppress: true,
   },
   {
     key: 'developer-tools',

src/lib/data/tags.ts

@@ -21,6 +21,14 @@ const tags: Tag[] = [
       'Node.js drives modern web development. Occasionally I make a deep-dive into Node.js fundamentals.',
     path: `${base}/tags/nodejs`,
   },
+  {
+    key: 'screencasts',
+    label: 'Screencasts',
+    title: 'Producing high-quality screencasts',
+    description:
+      'Creating high-quality screencasts is hard. I share what helped me learn it.',
+    path: `${base}/tags/screencasting`,
+  },
   {
     key: 'sveltekit',
     label: 'SvelteKit',
@@ -29,6 +37,14 @@ const tags: Tag[] = [
       'SvelteKit is my favorite framework to create fast and scalable websites. I write about issues I ran into and how I solved them.',
     path: `${base}/tags/sveltekit`,
   },
+  {
+    key: 'svg',
+    label: 'SVG',
+    title: 'SVG fundamentals',
+    description:
+      'Data visualization requires drawing SVGs. I write about SVG fundamentals for data visualization.',
+    path: `${base}/tags/sveltekit`,
+  },
   {
     key: 'seo',
     label: 'SEO',

src/routes/posts/svg-viewport-width-and-height/index.md

@@ -0,0 +1,64 @@
+---
+title: SVG viewPort, width and height
+author: thilo
+published: 2022-05-01
+modified: 2022-05-01
+description: TODO
+category: data-viz
+tags:
+  - sveltekit
+---
+
+# SVG test
+
+test
+
+## SVG with viewBox
+
+### Constrain parent
+
+- [Default width of SVG element is `auto` (treated as 100%).](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width#svg)
+- [Default height of SVG element is `auto` (treated as 100%).](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height#svg)
+
+#### Width and height of parent are not constrained
+
+SVG takes 100% of width and maintains aspect ratio defined in viewBox.
+
+#### Constrain width of parent
+
+SVG adapts to contrained width and maintains aspect ratio defined in viewBox.
+
+#### Constrain height of parent
+
+SVG still takes up availalbe width and maintains aspect ratio, but overflows
+height. Use `overflow` property to control overflow behavior.
+
+https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+
+#### Constrain width and height of parent
+
+Previous two cases combined.
+
+### Constrain SVG element (not parent)
+
+#### Constrain width
+
+Aspect ratio from viewBox is preserved.
+
+#### Constrain height
+
+Aspect ratio from viewBox is preserved.
+
+#### Constrain width and height different aspect ratio
+
+Build big nested SVG like on mozilla help page.
+
+## SVG without viewBox
+
+Pixel width and height become coordinate system. When you leave width or height
+away, defaults kick in.
+
+## Exaggerated viewBox
+
+viewbox with 9 logical pixels is still displayed smoothly, becaue it scales up
+to the availalbe pixels. You can think of viewBox like a retina display.