1. SVG & DOM Manipulation via Javascript
Slides by Charlie Roberts, 11/16
Modified by Sean Boyle
IGME 230
Fall 2016

2. SVG (scalable vector graphics)
alternative to <canvas> and WebGL for
2D graphics in the browser.
Unlike Canvas / WebGL, which are pixel-based, SVG are scalable to any resolution due to its use of vectors. Firefox logo is link to corresponding SVG file. View page source to show class the SVG XML.

3. SVG : where is it used?
In addition to logos, SVG is also heavily used in d3.js, the most popular dataviz library for JavaScript, originally created by developers for the New York Times. The text / image above is a link to d3.js, spend some time with students briefly looking through a few interesting examples.

4. SVG = XML They look like HTML, but behave a bit differently.
Show SVG Demo #1. In this demo, the tags originally do not self-close. This causes a rendering error where only one circle is initially visible. By adding the closing tags (or self-closing backslashes) this error is fixed and both circles become visible. Note that closing tags / self-closing tags are not required in the HTML 5 spec.

5. Drawing shapes
<!-- start tag and size attributes --> <svg width='500' height='500'> <!-- draw some stuff --> <circle id='d' cx='100' cy='100' r='50' /> <circle id='e' cx='200' cy='200' r='25' /> </svg><!-- end tag -->
Note that the id attribute can be used to identify unique vectors. You can then use the id selector to apply CSS rules or manipulate the vectors via JavaScript.

6. Formatting (with CSS)
<style> #d { fill: red; stroke-width:10; stroke:green; } </style> <svg width='500' height='500'> <circle id='d' cx='100' cy='100' r='50' /> <circle id='e' cx='200' cy='200' r='25' /> </svg>
CSS rules for SVG are different than rules for DOM elements. For example, “fill“ defines the foreground color, there is no “stroke-color” property. Show svg.demo2.css.html file and play around with CSS in the developer console.

7. SVG Element Reference
Note that attributes have different meanings in different elements. For example, in an “ellipse”, rx means radius along the x-axis; in a “rect” element rx defines the x-radius of the ellipse used to round the corners of the rectangle (?!?). However, often times attributes carryover from one element to another.

8. JavaScript and SVG
Assuming a single SVG that fills the screen, draw one rectangle
var xmlns = ' var svg = document.querySelector( 'svg' ); var rect = document.createElementNS(xmlns, 'rect'); rect.setAttribute( 'x', 0 ); rect.setAttribute( 'y', 0 ); rect.setAttribute( 'width', 40 );
rect.setAttribute( 'height', 40 );
svg.appendChild( circle );
Explain that namespaces are specific to individual XML elements and can vary between elements. SVG elements created via JavaScript won’t work without namespaces. Show svg.demo3.rect.html

9. JavaScript and SVG
Assuming a single SVG that fills the screen, draw a hundred randomly sized, randomly colored red circles.
Note that the elements are stored so we can manipulate them easily, for example: circles.forEach( v => v.style.fill = “green” ). Point out that window.innerWidth / innerHeight are the best way to get at the dimensions of the HTML content (as opposed to the entire browser window including toolbar etc.) Show svg.demo4.circles.html
var xmlns = ' var svg = document.querySelector( 'svg' ); var circles = []; for( var i = 0; i < 100; i++ ) { var circle = document.createElementNS( xmlns, 'circle' ); circle.setAttribute( 'cx', Math.random() * window.innerWidth ); circle.setAttribute( 'cy', Math.random() * window.innerHeight ); circle.setAttribute( 'r' , Math.random() * 40 ); svg.appendChild( circle ); };

10. Animating SVG elements
Assuming a single SVG that fills the screen, draw a thousand randomly sized, randomly colored circles that move across the screen.
Show svg.demo5.animation.html. Talk about how the forEach method of the Array prototype calls a function on every element that an array contains. Explain that setInterval repeatedly calls a function every X milliseconds. parseFloat() has to be used with calls to getAttribute() whenever we want to use the results mathematically, as getAttribute() will always return a string. parseFloat() converts to a float.
Create helper functions that randomly color, position, and set the speed of individual circle elements.
Create a thousand circle elements and store them in an array
Call our helper functions on each item our array of circles to create variation between individual elements
Create a function to move a single circle according to its speed
60 times per second, call our circle moving function on every circle in our array.

11. ICE: Abstract Animation
Create an abstract animation. Use at least four different types of SVG elements in your composition. All SVG elements (with the exception of the container <svg> tag) should be dynamically added via JavaScript. Try to create at least two different “scenes”, moments where the animation changes in a significant way.
Place the resulting HTML file (and any external resources if needed) on Banjo and provide a link from your homepage.
Show an interesting abstract animation… for something fun and for inspiration. A couple I’d recommend: