Manipulating elements in embedded SVG from the DOM

Here we have an example of an SVG(Scalable Vector Graphic) embedded in an HTML page. With HTML5 we have the <canvas> tag that gives the developer access to an SVG manipulation library built into modern browsers. But it still may prove useful and simpler for some tasks to have forms interact with embedded SVG instead of using the canvas JS library.

Below we have a simple SVG embedded, a circle, path(triangle), and rect element make up the graphic.

Yellow Red Cyan

Red Yellow Cyan

Cyan Yellow Red