(???) !DOCTYPE html>
(???) html>
(???) <head>
(???) <meta charset="utf-8" />
(???) <meta name="viewport" content="width=device-width, initial-scale=1.0" />
(???) <title><svg> - wat ken je ermee?</title>
(???) <link href="/slides.css" rel="stylesheet" />
(???) <script src="/slides.js" defer></script>
(???) <link href="svg.css" rel="stylesheet" />
(???) <script src="svg.js" type="module"></script>
(???) </head>
(???) <body>
(???) <main class="slides" tabindex="0" autofocus>
(???) <section class="paragraph" id="navigate-hint">
(???) <p>
(???) <kbd>←</kbd> prev<br />
(???) <kbd>→</kbd> next
(???) </p>
(???) </section>
(???) <section>
(???) <h1><svg></h1>
(???) <p class="small">Wat ken je ermee?</p>
(???) </section>
(???) <section class="paragraph small" id="print-hint">
(???) Interactive version:<br /><br />
(???) <a href="https://joriszwart.nl/svg">joriszwart.nl/svg</a>
(???) </section>
(???) <section class="paragraph">Hallo, Linux Nijmegen!</section>
(???) <section id="about-joris" class="about">
(???) <a href="https://joriszwart.nl" target="_blank">
(???) <img
(???) src="/joriszwart-logo-uluru.png"
(???) alt="Joris Zwart logo"
(???) width="1000"
(???) height="125"
(???) />
(???) </a>
(???) </section>
(???) <section class="paragraph">
(???) <p><u>S</u>calable <u>V</u>ector <u>G</u>raphics</p>
(???) </section>
(???) <section class="paragraph big">?</section>
(???) <section>SVG's tekenen</section>
(???) <section class="paragraph">Inkscape, AI</section>
(???) <section class="paragraph">Maar schept dat plezier?</section>
(???) <section>
(???) <pre>
(IMG) n deze presentatie:
(???) span class="small">1. <abbr title="Doe Het Zelf">DHZ</abbr> mét code</span>
(???) span class="small">2. Over SVG</span>
(???) span class="small">3. <abbr title="Doe Het Zelf">DHZ</abbr> via code</span>
(???) span class="small">4. Tips & instinkers</span>
(???) </pre>
(???) </section>
(???) <section>
(???) <p class="small">Deel I</p>
(???) Doe het zelf mét code
(???) </section>
(???) <section>Opfriscursus HTML & XML</section>
(???) <section class="paragraph">
(???) <pre class="editor" title="Text editor: linux-nijmegen.html">
(???) lt;h1>
(???) Linux Nijmegen
(???) lt;/h1>
(???) lt;p>
(???) Linux user group
(???) lt;/p>
(???) span class="cursor"> </span>
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) <div class="browser" title="Browser: file:///linux-nijmegen.html">
(???) <h1>Linux Nijmegen</h1>
(???) <p>Linux user group</p>
(???) </div>
(???) </section>
(???) <section>
(???) <p>Doe je mee?</p>
(???) </section>
(???) <section class="paragraph">
(???) <pre>
(IMG) ngrediënten
(???) span class="small">1 Teksteditor</span>
(???) span class="small">1 Internetbrowser</span>
(???) span class="small">1 Portie geduld</span>
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) <pre class="editor" title="Text editor: svg-met-code.html">
(???) lt;svg viewBox="-100 -50 200 100">
(???) <!-- je code hier -->
(???) <span class="cursor"> </span>
(???) lt;/svg>
(???) </pre>
(???) </section>
(???) <section>Daar gaan we!</section>
(???) <section class="paragraph" id="circle-interactive">
(???) <svg viewBox="-50 -25 100 50" fill="transparent" stroke="#f9f4f2">
(???) <circle r="10" />
(???) </svg>
(???) <pre tabindex="0">
(???) lt;circle r="10"/>
(???) </pre>
(???) </section>
(???) <section>Grafische primitieven</section>
(???) <section class="paragraph">
(???) <img src="primitives/pixel.svg" width="35%" />
(???) </section>
(???) <section class="paragraph">
(???) <img src="primitives/line.svg" width="35%" />
(???) </section>
(???) <section class="paragraph">
(???) <img src="primitives/square.svg" width="35%" />
(???) </section>
(???) <section class="paragraph">
(???) <img src="primitives/rect.svg" width="35%" />
(???) </section>
(???) <section class="paragraph">
(???) <img src="primitives/circle.svg" width="35%" />
(???) </section>
(???) <section class="paragraph">
(???) <img src="primitives/polygon-triangle.svg" width="35%" />
(???) </section>
(???) <section class="paragraph">
(???) <img src="primitives/polygon-poly.svg" width="35%" />
(???) </section>
(???) <section class="paragraph">
(???) <img src="primitives/text.svg" width="66%" />
(???) </section>
(???) <section>Kleur!</section>
(???) <section class="paragraph">
(???) <img src="primitives/stroke-fill.svg" width="35%" />
(???) <p class="small">Stroke & fill</p>
(???) </section>
(???) <section class="paragraph">
(???) <svg viewBox="-50 -25 100 50" fill="lime" stroke="none">
(???) <circle r="10" />
(???) </svg>
(???) <pre>
(???) span class="text-dimmed"><circle</span>
(???) span class="text-dimmed"> r="10"</span>
(???) fill="lime"
(???) span class="text-dimmed">/></span>
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) <svg viewBox="-50 -25 100 50" fill="lime" stroke="#f9f4f2">
(???) <circle r="10" />
(???) </svg>
(???) <pre>
(???) span class="text-dimmed"><circle</span>
(???) span class="text-dimmed"> r="10"</span>
(???) fill="lime"
(???) stroke="#f9f4f2"
(???) span class="text-dimmed">/></span>
(???) </pre>
(???) </section>
(???) <section class="paragraph" id="interactive-stroke-width">
(???) <svg viewBox="-50 -25 100 50" fill="lime" stroke="#f9f4f2">
(???) <circle r="10" stroke-width="3" />
(???) </svg>
(???) <pre tabindex="0">
(???) span class="text-dimmed"><circle</span>
(???) span class="text-dimmed"> r="10"</span>
(???) span class="text-dimmed"> fill="lime" stroke="#f9f4f2"</span>
(???) stroke-width="3"
(???) span class="text-dimmed">/></span>
(???) </pre>
(???) </section>
(???) <section class="paragraph" id="interactive-stroke-dasharray">
(???) <svg
(???) viewBox="-50 -25 100 50"
(???) fill="lime"
(???) stroke="#f9f4f2"
(???) stroke-width="3"
(???) >
(???) <circle r="20" stroke-dasharray="9,5" />
(???) </svg>
(???) <pre tabindex="0">
(???) span class="text-dimmed"><circle</span>
(???) span class="text-dimmed"> r="20"</span>
(???) span class="text-dimmed"> fill="lime" stroke-width="2"</span>
(???) stroke-dasharray="9,5"
(???) stroke-dashoffset="0"
(???) span class="text-dimmed">/></span>
(???) </pre>
(???) </section>
(???) <section>Opfriscursus wiskunde</section>
(???) <section class="paragraph">Coördinatenstelsel</section>
(???) <section class="paragraph">
(???) <img src="presentation/coordinates.svg" width="60%" />
(???) </section>
(???) <section class="paragraph" id="pixel">
(???) <svg
(???) viewBox="-30 -30 300 200"
(???) fill="#f9f4f2"
(???) stroke="none"
(???) class="svg-60"
(???) >
(???) <image
(???) href="presentation/coordinates.svg"
(???) x="-30"
(???) y="-30"
(???) width="300"
(???) height="200"
(???) />
(???) <circle r="4" cx="100" cy="50" fill="#4b4b4b" />
(???) </svg>
(???) <p class="small">(100, 50)</p>
(???) </section>
(???) <section class="paragraph" id="line">
(???) <svg
(???) viewBox="-30 -30 300 200"
(???) fill="none"
(???) stroke="#f9f4f2"
(???) class="svg-60"
(???) >
(???) <image
(???) href="presentation/coordinates.svg"
(???) x="-30"
(???) y="-30"
(???) width="300"
(???) height="200"
(???) />
(???) <line
(???) x1="50"
(???) y1="100"
(???) x2="175"
(???) y2="25"
(???) stroke="#4b4b4b"
(???) stroke-width="2"
(???) />
(???) <circle r="3" cx="50" cy="100" fill="#f9f4f2" stroke="none" />
(???) <circle r="3" cx="175" cy="25" fill="#f9f4f2" stroke="none" />
(???) </svg>
(???) <!-- stroke needed! -->
(???) <p class="small"><line x1="50" y1="100" x2="175" y2="25"/></p>
(???) </section>
(???) <section class="paragraph" id="circle">
(???) <svg
(???) viewBox="-30 -30 300 200"
(???) fill="none"
(???) stroke="#f9f4f2"
(???) class="svg-60"
(???) >
(???) <defs>
(???) <marker
(???) id="arrow"
(???) markerWidth="10"
(???) markerHeight="7"
(???) refX="12"
(???) refY="3.5"
(???) orient="auto"
(???) markerUnits="strokeWidth"
(???) fill="#f9f4f2"
(???) >
(???) <path d="M0,0 L10,3.5 L0,7 Z" fill="#f9f4f2" />
(???) </marker>
(???) </defs>
(???) <image
(???) href="presentation/coordinates.svg"
(???) x="-30"
(???) y="-30"
(???) width="300"
(???) height="200"
(???) />
(???) <line
(???) x1="100"
(???) y1="50"
(???) x2="125"
(???) y2="25"
(???) fill="#f9f4f2"
(???) stroke="#f9f4f2"
(???) marker-end="url(#arrow)"
(???) />
(???) <circle r="35" cx="100" cy="50" stroke="#4b4b4b" stroke-width="2" />
(???) <circle r="3" cx="100" cy="50" fill="#f9f4f2" stroke="none" />
(???) </svg>
(???) <p class="small"><circle r="35" cx="100" cy="50"/></p>
(???) </section>
(???) <section>Animatie!</section>
(???) <section class="paragraph">
(???) <img src="primitives/animated.svg" width="35%" />
(???) </section>
(???) <section class="about">
(???) <img src="file-formats/commodore-logo-animated.svg" width="35%" />
(???) </section>
(???) <!-- <section class="paragraph">
(???) <img src="animations/belt-export.svg" width="35%" />
(???) </section> -->
(???) <section>
(???) <p class="small">Deel II</p>
(???) Over SVG
(???) </section>
(???) <section class="paragraph">
(???) Tekst-gebaseerd
(???) <p class="small">Letterlijk open source!</p>
(???) </section>
(???) <section class="paragraph hex">
(???) <pre class="shell" title="hex viewer: rect.png">
(TXT) 000 89 50 4e 47 0d 0a 1a 0a .PNG....
(TXT) 008 00 00 00 0d 49 48 44 52 ....IHDR
(TXT) 010 00 00 01 2c 00 00 00 96 ...,....
(TXT) 018 01 00 00 00 00 4c 20 88 .....L .
(TXT) 020 7f 00 00 00 35 49 44 41 ....5IDA
(???) ... .. .. .. .. .. .. .. .. ........
(TXT) 068 4e 44 ae 42 60 82 ND.B`. </pre
(???) >
(???) </section>
(???) <section class="paragraph">
(???) <pre class="editor" title="Text editor: rect.svg">
(???) lt;svg viewBox="0 0 50 35"
(???) fill="transparent"
(???) stroke="#f9f4f2">
(???) <rect width="40" height="20" x="5" y="7.5"/>
(???) lt;/svg><span class="cursor"> </span>
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) Vector-gebaseerd
(???) <p class="small">(en dus schaalbaar)</p>
(???) </section>
(???) <section class="paragraph">
(???) <!-- TODO interactive zoom in/out-->
(???) <!-- TODO add a slide with this and a coordinat system -->
(???) <img src="presentation/bitmap-vs-vector.svg" width="66%" />
(???) </section>
(???) <section>Wanneer gebruiken?</section>
(???) <section class="paragraph">Tekeningen</section>
(???) <section class="paragraph">Logo's</section>
(???) <section class="paragraph">Iconen</section>
(???) <section class="paragraph">Bestandsgrootte</section>
(???) <section class="about">
(???) <img src="/c64/commodore-logo.svg" alt="Commodore logo" width="35%" />
(???) </section>
(???) <!-- TODO show jpeg to illustrate artifacts -->
(???) <!-- TODO need bar charts! -->
(???) <section class="paragraph">
(???) <table>
(???) <caption>
(???) Commodore logo static
(???) </caption>
(???) <thead>
(???) <tr>
(???) <th>Bestandstype</th>
(???) <th>Grootte</th>
(???) </tr>
(???) </thead>
(???) <tbody>
(???) <tr>
(???) <td>SVG</td>
(???) <td class="text-right">720 bytes</td>
(???) </tr>
(???) <tr>
(???) <td>GIF</td>
(???) <td class="text-right">6.609 bytes</td>
(???) </tr>
(???) <tr>
(???) <td>WebP</td>
(???) <td class="text-right">18.856 bytes</td>
(???) </tr>
(???) <tr>
(???) <td>JPEG</td>
(???) <td class="text-right">45.812 bytes</td>
(???) </tr>
(???) <tr>
(???) <td>PNG</td>
(???) <td class="text-right">46.463 bytes</td>
(???) </tr>
(???) </tbody>
(???) </table>
(???) </section>
(???) <!-- TODO show animated gif to illustrate clunky framerate -->
(???) <!-- TODO show animated mp4 to illustrate artifacts -->
(???) <section class="paragraph">
(???) <table>
(???) <caption>
(???) Commodore logo animated
(???) </caption>
(???) <thead>
(???) <tr>
(???) <th>Bestandstype</th>
(???) <th>Grootte</th>
(???) </tr>
(???) </thead>
(???) <tbody>
(???) <tr>
(???) <td>SVG</td>
(???) <td class="text-right">1.687 bytes</td>
(???) </tr>
(???) <tr>
(???) <td>MP4</td>
(???) <td class="text-right">152.875 bytes</td>
(???) </tr>
(???) <tr>
(???) <td>Animated GIF</td>
(???) <td class="text-right">274.251 bytes</td>
(???) </tr>
(???) </tbody>
(???) </table>
(???) </section>
(???) <section>
(???) <p class="small">Deel III</p>
(???) Doe het zelf via code
(???) </section>
(???) <section class="paragraph">
(???) <pre class="editor" title="Text editor: svg-via-code.html">
(???) lt;html>
(???) <body>
(???) <svg></svg>
(???) <script>
(???) ...
(???) </script>
(???) </body>
(???) lt;/html>
(???) </pre>
(???) </section>
(???) <section>
(???) CCC
(???) <p class="small">create, configure, connect</p>
(???) </section>
(???) <section class="paragraph">
(???) <pre>
(???) / create
(???) S = 'http://www.w3.org/2000/svg'
(SND) vg = document.querySelector('svg')
(???) ircle = document
(???) .createElementNS(NS, 'circle')
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) <pre>
(???) / configure
(???) ircle.setAttribute('cx', 50)
(???) ircle.setAttribute('cy', 75)
(???) ircle.setAttribute('r', 50)
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) <pre>
(???) / connect
(SND) vg.append(circle)
(???) </pre>
(???) </section>
(???) <section>
(???) <p class="small">Deel IV</p>
(???) Tips & instinkers
(???) </section>
(???) <section class="paragraph">Browserondersteuning</section>
(???) <section class="paragraph">Test, test, test!</section>
(???) <section class="paragraph">
(???) Veiligheid
(???) <p class="small">(CSP COEP COOP CORB CORP CORS SOP)</p>
(???) </section>
(???) <section class="paragraph">
(???) Animaties
(???) <p class="small"><s>SMIL</s>, CSS or JavaScript?</p>
(???) </section>
(???) <section class="paragraph">
(???) <a href="https://svgomg.net">SVGOMG</a>
(???) <p class="small">(protip)</p>
(???) </section>
(???) <!-- insert more slides -->
(???) <section class="paragraph">
(???) <a href="https://joriszwart.nl/svg">joriszwart.nl/svg</a>
(???) </section>
(???) </main>
(???) </body>
(???) /html>