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

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.

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.

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.

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.

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.

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.

JavaScript and SVG Assuming a single SVG that fills the screen, draw one rectangle var xmlns = 'http://www.w3.org/2000/svg'; 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

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 = 'http://www.w3.org/2000/svg'; 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 ); };

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.

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: https://www.youtube.com/watch?v=nvWwlZSXaR0 https://www.youtube.com/watch?v=they7m6YePo