Strategic Plan Graphic

Strategic Plan graphic as SVG code with links

This proof of concept for a responsive, vector, interactive alternative to a bitmap imagemap is built as an SVG, with appropriate elements linked to their corresponding strategies, styled with CSS. Elements could be scripted with javascript to create the same effect on hover that was used on the Chancellor's presentation to the regents: graying out everything but the circles of the same color, by applying alternate colors to the st2 - st8 CSS classes (see this visual reference.) Also basic accessibility work is yet to be done, such as titles, accesskeys, and ARIA role attributes. 

Because it's all just inline SVG code, there are no other files or assets to worry about, and it's only 57KB instead of 200KB for the low res PNG image file. To add this to any page, copy and paste all the code between the begin and end comments in the HTML source below.