<style> .reveal section img { background: rgba(255, 255, 255, 1) } </style>  ## Intro to fundamentals _Doug, 2020-03-29_ --- # SVG **S**calable **V**ector **G**raphics --- # A .png graphic  --- # A .svg graphic  --- # So what's the big deal? Those looked the same... :mag: <!-- Let's look a bit closer... Go back and download both images Zoom in, note fuzziness... --> --- # Scalability SVGs can be zoomed or shrank to any level without losing quality!  <p class="fragment" data-fragment-index="1"> <b>How?</b> </p> --- # Raster graphics (e.g. .png, jpg, etc)  <!-- From Latin, 'to rake' Each pixel defined Zooming/shrinking: algorithmic predictions --> --- # Vector graphics  <!-- Note file sizes Open up svg in notes viewer Add fill:red; and see desktop icon change Delete some random bit of the path --> --- # Vector > Raster - for 'designed' images - smaller file size - fully scalable without loss - easily modified - supported by 'all' web browsers... --- # SVG **S**calable **V**ector **G**raphics (Question break) --- # SVG history > SVG was developed by the W3C SVG Working Group starting in 1998, after six competing vector graphics submissions were received that year —[wikipedia](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) --- # [XKCD 927](https://xkcd.com/927/)  --- # SVG versions - [1.0](https://www.w3.org/TR/SVG10/), Sept 2001 - [1.1](https://www.w3.org/TR/SVG11/), Jan 2003 - ... - [2.0](https://svgwg.org/svg2-draft/), reached Candidate Recommendation stage Sept 2016. Last update Feb 2020! --- # Hands on! <!-- Open basic.svg with image viewer on left, geany on right Add fill red Add cx, then cy Add height, width --> --- # SVG editor - Because you might want to see what you're drawing - Inkscape seems to be the default FLOSS editor  <!-- Make a smiley! --> --- ## Let's head to the web... Browser as SVG viewer <!-- Serve presentation directory --> --- # Inline --- # Inline ### Good - All in one - Can style everything! ### Bad - All in one - No caching --- # `<img>` --- # `<img>` ### Good - External - Familiar ### Bad - No styling :disappointed: --- # (Not recommended) - `iframe` (introduces page separation) - `background-image` (no interactivity) - `embed` (not actually part of x/html) - `object` (DOM separated) --- # 'SVG fragment identifiers' --- ## Fragment identifiers ### Good - External - Can style everything! - Can have all SVGs in one file (sprite) ### Bad - Not quite as slick as `<img>` - Requires id definition --- # Hands on! (question break) --- # Going further... viewport, viewBox & preserveAspectRatio --- # 2 Lands ### Vectorland An infinite coordinate plane where SVG is drawn ### Browserland Finite window space on finite device --- # Working backwards I have an SVG image I want to display it in my browser I want it to be 200 X 200 px